Discussion :

[Aure7780]

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 html :

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

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 javascript :

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

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.

[Mahefasoa]

Bonjour,

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

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
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,

[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..

[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..

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

Bien cordialement,

[Aure7780]

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 js :

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

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 js :

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

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 js :

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

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);
});

[Mahefasoa]

Re,

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

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

Code :

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

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

Bien cordialement,