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,