jquery with boxy plugin - load and submit a form via ajax

Question

I am using JQuery with Boxy plugin.

When a user clicks on a link on one page, I call Boxy.load to load a form onto the pop-up. The form loads and is displayed inside the pop-up without problems.

However, I can't bind the form to a submit event, since I can't select the form element.

This is the event handler:

    $('#flag-link a.unflagged').click (function(e) {
        url = $(e.target).attr('href');
        Boxy.load(url, {behaviours: function(r) {
         alert ($("#flag-form").attr('id'));
      }
     });
    });

The alert reads "undefined" when it is displayed.

And this is the form:

<form id="flag-form" method="POST" action="somepage">        
    <table>
        <tr><td><input type="text" name = "name"></td></tr>
        <tr><td><input type="submit" value="OK"></td></tr>
    </table>
</form>

What am I doing wrong?

Answer 1

First (a minor point, but a potential source of trouble), it should be id="flag-form" not id = "flag-form" (no spaces).

Second, you shouldn't need r.find(). Just do $("#flag-form").attr("id")

Answer 2

As far as I understand, live() method must be used to bind an element to an event in this case:

$("#flag-form").live("submit", function(){ ... }

Presently, live method is documented to be not supporting the submit event. However, I could work it out with Chrome and FF. On the other hand, I couldn't get it working in IE. A better way for cross-browser compatibility seems to be binding the submit button of the form to the click event.

$("#flag-form-submit").live("click", function(){

Answer 3

I learnt that declaring methods in behaviours: function (e) {} works, in addition to using live() methods.

E.g.:

$('#flag-link a.unflagged').click (function() {
    Boxy.load(this.href, {
      behaviours: function(r) {
        r.find('#flag-form').bind('submit', function() {
          // do on submit e.g. ajax calls etc.
        });
      }
    });
    return false;
});