Question

I have a dashboard page where the user can enter an asset code or ID to search on, and on clicking the search button or hitting enter the search result comes up in a Facebox modal. So far, so good. However, when the user tries to perform a second search, the Facebox result modal fails to open, despite the JQuery POST happening correctly and the response HTML being returned as it should be. My function that binds to the submit function and performs the ajax POST is as follows:

  // attach a submit handler to the form
  $("#astsrch").submit(function(event) {    
    //$('a[rel*=facebox]').facebox();                                       
    // stop form from submitting normally
    event.preventDefault(); 

    // get some values from elements on the page:
    var $form = $( this ),
        term = $form.find( 'input[name="assetsearch"]' ).val(),
        url = $form.attr( 'action' );

    // Send the data using post and put the results in a div
    $.post( url, { assetsearch: term } ,
      function( data ) {
          $.facebox(data);
      }
    );
  });

It seems that something is happening when the Facebox close button is clicked that prevents any further Facebox from opening when the search form is submitted via the above function.

Answer 1

look at this post. it’s similar to yours. try to bind a click event on the submit button.

something like:

$(document).ready(function() {
    $('#astsrch').live('click', function() {
        $.get($(this).attr("action"), function(data){
            $.facebox(data);
        });
    }); 
});

good luck!