2010-07-02 10 views
0

J'ai une page html qui contient une table, quelques lignes et à l'intérieur de n'importe quelle ligne je checkbox. Lorsque je sélectionne une case à cocher je vais supprimer le message MAIS seulement quand je clique sur un bouton rouge de la mort.Comment envoyer des variables générées dynamiquement via ajax, en utilisant la méthode post

Exemple
tableau
      tr (unique_id)
            td [case]
            td contenu
            td Autre contenu
[... et ainsi de suite]
/Table
[bouton rouge de décès]

Maintenant, la suppression de lignes multiples doit être sans recharger de la page, donc j'ai mis en place une fonction ajax qui fonctionne comme ceci:

  1. configuration d'un objet ajax.
  2. définir la méthode ouverte (post/get, url, true) ...
  3. attendre la réponse de la page "url" .... prendre un café, faire une pause.
  4. obtenu une réponse, en utilisant jquery supprimer la ligne en utilisant l'identifiant unique des lignes.
  5. jquery: Fermez le popup un retour à l'action juste fait
  6. jquery: mettre à jour des contre autour de la page

Alors, je commence tryin à supprimer un seul enregistrement et tout va bien, j'a créé un lien sur toutes les lignes qui appellent la fonction pour supprimer "enregistrement unique" en passant l'ID de l'élément.

Mais maintenant je dois développer le multi-delete-of-doom. la première chose que j'ai pensé était "je peux envelopper la table dans un 'formulaire' et envoyer tout avec la méthode 'post'". Cela semble être brillant et facile ....
mais ne fonctionne pas: - | Googling autour j'ai trouvé un exemple qui semble suggérer de définir une variable qui contient l'élément à envoyer ... donc, en essayant de suivre de cette façon j'ai besoin d'une méthode pour obtenir le nom/id/valeur (c'est pas important, je peux remplir un attribut avec l'id correct) de la case sélectionnée.

Ici, la fonction qui font l'appel ajax et tout le reste

function deleteSelected() { 
    var params = null; 
    var xmlhttp; 
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp = new XMLHttpRequest(); 
    } 
    else {// code for IE6, IE5 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.open("post", "./cv_delete_pm.php?mode=multi", true); //cancella i messaggi e ritorna l'id delle righe da cancellare 
    //Send the proper header information along with the request 
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    http.setRequestHeader("Content-length", params.length); 
    http.setRequestHeader("Connection", "close"); 

    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4) { 
      if (xmlhttp.status != 404) { 
       var local = eval("(" + xmlhttp.responseText + ")"); 
       /* 
       //cancella gli elementi specificati dalla response 
       var Node = document.getElementById(local.id); 
       Node.parentNode.removeChild(Node); 
       loadMessagesCount('{CUR_FOLDER_NAME}'); //aggiorna sidebar e totale messaggi nel body 
       initTabelleTestate(); //ricrea lo sfondo delle righe 
       $("#msgsDeleted").attr("style", "left: 600px; top: 425px; display: block;"); 
       $("#msgsDeleted").fadeIn(500); 
       $("#msgsDeleted").fadeOut(2000); 
       $("#msgsDeleted").hide(0); 
       */ 
      } 
     } 
    }; 
    xmlhttp.send(params); 
} 

En fait, la variable « param » est réglé sur null juste parce que je fais un peu d'expérimentation.

Ainsi, les questions

sont:
- Est-il possible de faire une demande ajax envoi du contenu du formulaire? Comment?
- Est-il possible d'obtenir le nom/valeur/id (l'un de ceux-ci) de toutes les cases cochées d'une page html? Comment?

réponse à l'une de ces deux questions avec la solution suffit pour gagner mon culte personnel :)

Répondre

0

mise à jour. Résolu.

J'ai utilisé la fonction intégrée de jquery pour gérer le formulaire sumbit à l'aide de la fonction $ jQuery.post() et de la fonction $ (# idform) .serialize(). Il est très tard maintenant, mais demain je vais essayer de se rappeler de coller ici le bon code :)

Merci pour la réponse de toute façon :)

mise à jour (code ci-dessous):

//Send by Post 
function deleteSelected() { 
    $.post("./delete.php?mode=multi", 
     $("#pmfolder_form").serialize(), 
     function(data){ 
      var local = eval("(" + data + ")"); 
        //this delete the html via dom to update the visual information 
      for (var i = 0; i < local.length-1; ++i) { 
       var Node = document.getElementById(local[i]); 
       Node.parentNode.removeChild(Node); 
      } 
     }); 
} 

La structure de la selectbox était quelque chose comme:

<input type="checkbox" name="check_<? print $progressive_id; ?>" value="<? print $real_id; ?>"/> 

C'est tout. :)

0

Edit: Je pense que vous utilisez JQuery regardez donc ici: http://api.jquery.com/category/ajax/

Vous devez utiliser un travail de frame javascript tel que dojo ou jquery pour gérer Ajax. Ecrire vos propres fonctions ajax à partir de rien n'est pas recommandé.

Certains cadres:

Un exemple jquery (vous utilisez déjà ce cadre?):

$.post("test.php", $("#testform").serialize()); 

A Dojo Exemple:

Soumettre un formulaire en utilisant POST et Ajax:

function postForm() { 


       var kw = { 
        url: 'mypage.php', 
        load: function(type, data, evt) { 

         dojo.byId("someElement").innerHTML=data; 



        }, 

        formNode: dojo.byId("myForm"), 
        method: "POST", 
        error: function(type, data, evt){ 
         //handle error 

        }, 
        mimetype: "text/html" 
       }; 

       dojo.io.bind(kw); 

      } 
+0

Merci pour la réponse :) Aller vérifier et étudier la solution ... mise à jour bientôt :) – theCrius

Questions connexes