jQuery.validate may have broken Facebox pop-up

Question

My Facebox pop-up contains a form with a submit button. I also have a second button to open an unrelated Facebox pop-up that was working before I added jQuery.validate to the project. I need to validate the email and password fields prior to being submitted.

I should add that these pop-ups are loaded via external .html files. This loaded them via AJAX request.

On index.html, the pop-ups are setup ($k is equal to jQuery.noConflict());

$k('a[rel*=example_2]').facebox_1({
    loading_image : '/images/loading.gif',
    close_image   : '/images/closelabel.gif'
});

And the link clicked to open the above Facebox:

<a href="login.html" title="Log In" rel="example_2" id='login'>Log In </a>

And everything below is in login.html

The validation:

$(function () {
    $('form[name="login"]').validate({
        rules: {
            email: { required: true, email: true },
            password: "required"
        },
        messages: {
            email: "",
            password: ""
        }
    });
});

And the form:

<form name="login" method="post" action="login.aspx">

And the button that doesn't work

<a href="#" title="Register" onclick="showRegister()" ><img src="images/register.jpg" /></a>

Nick helped me get the form posting in this post, but it seems to have broken the other button. I'm having problems debugging the script, because I don't know if Firebug can set breakpoints in externally requested (via XHR) pages.

I tried adding a click handler to the broken button that just called showRegister(), and that didn't work either. showRegister() simple calls $('#linkFromIndexDotHtml').click(); which is, in fact, a link from index.html. I thought that may be the problem, but it worked prior.

Which *other* button? I'm unclear on which is broken here, can you expand on that a bit? — Nick Craver, Oct 05 '10 at 22:40
The other "button" is the ``, where `showRegister()` calls .click on a link that exists on the "parent" page, index.html. Does that make sense? This button is inside the form on login.html. I've tried it outside the form, and it behaves the same. — David Fox, Oct 06 '10 at 00:07

Meredith · Accepted Answer · 2011-01-31T21:47:55.647

I had the same problem and solved it with info from http://old.nabble.com/Validation-and-Facebox-td22187264s27240.html

$.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

jQuery.validate may have broken Facebox pop-up

1 Answers1