11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Tag parent du <button> qu'on a cliqué dessus

Salut je suis un gros blaireau de jquery.

J'aimerai accéder à un tag <detail>, parent d'un <button type=submit> sur lequel l'utilisateur vient de cliquer

Avec jquery j'aimerai masquer entièrement le contenu de la balise <detail> englobant le bouton submit. Mais attention il y a plusieurs balises <detail>et <button> par page car on affiche une liste d'items. Actuellement je suis tellement nul que j'arrive uniquement à masquer TOUTES les balises <detail> de la page !!! alors que je veux en masquer UNE SEULE, celle qui contient le <button> qui a été submité.


  $(document).ready( function () {

    $("button").click(function() {

      $.ajax({

        type: "POST",
        url: "[[~[[++page_ajax]]]]",
        data: "id="+$(this).attr("id")+"&ac=delMsg",
        success : OnSuccess

      });

      return false;

    });

  });

  function OnSuccess(result){

    $("output").html(result+'<br />'); // <- cette ligne fonctionne

    $("details").html(result); // <- cette ligne NE FONCTIONNE PAS comme elle devrait (tous les tags <detail> de ma page sont affectés et non seulement le parent du <button> qu'on a submit ) !
    
  }


Voilà le template html :

<details id="details[[+mail.id]]"> // <- le contenu entier de cette balise <detail> (et uniquement celle-ci) devrait jarter
  
  <summary>[[+mail.date_sent]] - [[+mail.subject]]</summary>
 
  <p>[[+mail.message]]

      <form id="form[[+mail.id]]" action="#">
 
          <button type="submit" id="[[+mail.id]]">supprimer message</button> // <- l'utilisateur clique ici

      </form>

  </p>

</details>


Un méga-merci à tous
Modifié par raf59 (13 Feb 2012 - 13:26)
$('details') traite forcement tous les details et non précisemment celui que tu cherches.

Si tu veux le parent, il faut faire reference à l'élément enfant (button) et chercher le parent.

Donc déjà, il faut définir ton objet avant $.ajax (var obj = $(this);)
Puis utiliser .parent() (ou .parents() selon les cas) (var parentDetail = obj.parents('detail');)
Coucou,

Tu peux pointer sur le bouton sur lequel tu as cliqué en indiquant dans l'objet de ton évènement l'id tu bouton, ici :

<button type="submit" id="[[+mail.id]]">supprimer message</button>


donne

$("button").click(function() {
  var button_clicked = $(this).attr('id');
});


Comme ça tu sais déjà sur quel bouton tu as cliqué (plus facile pour en récupérer le parent).

Ensuite, pour le parent, tu fais 


$("button").click(function() {
       
       var button_clicked = $(this).attr('id');  // On récupère l'id du bouton cliqué
    
       $("button").each(function()  // On teste pour tous les boutons 
       {
           if ( $(this).attr('id') == button_clicked )  // Si leur id est celui du bouton cliqué
           {
                 $(this).parents('details').css('display', 'none') //Pour le masquer comme t'as demandé, après t'y fais ce que tu veux dessus
            }
         });

});

Modifié par Seyu (06 Feb 2012 - 17:15)
finalement j'ai trouvé encore c'était tout simple : il fallait utiliser "context : this" dans l'appel ajax, après quoi $(this) devient accessible à la fonction onSuccess.

Et pour accéder au parent depuis la fonction :

$(this).parents('details').removeClass('status4');
Sujet clos
Aller à