jQuery: Colorbox + Form - Accès aux données publiées + quelques questions diverses

Question

Mon but est de soumettre un formulaire dans un modal Colorbox via ajax (cette partie est complète), puis de prendre l'une des valeurs soumises (appelée 'pourcentage') et mettre à jour une valeur dans une table.

J'ai mon code ci-dessous (sans formulaire). Vous pouvez voir qu'un lien est ouvert avec la Div contenant mon formulaire (#Form_PlayerSave) et que ce formulaire est ajaxifié à travers le génial jQuery Form Plugin. Le formulaire est soumis correctement, maintenant je veux juste mettre à jour la partie 'pourcentage' d'une table.

Le script est inclus dans le script car j'ai besoin de 25 formulaires par page (un pour chaque ligne de la table), donc chaque $ x ne compte que les différents formulaires.

Alors, qu'est-ce que je fais? Ce que j'ai ci-dessous renvoie undefined, et j'ai essayé pas mal de solutions variées.

J'ai également remarqué que lorsque le lien dans la table pour ouvrir le modal Colorbox est de nouveau cliqué, il affiche la page que le formulaire soumettrait normalement à si elle n'était pas allée tout à fait. Des idées sur la façon de résoudre ce problème afin que l'utilisateur peut mettre à jour la valeur au contenu de leur petit coeur?

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

}); 

J'apprécie vraiment l'aide de tout le monde! Merci * 10!

Answer 1

Je l'ai eu!

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

Pourquoi cela fonctionne me bat, mais c'est le cas. :)

Aussi, pour les futurs spectateurs, pour vous assurer que le div ne soit pas remplacé, assurez-vous simplement que la cible ne pointe pas vers la div de votre forme d'origine (stupide muet de ma part).