jQuery: The Write Less, Do More JavaScript Library

Validation and Facebox

View: New views
4 Messages — Rating Filter:   Alert me  

Validation and Facebox

by Bob O-2 :: Rate this Message:

| View Threaded | Show Only this Message


Hello,
Ive been using the Validation plugin on my site and it works
fantastic. i have run into an issue with trying to get it to perform
validation on a form that resides in a facebox.

I setup the validation the same as any other form in the site. what
could i be missing?

Re: Validation and Facebox

by byron-26 :: Rate this Message:

| View Threaded | Show Only this Message


In case anyone else stumbles upon this, I will give my solution to the
problem (hours later, of course).

So the issue is that Facebox is using the clone() method to move the
DOM elements around in $.facebox.fillFaceboxFromHref.  Now a fix that
worked on some of my pages was to simply using the other form of the
clone() method -> clone(true).  Giving the boolean true tells JQuery
to copy the event handlers as well as the DOM stuff.  Like I said,
this only worked on a couple of my pages.  The final solution I came
upon was to completely change how it sends the DOM element to the
reveal method of Facebox.  This involved changing the following
things:

$.extend($.facebox, {
    settings: {
    dom_data: null,
    dom: null,
...
*add in the variables dom and dom_data in the main declaration of
facebox

if (href.match(/#/)) {
      var url    = window.location.href.split('#')[0]
      var target = href.replace(url,'')
      $.facebox.settings.dom = target;
      $.facebox.settings.dom_data = $(target).children();
      $.facebox.reveal($(target).children().show(), klass)
...
*this is in fillFaceboxFromHref

finally,

$(document).bind('close.facebox', function() {
  if($.facebox.settings.dom){
  $($.facebox.settings.dom).append($.facebox.settings.dom_data);

  $.facebox.settings.dom = null;
  $.facebox.settings.dom_data = null;
  }
...
* this is at the end of the file

The changes here are avoiding the cloning process entirely.  Instead
we are moving the elements to the Facebox and then moving them back
when we close the thing.  This seems to work.  It looks like it is a
little slower, or maybe it is just me.  Hopefully this helps someone.

On Feb 24, 1:57 pm, Bob O <sngndn...@...> wrote:
> Hello,
> Ive been using the Validation plugin on my site and it works
> fantastic. i have run into an issue with trying to get it to perform
> validation on a form that resides in a facebox.
>
> I setup the validation the same as any other form in the site. what
> could i be missing?

Re: Validation and Facebox

by Ander Aznar :: Rate this Message:

| View Threaded | Show Only this Message


Thanks for your advice Byron!
I was experiencing the same problem Bob described and your solution
worked perfectly.
BTW, using clone(true) didn't work in my case neither.

On Mar 18, 10:36 am, byron <gexma...@...> wrote:

> In case anyone else stumbles upon this, I will give my solution to the
> problem (hours later, of course).
>
> So the issue is that Facebox is using the clone() method to move the
> DOM elements around in $.facebox.fillFaceboxFromHref.  Now a fix that
> worked on some of my pages was to simply using the other form of the
> clone() method -> clone(true).  Giving the boolean true tells JQuery
> to copy the event handlers as well as the DOM stuff.  Like I said,
> this only worked on a couple of my pages.  The final solution I came
> upon was to completely change how it sends the DOM element to the
> reveal method of Facebox.  This involved changing the following
> things:
>
> $.extend($.facebox, {
>     settings: {
>         dom_data: null,
>         dom: null,
> ...
> *add in the variables dom and dom_data in the main declaration of
> facebox
>
> if (href.match(/#/)) {
>       var url    = window.location.href.split('#')[0]
>       var target = href.replace(url,'')
>       $.facebox.settings.dom = target;
>       $.facebox.settings.dom_data = $(target).children();
>       $.facebox.reveal($(target).children().show(), klass)
> ...
> *this is in fillFaceboxFromHref
>
> finally,
>
> $(document).bind('close.facebox', function() {
>         if($.facebox.settings.dom){
>                 $($.facebox.settings.dom).append($.facebox.settings.dom_data);
>
>                 $.facebox.settings.dom = null;
>                 $.facebox.settings.dom_data = null;
>         }
> ...
> * this is at the end of the file
>
> The changes here are avoiding the cloning process entirely.  Instead
> we are moving the elements to the Facebox and then moving them back
> when we close the thing.  This seems to work.  It looks like it is a
> little slower, or maybe it is just me.  Hopefully this helps someone.
>
> On Feb 24, 1:57 pm, Bob O <sngndn...@...> wrote:
>
> > Hello,
> > Ive been using the Validation plugin on my site and it works
> > fantastic. i have run into an issue with trying to get it to perform
> > validation on a form that resides in a facebox.
>
> > I setup the validation the same as any other form in the site. what
> > could i be missing?

Re: Validation and Facebox

by vernak2539 :: Rate this Message:

| View Threaded | Show Only this Message

this seems to work with every browser but safari. Is there a way to get around that?
byron-26 wrote:
In case anyone else stumbles upon this, I will give my solution to the
problem (hours later, of course).

So the issue is that Facebox is using the clone() method to move the
DOM elements around in $.facebox.fillFaceboxFromHref.  Now a fix that
worked on some of my pages was to simply using the other form of the
clone() method -> clone(true).  Giving the boolean true tells JQuery
to copy the event handlers as well as the DOM stuff.  Like I said,
this only worked on a couple of my pages.  The final solution I came
upon was to completely change how it sends the DOM element to the
reveal method of Facebox.  This involved changing the following
things:

$.extend($.facebox, {
    settings: {
    dom_data: null,
    dom: null,
...
*add in the variables dom and dom_data in the main declaration of
facebox

if (href.match(/#/)) {
      var url    = window.location.href.split('#')[0]
      var target = href.replace(url,'')
      $.facebox.settings.dom = target;
      $.facebox.settings.dom_data = $(target).children();
      $.facebox.reveal($(target).children().show(), klass)
...
*this is in fillFaceboxFromHref

finally,

$(document).bind('close.facebox', function() {
  if($.facebox.settings.dom){
  $($.facebox.settings.dom).append($.facebox.settings.dom_data);

  $.facebox.settings.dom = null;
  $.facebox.settings.dom_data = null;
  }
...
* this is at the end of the file

The changes here are avoiding the cloning process entirely.  Instead
we are moving the elements to the Facebox and then moving them back
when we close the thing.  This seems to work.  It looks like it is a
little slower, or maybe it is just me.  Hopefully this helps someone.

On Feb 24, 1:57 pm, Bob O <sngndn...@gmail.com> wrote:
> Hello,
> Ive been using the Validation plugin on my site and it works
> fantastic. i have run into an issue with trying to get it to perform
> validation on a form that resides in a facebox.
>
> I setup the validation the same as any other form in the site. what
> could i be missing?