jQuery mit Boxy-Plugin - Laden und Senden eines Formulars über Ajax

Question

Ich benutze JQuery mit Boxy-Plugin.

Wenn ein Benutzer auf einen Link auf einer Seite klickt, rufe ich Boxy.load auf, um ein Formular in das Popup zu laden. Das Formular wird geladen und ohne Probleme im Popup angezeigt.

Allerdings kann ich das Formular nicht an ein Submit-Ereignis binden, da ich das Formularelement nicht auswählen kann.

Dies ist der 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')); 
      } 
     }); 
    }); 

Die Warnung liest "undefiniert", wenn es angezeigt wird.

Und das ist die 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> 

Was mache ich falsch?

Answer 1

Soweit ich verstehe, live() Verfahren verwendet werden muss, um ein Element zu einem Ereignis in diesem Fall zu binden:

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

Derzeit wird Live-Methode dokumentiert werden nicht die Veranstaltung einreichen unterstützen. Allerdings könnte ich es mit Chrome und FF ausarbeiten. Auf der anderen Seite konnte ich es nicht in IE arbeiten. Eine bessere Möglichkeit zur browserübergreifenden Kompatibilität scheint es zu sein, die Übermittlungsschaltfläche des Formulars an das Klickereignis zu binden.

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

Answer 2

Zuerst (ein kleiner Punkt, aber eine mögliche Quelle von Problemen), sollte es id="flag-form" nicht id = "flag-form" (keine Leerzeichen) sein.

Zweitens sollten Sie nicht benötigen r.find(). Just do $("#flag-form").attr("id")

Answer 3

Ich lernte, dass Methoden in behaviours: function (e) {} Arbeiten, zusätzlich zur Verwendung Live() Methoden zu deklarieren.

z.B .:

$('#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; 
}); 

Answer 4

Boxy öffnet die URL (url = $(e.target).attr('href');) in einem -Frame. Sie können also das Formular nicht auf der Startseite (Elternseite) finden. Ihr Code zum Binden des Formulars sollte in der untergeordneten Seite (dh dem Boxy-Iframe) sein. Sie können die iframe URL mit Ihrem Code überprüfen, url = $(e.target).attr('href');