etapes de toggle sur un bouton

Version imprimable

Bonjour,

J'ai un petit soucis avec la fonction toggle de JQuery.
Je viens de comprendre que toggle se fait en 2 étapes, si elle n'existe pas, la première fois il enregistre toutes les fonctions sans en exécuter une seule.
Au deuxième passage, à chaque clique, il exécute une fonction de toggle et passe à la suivante pour le prochaine fois.

Mon problème c'est qu'au premier passage, j'ai besoin que la première fonction soit appelé !

J'ai mis la fonction toggle sur un button, si on clique dessus (la première fois), il doit remplacer un span par une textarea.
Si on re-clique une 2nd fois, il faut l'inverse (textarea->span) + appel fct ajax.

Actuellement je suis obligé de cliquer 2 fois sur mon bouton pour que la première action soit effectuée (span->textarea).

Code d'exemple :
Code:

1 2 3 4 5 6 7 8 9 10 11 <div id="comment1"> Comment : <span>Ceci est un com !</span> <input type="button" onclick="modifyComment('/com?id=23', 1, null)" value="Modify" /> <input type="button" onclick="deleteComment('/com?id=28', 1, null)" value="Delete" /> <div> <div id="comment2"> Comment : <span>Ceci est un autre com 2 !</span> <input type="button" onclick="modifyComment('/com?id=24', 2, null)" value="Modify" /> <input type="button" onclick="deleteComment('/com?id=26', 2, null)" value="Delete" /> <div> ...
et le Jquery :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function modifyComment(url, ind, responseData) { var buttons = $('#comment'+ind+' > input:button'); var span = $('#comment'+ind+' > span'); buttons.eq(0).toggle( function() { var text = (responseData==null)?span.text():responseData.comment; span.replaceWith('<textarea name="comment">' + text + '</textarea>'); buttons.eq(1).hide(); }, function() { var datas = (responseData==null)?new Object():responseData; submitComment(url, ind, datas); -> qui fait un appel ajax puis remplace la textarea par un span. }); }
Comment faire pour que mon toggle soit bien enregistré avant le clique mais que les données à l'intérieur d'une des fonctions soient dynamiques ?

Merci d'avance.

Bonjour,

Comme ceci, cela ferait-il l'affaire ou pas?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div id="comment1">
Comment : <span>Ceci est un com !</span>
<input type="button" id="b_23_null" class="button_edit" value="Modify" />
<input type="button" id="b_28_null" class="button_del" value="Delete" />
<div>
<div id="comment2">
Comment : <span>Ceci est un autre com 2 !</span>
<input type="button" id="b_24_null" class="button_edit" value="Modify" />
<input type="button" id="b_26_null" class="button_del" value="Delete" />
<div>
 
<script>
    $(document).ready(function(){
        $('input.button_edit').click(function(){
            var t_id = $(this).attr('id').split('_');
            var url = '/com?id='+t_id[1];
            var ind = $(this).eq();
            var responseData = t_id[2];
            var span = $('#comment'+ind+' > span');
            $(this).toggle(
                function(){
                    var text = (responseData == null)?span.text():responseData.comment;
                    span.replaceWith('<textarea name="comment">'+text+'</textarea>');
                    $(this).next('button').hide();
                },
                function(){
                    var datas = (responseData == null)?new Object():responseData;
                    submitComment(url, ind, datas); //-> qui fait un appel ajax puis remplace la textarea par un span.
                }
            );
        });
    });
</script>

Bien cordialement,

29/09/2010, 12h56
dutom007

+1 pour Mahefasoa

Je rajouterais dans le html l'attribut disable, et et dans le JS juste avant le toggle la suppression de cet attribut.

Ca évite de cliquer si la page n'est pas charger..
29/09/2010, 13h04
Mahefasoa

Citation:

Envoyé par dutom007

Je rajouterais dans le html l'attribut disable, et et dans le JS juste avant le toggle la suppression de cet attribut.

Ca évite de cliquer si la page n'est pas charger..

D'où l'utilité de $(document).ready(function(){ ...

Bien cordialement,

Bonjour et merci pour ces réponses, ça m'a permis de trouver une solution (mais sans utiliser toggle au final !).

Donc c'est bien le $(document).ready qu'il fallait que j'implémente.
Les soucis que j'ai eut c'est que le code HTML que je vous ai mis est récupéré depuis un appel ajax, les éléments du DOM n'était pas à jour. J'ai donc utilise live() pour remédier au problème. Et la je ne fais que la bascule span/textarea

Puis j'ai gardé ma fonction modifComment, elle ne fait que l'appel ajax si une textarea existe :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 $(document).ready(function(){ $("input:.button_edit").live('click', function(e) { e.preventDefault(); var span = $(this).parent().find("span"); var textarea = $(this).parent().find("textarea"); var buttons = $(this).parent().find("input:button"); if(span.length > 0) { span.replaceWith('<textarea name="description" style="width: 400px; height: 50px; vertical-align:middle;">' + span.text() + '</textarea>'); buttons.eq(2).hide(); } else if(textarea.length > 0 && textarea.val() != "") { textarea.replaceWith('<span>' + textarea.val() + '</span>'); buttons.eq(2).show(); } }); });
if(span.length > 0) == si l'élément existe

Le code onclick :
Code:

1 2 3 4 5 6 7 8 function modifyComment(url, ind, responseData) { var textarea = $('#comment'+ind+' > textarea'); if(textarea.length > 0) { var datas = (responseData==null)?new Object():responseData; submitComment(url, ind, datas); } }
Et je modifie l'url dans submitComment :
Code:

1 2 3 4 5 6 7 // ... ajax success : var url1 = '/com?id='+responseData.id; var buttons = $('#comment'+ind+' > input:button'); buttons.eq(1).removeAttr("onclick"); buttons.eq(1).unbind("click", modifyComment).click(function() { modifyComment(url1, ind, responseData); });

29/09/2010, 14h04
Mahefasoa

Re,

Alors c'est résolu? Dans ce cas, n'oublie pas le tag :resolu:

Autre chose, je te conseille d'appeler die() avant le live()

Code:

$('objet').die().live('click',function(){ ... });

Bien cordialement,