Ajax request javascript inactif quand dom rafraîchi

**psgman113** · 24/08/2009, 16h38

J'ai repris l'exemple de ce tutorial et je voudrais l'appliquer à une page contenant des onglets gérés en Ajax. Le tuto consiste à afficher un texte par défaut dans une zone texte et quand on clique dans la zone, le texte disparait, et quand on quitte la zone le texte par défaut réapparait si on a pas saisi de caractères.

http://jcrozier.developpez.com/tutor...ps-formulaire/

Le code javascript qui permet de mettre les effets qui permettent d'afficher un texte par défaut est inclus dans la page html de base.

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
 
 
	<script type="text/javascript">
		$(document).ready(function() {
			$("input, textarea").addClass("idleField");
       		$("input, textarea").focus(function() {
       			$(this).removeClass("idleField").addClass("focusField");
    		    if (this.value == this.defaultValue){ 
    		    	this.value = '';
				}
				if(this.value != this.defaultValue){
	    			this.select();
	    		}
    		});
    		$("input, textarea").blur(function() {
    			$(this).removeClass("focusField").addClass("idleField");
    		    if ($.trim(this.value) == ''){
			    	this.value = (this.defaultValue ? this.defaultValue : '');
				}
    		});
		});			
	</script>

Les effets marchent bien sur mon premier onglet activé par défaut .
Voici ma partie du DOM qui contient un textarea:

Code :

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

1
2
3
4
5
6
7
 
 <div id="content_form">
 
		<TEXTAREA NAME="comment" COLS=70 ROWS=3>Texte par défaut</TEXTAREA>
 
 
  </div>

La navigation sur les autres onglets marchent correctement .

Mais quand je clique sur un autre onglet qui, à l'aide d'un ajax.request me met à jour une partie de mon dom contenant un textarea, les effets de textes par défaut ne marchent plus pour mon textarea.

mon fichier php renvoit à la fonction js gérant l'ajax une chaine contenant un textarea basique.

Code :

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

1
2
3
4
echo '
 
		<TEXTAREA NAME="comment" COLS=70 ROWS=3>text par défaut</TEXTAREA>';
    break;

J'ai ajouté des alert dans le script js que j'ai copié au début, et ils s'affichent bien que sur le premier onglet par défaut( quand le dom n'a pas été mis à jour) mais ile ne s'affichent plus une fois le dom mis à jour.

Quelqu'un a t'il une idée du pourquoi le script js que j'ai copié au début du doc n'est plus pris en compte une fois le dom mis à jour.
Comment y remédier?

La page que je suis en train de modifier en ce moment est ici:
http://kenzo.sitefr.info/lecture/fee...opics/new.html

Merci beaucoup

**Bovino** · 24/08/2009, 17h28

Salut,

Deux choses.
Pourquoi utiliser un Ajax.request (Prototype) et ne pas faire l'ajout avec jQuery (qui te permettrais d'utiliser la fonction live...) ?
Pour les explications concernant ta question, voir la FAQ.

**psgman113** · 27/08/2009, 20h32

J'ai changé mon code pour y mettre du jquery à la place du prototype:

Ma fonction js qui met à jour le DOM quand on clique sur un onglet ( je n'ai pas copié le code volontairement mais il y a des onglets avec l'attribut onclick=changeclass('nom');.

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
 
 
function changeclass(id) {
 
 $("p").empty();
 
switch (id) {
	case 'question':
 $("p").append('<input id="titlefield" style="width:285px;" name="ebook" type="text"><br><br><TEXTAREA NAME="comment" COLS=70 ROWS=3>Décris ta question</TEXTAREA>');
	break;
	case 'idea':
	$("p").append('<input name="titletxt" id="title" value="Indique un titre" style="width:465px;" type="text"/><br><br><TEXTAREA NAME="comment" COLS=70 ROWS=3>Décris ta suggestion</TEXTAREA>');
	break;
	case 'signalement':
 $("p").append('<SELECT name="category" onchange="testchange()";><OPTION VALUE="selectionnez">Sélectionnez une catégorie</OPTION><OPTION VALUE="pornographie">Pornographie</OPTION><OPTION VALUE="racisme">Racisme</OPTION><OPTION VALUE="plagiat">Plagiat</OPTION></SELECT><br><br></br><TEXTAREA NAME="comment" COLS=70 ROWS=3>Décris le signalement</TEXTAREA>');
	break;
	case 'copyright':
 $("p").append('<input id="titlefield" style="width:285px;" name="ebook" type="text"><br><br><TEXTAREA NAME="comment" COLS=70 ROWS=3>Décris le problème de copyright</TEXTAREA><br>');
	break;
	default: 
	 $("p").append('<input id="titlefield" style="width:285px;" name="ebook" type="text"><br><br><TEXTAREA NAME="comment" COLS=70 ROWS=3>Décris ta question</TEXTAREA>');
	break;
 
}

Dans mon code html, j'ai ms balises <p></p> rempli par défaut:

Code :

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

1
2
3
4
5
6
7
8
 
<p>
		<input name="titletxt" id="title" value="Indique un titre" style="width:465px;" type="text"/>
		<br><br>
 
		<TEXTAREA NAME="comment" COLS=70 ROWS=3>Décris ta question</TEXTAREA>
 
</p>

L'effet jquery de texte par défaut marche bien comme sur le tutorial developpez.com mentionné dans le post initial.
Par contre, quand je met à jour le DOM entre les balises p en y mettant un textarea, l'effet ne marche plus.

J'ai remarqué que le code responsable de l'effet était dans la fonction ready de jquery et donc exécuté au chargement de la page. J'ai donc essayé de copier les 2 fonctions dans ma fonction changeclass mais l'effet ne marche toujours 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
 
function changeclass(id) {
$("input, textarea").addClass("idleField");
 
       		$("input, textarea").focus(function() {
       			$(this).removeClass("idleField").addClass("focusField");
    		    if (this.value == this.defaultValue){ 
    		    	this.value = '';
				}
				if(this.value != this.defaultValue){
	    			this.select();
	    		}
    		});
 
 
    		$("input, textarea").blur(function() {
 
    			$(this).removeClass("focusField").addClass("idleField");
    		    if ($.trim(this.value) == ''){
			    	this.value = (this.defaultValue ? this.defaultValue : '');
				}
    		});
 
..... switch....
 
}

Quelqu'un peut il m'aider? Merci