jQuery: Colorbox + Formular - Zugang zu gebuchten Daten + einige andere Fragen

Question

Mein Ziel ist es, ein Formular in einem Colorbox Modal über Ajax (dieser Teil ist abgeschlossen), und dann einen der übermittelten Werte ('Prozentsatz' genannt) und aktualisiere einen Wert in einer Tabelle.

Ich habe meinen Code unten (sans Form). Sie können sehen, dass ein Link mit der Div geöffnet ist, die mein Formular enthält (#Form_PlayerSave) und dass das Formular durch den fantastischen jQuery Form Plugin ersetzt wird. Das Formular wird korrekt gesendet, jetzt möchte ich nur den 'Prozentsatz' Teil einer Tabelle aktualisieren.

Es gibt PHP im Skript enthalten, weil ich 25 Formulare pro Seite (eine für jede Zeile der Tabelle) benötigt, so dass jedes $ x nur die verschiedenen Formulare zählt.

Also, was mache ich? Was ich unten habe, kommt undefiniert zurück und ich habe einige verschiedene Lösungen ausprobiert.

Ich habe auch bemerkt, dass, wenn der Link in der Tabelle zum Öffnen der Modalität Colorbox erneut angeklickt wird, zeigt es die Seite, die das Formular normalerweise würde eingereicht, wenn es nicht alle Ajaxy gegangen wäre. Irgendwelche Ideen, wie man das beheben kann, so dass Benutzer den Wert auf den Inhalt ihres kleinen Herzens aktualisieren können?

$(document).ready(function(){ 

    function prepform(){ 



     $('#Form_PlayerSave<?= $x ?>').ajaxForm({ 
      // target identifies the element(s) to update with the server response 
      target: '#customPlanDiv<?= $x; ?>', 

      // success identifies the function to invoke when the server response 
      // has been received; here we apply a fade-in effect to the new content 
      success: function() { 
       $.fn.colorbox({html:"Custom Plan Saved", open:true}); 
       var x = $('#Form_PlayerSave<?= $x ?> :percentage').fieldValue(); 
       $('#custom_plan_text<?= $x ?>').val(x[0]); 
      } 

     }); 
    } 

    $(".customPlan<?= $x; ?>").colorbox({inline:true, href:"#customPlanDiv<?= $x; ?>"}, prepform); 

}); 

Ich schätze die Hilfe aller wirklich! Danke * 10!

Answer 1

Ich habe es!

$(document).ready(function(){ 

       function prepform(){ 

        $('#Form_PlayerSave<?= $x ?>').ajaxForm({ 
           // target identifies the element(s) to update with the server response 

           beforeSubmit: CPshowRequest<?= $x ?>, 
           // success identifies the function to invoke when the server response 
           // has been received; here we apply a fade-in effect to the new content 
           success: CPshowResponse<?= $x ?>, 
           resetForm: true 

        }); 

       } 

       $(".customPlan<?= $x; ?>").colorbox({inline:true, href:"#customPlanDiv<?= $x; ?>"}, prepform); 

     }); 

      // pre-submit callback 
      function CPshowRequest<?= $x ?>(formData, jqForm) { 
       var x = $('#percentage<?= $x ?>').fieldValue(); 
       $('#custom_plan_text<?= $x ?>').html(x[0]); 
       return true; 
      } 
      function CPshowResponse<?= $x ?>(responseText, statusText, xhr, $form) { 
       $.fn.colorbox({html:"Custom Plan Saved", open:true}); 
      } 

Warum das funktioniert schlägt mich, aber es tut. :)

Auch für zukünftige Zuschauer, um sicherzustellen, dass die div nicht ersetzt wird onsubmit einfach sicherstellen, Ziel zeigt nicht auf Ihre ursprüngliche Form div (dumm dumm dumm meinerseits).