JQuery - ID d'accès d'IMG ajouté à la table pour le script PHP

Question

Fondamentalement, j'ai une table affiche quelques lignes avec un bouton de suppression à côté d'eux. Quand quelqu'un clique sur le bouton de suppression, je prends l'ID de ce bouton, le passe à un script php, supprime l'enregistrement de la base de données, puis fondu la ligne de la page. Voici le code:

$(".remove-button").live('click', function(){ 
    var remove_ptype = encodeURIComponent($(this).attr("id")); 

    $.ajax({ 
     type: "POST", 
     dataType : "html", 
     url: "script.php", 
     data: "id of remove button goes here", 
     success: function(msg){ 
     //Do nothing 
     } 
     }); 
    $(this).parent().parent().fadeOut(500); 
    }); 

OK, étape suivante. Ont également un bouton d'ajout, qui ouvre un dialogue, qui traite ensuite un script, renvoie des données et ajoute ajoute une autre ligne pour les données saisies. Ce script renvoie également un identifiant pour le bouton de suppression qui serait alors utilisé par le code ci-dessus. Voici le code en annexe:

$("<tr>" + 
     "<td>" + unescape(name) + "</td>" + 
     "<td width=\"250\">" + "<img src=\"" + siteurl + "/images/x-button.png\" id=\"" + name_id + "\" class=\"remove-button\" width=\"20\">"+ "</td>" + 
     "</tr>").appendTo("#ptypes tbody"); 

Donc, cela fonctionne très bien jusqu'à présent. Maintenant, quand j'essaye de supprimer cette ligne nouvellement ajoutée sans actualiser la page, elle est retirée de l'écran, mais je suis incapable de récupérer l'ID de ce bouton .remove nouvellement ajouté et de le passer à mon script php. Je sais que c'est possible comme je l'ai vu précédemment dans d'autres applications (comme le camp de base). Alors, quelqu'un peut-il me guider sur la façon dont je peux accomplir cela?

Pour votre information, j'utilise JQuerUI pour créer la boîte de dialogue, etc.

Merci beaucoup pour votre aide!

---

SUS MESSAGE ORIGINAL

OK si l'ID était en effet n'apparaît pas. Je l'ai pour montrer et cela fonctionne, mais j'ai toujours un problème. Voici le code pour mon JQuery:

$("#add-type-form").dialog({ 
          autoOpen: false, 
          height: 350, 
          width: 500, 
          modal: true, 
          buttons: { 
           "Add": function() { 
            var type_name = encodeURIComponent($('#type_name').attr('value')); 
            var type_id = ''; 
            if (type_name != "") { 
             //Submit form 
             $.ajax({ 
             type: "POST", 
             dataType : "html", 
             url: "script.php", 
             data: "f=1" + "& ff=2" + "MORE STUFF", 
             success: function(msg){ 
             types_id = msg; 
             } 
             }); 
             type_id = types_id; 
             //Append to display           
             $("<tr>" + 
               "<td>" + unescape(type_name) + "</td>" + 
               "<td width=\"250\">" + "<img src=\"" + siteurl + "/images/x-button.png\" id=\"" + type_id + "\" class=\"remove-type-button\" width=\"20\">"+ "</td>" + 
              "</tr>").appendTo("#ptypes tbody"); 
             $(this).dialog("close"); 
            }}, 
           Cancel: function() { 
            $(this).dialog("close"); 
           } 
          }, 
          close: function() { 
           allFields.val("").removeClass("ui-state-error"); 
          } 
         }); 

C'est donc une diagloue de jQueryUI, qui traite essentiellement le script, retourne l'id que je veux attribuer à mon tag img. Le problème est que le bouton d'ajout doit être appuyé deux fois pour une raison quelconque. Si je supprime la ligne où j'attribue une valeur à mon type_id varaible après la fonction ajax, i.e. .:

type_id = types_id; 

Je ne peux pas obtenir le type id. Si la ligne reste à l'intérieur, le bouton d'ajout doit être cliqué deux fois. Je ne suis pas sûr de ce qui se passe. Je suis sûr que c'est mon manque de connaissances JS, donc je cherche de l'aide parce que je ne vois rien de mal avec la déclaration de variable en soi.

Merci encore!

Answer 1

Cette question semble assez lié à ce que vous faites: jquery Find ID of dynamically generated tr tag

Le code mentionné ressemble, mais je pense que vous pouvez réécrire à vos besoins:

$("a[href='delete.php']").click(function(e){ 
    var tr = $(this).closest('tr'), 
     id = tr[0].id; 

    // Put your AJAX call here 
    $.post('/delete/' + id, function(){ 
     // Animate up, then remove 
     tr.slideUp(500, function(){ 
      tr.remove(); 
     }); 
    }); 

}); 

Si vous êtes en cours d'exécution Chrome ou Firefox, êtes-vous même en mesure de voir le id du bouton en premier lieu? Il se pourrait que ce ne soit pas encore être ajouté ...

Bonne chance! Il semble que vous n'attendiez pas de réponse à votre requête, ce qui est probablement la raison pour laquelle vous devez cliquer deux fois sur le bouton.J'ai piraté ensemble une version de votre script (travail espère) qui attend la requête pour terminer avant de fermer la boîte de dialogue et de faire tout cet autre mouvement d'horlogerie:

$("#add-type-form").dialog({ 
    autoOpen: false, 
    height: 350, 
    width: 500, 
    modal: true, 
    buttons: { 
     "Add": function() { 
      var type_name = encodeURIComponent($('#type_name').attr('value')); 
      var type_id = ''; 
      var this_old = $(this); // Because $(this) won't really work inside of a anonymous function, you have to back up the original $(this) to another variable. 

      if (type_name != "") { 
       //Submit form 
       $.ajax({ 
        type: "POST", 
        dataType: "html", 
        url: "script.php", 
        data: "f=1" + "& ff=2" + "MORE STUFF", 
        success: function(msg) { 
         types_id = msg; // I'm not exactly sure if you need these two lines, but I'll keep them here anyways. 
         type_id = types_id; 

         //Append to display           
         $("<tr>" + "<td>" + unescape(type_name) + "</td>" + "<td width=\"250\">" + "<img src=\"" + siteurl + "/images/x-button.png\" id=\"" + type_id + "\" class=\"remove-type-button\" width=\"20\">" + "</td>" + "</tr>").appendTo("#ptypes tbody"); 
         this_old.dialog("close"); 
        } 
       }); 
      } 
     }, 
     Cancel: function() { 
      $(this).dialog("close"); 
     } 
    }, 
    close: function() { 
     allFields.val("").removeClass("ui-state-error"); 
    } 
}); 

Peut-être que cela fonctionnerait?