Discussion :

[manu_71]

Bonjour et merci de me lire,

Toujours dans mon apprentissage jQuery, je me retrouve confronté à un petit soucis :

L'objectif est de cliquer sur une icône afin de faire une requête MySQL grâce à un PHP. Cette requête change un champ "statut" dans ma base. La première fois il le passe à 0 et j'aimerais que si on clique une seconde fois, il repasse à 1, etc... (l'opération pouvant être réalisée de manière illimitée).

Pas de soucis pour la partie PHP MySQL qui se trouve dans un fichier à part.
Pas de soucis non plus pour la partie JQuery pour la première fois... En revanche ça se complique pour le second clic sur l'icône.

Voici comment j'ai procédé :
Pour la partie JQuery :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
    $(document).ready(function(){
      $( ".publication" ).click(function() {
        var idContenu = $(this).attr("href");
        $.post("modif-statut.php", { typeModif:"pub", idContenu:idContenu });
        $(this).replaceWith("<a href=\"" + idContenu + "\" title=\"Ce contenu est publié. Cliquez ici pour l'archiver.\" class=\"archivage\"><img src=\"publie.png\" alt=\"Contenu publié\" /></a>");
        return false;
      });
      $( ".archivage" ).click(function() {
        var idContenu = $(this).attr("href");
        $.post("modif-statut.php", { typeModif:"arc", idContenu:idContenu });
        $(this).replaceWith("<a href=\"" + idContenu + "\" title=\"Ce contenu est archivé. Cliquez ici pour le publier.\" class=\"publication\"><img src=\"archive.png\" alt=\"Contenu archivé\" /></a>");
        return false;
      });
    });

Pour la partie HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a href="146" title="Ce contenu est archivé. Cliquez ici pour le publier." class="publication"><img src="archive.png" alt="Contenu archivé" /></a>

La première fois donc, ça fonctionne bien. Mon champ est bien mis à jour grâce à mon fichier PHP et l'icône se remplace par l'icone publie.png. Le code HTML qui remplace l'ancien semble sans erreur. Mais j'ai compris que apparemment ça ne marchait pas comme ça... Mon code qui remplaçait l'ancien ne semble plus affecté par la fonction JQuery... Si je re-clic dessus, le $( ".publication" ).click(function()... n'est pas détecté et mon navigateur me redirige sur www/monrul.com/146

[eckerdecker]

Bonjour,

Au moment où tu bind ton évènement click sur les liens de class archivage (au DOM ready), il n'existe pas encore dans la mesure où ce ne sera un lien de class archivage qu'une fois le lien de class publication cliqué.

Tu dois utiliser la délégation d'évènement. Tu peux faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$(document).ready(function(){
      $( ".publication" ).live('click',function() {
        ...
      });
      $( ".archivage" ).live('click',function() {
        ...
      });
    });

Mais je te recommande plutôt de cibler l'élément parent de tes liens et de faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
$(document).ready(function(){
      $('.conteneur-de-lien-ajax').delegate(".publication",'click',function() {
        ...
      }).delegate(".archivage",'click',function() {
        ...
      });
    });

Si tu utilises la v1.7 ou supérieure je te recommande :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
$(document).ready(function(){
      $('.conteneur-de-lien-ajax').on('click',".publication",function() {
        ...
      }).on('click',".archivage",function() {
        ...
      });
    });

Je te recommande de te pencher sur ces différentes méthodes dans l'API jQuery, la délégation d'évènement permet énormément de choses dans ce genre de situation.

[manu_71]

Au moment où tu bind ton évènement click sur les liens de class archivage (au DOM ready), il n'existe pas encore dans la mesure où ce ne sera un lien de class archivage qu'une fois le lien de class publication cliqué.

Je me suis bien douté d'un truc dans ce genre là.
Je ne m'étais en effet pas encore penché sur la délégation d'évènement, d'où mon ignorance... Je suis en version 1.7.1 de JQuery. J'ai bien compris ton exemple que j'ai mis en parrallèle avec la doc. Je vais essayer ça tout de suite.
Merci beaucoup !


EDIT : Terrible cette histoire de délégation d'évènement ! Ca marche nickel ! Encore merci !