Est-il possible d'utiliser jquery sur une page déjà chargée ?

Version imprimable

Bonjour à tous,

Je viens de découvrir que du code jquery ne fonctionnait que si la page était chargée.

Une fois chargée, si on alimente une div avec du code js (innerHTML), le jquery ne fonctionne plus.

Exemple :

Je fais une requête PHP, le résultat ne retourne aucun enregistrement, je veux alors remplir une div avec ce code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <ol> <li id="titre"> Demographical data <ul id="sous-titre"> <li>Principes et définitions de base</li> <li>Etude d'un guichet automatique de banque</li> </ul> </li> <li id="titre"> Modélisation fonctionnelle : exercices corrigés <ul id="sous-titre"> <li>Etude d'un terminal point de vente (TPV)</li> </ul> </li> <li id="titre"> Modélisation statique : étude de cas <ul id="sous-titre"> <li>Principes et définitions de base</li> <li>Etude d'un système de réservation de vol</li> </ul> </li> </ol>
Quand la page est chargée, le fait d'appuyer sur les titres (et sous-titres) développe les sous-titres ou les cachent.

Donc je charge une page de ce genre :
Code:

1 2 3 4 5 6 7 8 9 10 <html> <head> ... </head> <body> <div>le code jquery</div> </body> </html>
La page fonctionne
Code:

1 2 3 4 5 6 7 8 9 10 <html> <head> ... </head> <body> <div>rien</div> </body> </html>
Ajax remplit cette div sans recharger la page (innerHTML) :

<div>code jquery</div>

Le jquery ne fonctionne pas

Mais quand la page n'est pas chargée, le code n'est pas fonctionnel.

Est-il possible de faire fonctionner du code jquery avec une page déjà chargée et du code qui s'ajoute dans la div (innerHTML) bien après le chargement de la page ?

J'espère avoir été claire.

Merci d'avance pour l'aide.

beegees

21/05/2011, 20h01
danielhagnoul

Bonsoir

L'homme qui a vu les extra-terrestres a oublié l'existence de live ou mieux de delegate. ;)
22/05/2011, 10h06
beegees

Citation:

Envoyé par danielhagnoul

Bonsoir

L'homme qui a vu les extra-terrestres a oublié l'existence de live ou mieux de delegate. ;)

Bonjour,

Merci pour ta réponse.

Par rapport à live :

Citation:

Les parametres acceptés pour 'type 'sont : click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup.

Citation:

Les parametres refusés sont :
blur, focus, mouseenter, mouseleave, change, submit

Je pense que je dois intercepter l'évènement onchange (la div change à un certain moment), live ne peut donc pas résoudre ce problème.

Qu'en penses-tu ?

Pour ce qui est de delegate, je vais me renseigner.

Merci encore pour ton aide.

beegees
22/05/2011, 10h15
danielhagnoul

Bonjour

Nous en sommes à jQuery 1.6.1 et le problème pour live() n'existe plus depuis la version 1.4 ! 8O

Voir : http://api.jquery.com/live/

Citation:

Envoyé par danielhagnoul

Bonjour

Nous en sommes à jQuery 1.6.1 et le problème pour live() n'existe plus depuis la version 1.4 ! 8O

Voir : http://api.jquery.com/live/

Bonjour,

Mille fois merci pour tes réponses.

Je m'étais basé sur ce site :

http://jquery.jarodxxx.com/manuel/Les-evenements/live/

penses-tu que live pourrait résoudre ce problème ?

Je veux utiliser accordion de jquery UI. Si je mets le code de l'accordéon quand la page charge, l'accordéon s'affiche. Par contre, si je remplis la div avec innerHTML, l'accordéon n'apparaît pas, le css non plus (juste le texte) :

Sur un évènement j'appelle une page js qui passe des informations à PHP.

Une requête PHP est alors utilisée, si aucun enregistrement n'est retourné, j'utilise l'include qui renvoi à javascript (le code ajax que je te montre) afin d'alimenter la div "accordion".

Voici le code js :

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
34
35
36
37
38
39
40
41
42
43
44
45
function filtre()
{
    var genre = document.getElementById('genre').value;
	//je selectionne le table dont l'id est table_de_selection
    var tableau = document.getElementById('table_de_selection');
    //je selectionne les inputs de ce table
    var zonedetexte = tableau.getElementsByTagName('input');
    var valeurs_inputs = '';
    var id_inputs = '';
    var tableau_data={};
 
    //je cree mon tableau associatif en javascript
    // tableau_data[zonedetexte[z].id] ==> la cle
    // zonedetexte[z].value ==> la valeur
    for(z=0;z<5;z++)
    {
        tableau_data[zonedetexte[z].id] = trim(zonedetexte[z].value);
 
    }
    //transforme un tableau js en une string json
    var to_send = JSON.stringify(tableau_data);
    //alert(to_send);
 
    var xhr = getXhr();
    xhr.onreadystatechange = function(){
    //alert(xhr.readystade);
    //alert(xhr.status);
    if(xhr.readyState == 4 && xhr.status == 200)
    {
        resultat = xhr.responseText;
		alert(resultat);
		document.getElementById('accordion').innerHTML = resultat;
		$(function() {
		$( "#accordion" ).accordion();
	});
 
    }
}
 
    //document.getElementById('ajax_loader').style.display = 'block';
 
    xhr.open("POST","AJAX/filtre.php",true);
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	xhr.send("to_send="+to_send+"&genre="+genre);
}

et voici le code PHP :

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<?php
include('../includes/connexion.php');
//session_start();
//var_dump($_POST);
 
//transforme le json en tableau associatif (true indique que l'on veut un tableau associatif)
$ligne = json_decode($_POST['to_send'],true);
 
//j'ajoute le secteur dans le tableau $ligne si un secteur a été choisi dans le filtre
if(($_POST['genre'] != "undefined")&&($_POST['genre'] != '')) $ligne['ID_secteur'] = $_POST['genre'];
//var_dump($ligne);
 
//$sql = "SELECT * FROM ".$_POST['table']." WHERE ".$_POST['champ']." LIKE '".$_POST['valeur']."%'";
 
//je cree un tableau nomme array
$where = array();
//parcours de mon tableau associatif nomme $ligne
//je teste si le champ ID_secteur contient autre chose que -1 (-1 correspond à rien, à la valeur par défaut du select)
foreach($ligne as $field => $value) {
	if($field == "gender")
	{
		if($value != -1)
		{
			//comme c'est un entier, pas besoin de like
			$where[] = "$field = '$value'";	
		}
	}		
	elseif(trim($value) != '') 
		$where[] = "$field LIKE '$value%'";
}
 
if (empty($where)) die("ligne vide");
//quand le tableau est cree, je l'implose, je le transforme en chaine de caracteres
$where = implode (' AND ', $where);
//echo $where . "test";
//echo $where;  Nom LIKE 'd%' AND CP LIKE '7%'
//je peux ensuite utiliser le resultat pour ma chaine sql finale
//cette requête permet de sélectionner les sociétés et les secteurs par rapport au filtre
$sql = "SELECT neuro_patient.* WHERE $where";
//echo $sql; 
 
//SELECT * FROM societes INNER JOIN societes_secteurs ON societes.ID = societes_secteurs.ID_societe INNER JOIN secteurs ON secteurs.id = societes_secteurs.id_secteur ";
//echo $sql; 
$query_filtre = mysql_query($sql);
 
//si il n'y a pas de résultat avec la requete, j'inclus le formulaire vierge.
$nbre_resultats = mysql_num_rows($query_filtre);
if( $nbre_resultats < 1)
{
	include('../includes/ajout_patient.php');
	return;
}
 
$Tableau_Noms_Des_Champs = array();
//$nombre = mysql_num_rows($query_filtre);
//si je ne  mets pas ce if, j'ai un warning
if(!empty($where))
{
	for($j=0;$j<mysql_num_fields($query_filtre);$j++) 
	{ 
	   $Tableau_Noms_Des_Champs[] = mysql_field_name($query_filtre, $j); 
	}
}
 
$i = 0;
$n = 0;
$valeur_originale ="";
$retour = '<table border="2" style="border-color:#339900;border-style:solid;">'; 
 
if(!empty($where))
{
	while($row = mysql_fetch_array($query_filtre,MYSQL_ASSOC)) 
		{
			$j=1;
			$i++;
			$cible = $row[$Tableau_Noms_Des_Champs[0]];
			$nom_cible = $Tableau_Noms_Des_Champs[0];
			//echo 'la cible vaut ' . $cible;
			$retour.= '<tr><td align="center"><input type="button" value="'.$cible.'" onclick="afficher_remarques(this.value);"/> </td>';
			foreach($row as $NomCol => $Valeur)
			{	//je n'affiche que les colonnes nécessaires
				if(($NomCol != 'ID')&&($NomCol != 'Tss_id')&&($NomCol != 'ID_societe')&&($NomCol != 'ID_secteur')&&($NomCol != 'Ts_id'))
				{
					//1 je parts d'ici, je vais dans la fonction update_enregistrement
					$retour.= '<td><input type="text" name="new[' . $row['ID'] . '][' . $NomCol . ']" id="new[' . $row['ID'] . '][' . $NomCol . ']" value="'.$Valeur.'" onchange="this.style.backgroundColor = \'yellow\'"';
					/*$retour.= '<td><input type="button" name="MAJ" value="MAJ" onclick="document.getElementById(\'new[' . $row['ID'] . '][' . $NomCol . ']\').style.backgroundColor = \'white\', update_enregistrement(document.getElementById(\'new[' . $row['ID'] . '][' . $NomCol . ']\').value,\''.$_POST['table'].'\',\''.$NomCol.'\',\''.$cible.'\',\''.$nom_cible.'\')" /></td>';*/		
						//$retour.= 'onfocus="'.$valeur_originale.'=this.value";alert(\''.$valeur_originale.'\')';
					$retour.= '</td>';
					$j++;
				}	
			}
			$retour.= '</tr>';
		}
}
 
 
$retour.='</table>';
echo $retour;
 
?>

Si la div est remplie par le retour de PHP par le code JS, le widget jquery IU ne fonctionne pas.

J'espère avoir été plus clair.

Merci sincèrement pour ton aide.

beegees

22/05/2011, 23h47
danielhagnoul

Bonsoir

Dans cette discussion on est arrivé à la conclusion que lorsque l'on modifie le contenu d'un UI Accordion il faut le détruire et le reconstruire.

Voir les messages numérotés 4 et 5.
23/05/2011, 08h41
Bovino

Citation:

Envoyé par beegees

Je pense que je dois intercepter l'évènement onchange (la div change à un certain moment), live ne peut donc pas résoudre ce problème.

Il n'y a pas d'événement change sur une div :roll:

Citation:

Envoyé par danielhagnoul

Bonsoir

Dans cette discussion on est arrivé à la conclusion que lorsque l'on modifie le contenu d'un UI Accordion il faut le détruire et le reconstruire.

Voir les messages numérotés 4 et 5.

Bonjour,

Merci pour ta réponse.

Je dois donc utiliser destroy pour détruire mon accordion afin de pouvoir ensuite le reconstruire.

edit

J'ai donc modifié mon code comme ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 if(xhr.readyState == 4 && xhr.status == 200) { resultat = xhr.responseText; //alert(resultat); //if(resultat == 0) document.getElementById('accordion').style.display = "block"; $("#accordion").accordion("destroy"); $(function() { $( "#accordion" ).accordion(); }); document.getElementById('accordion').innerHTML = resultat; }
Sans succès.

Merci pour ta patience et ton aide.

beegees

23/05/2011, 09h35
beegees

Citation:

Envoyé par Bovino

Il n'y a pas d'événement change sur une div :roll:

+1 :aie:

je mets ton point :zoubi:

beegees

Bonjour

Normalement :

Code:

1
2
3
4
5
6
7
8
9
if(xhr.readyState == 4 && xhr.status == 200)
{
	resultat = xhr.responseText;
	alert(resultat);
 
	var obj = $("#accordion");
	obj.html(resultat);
        obj.accordion("destroy").accordion(obj.data("accordionSettings"));
}

Mais dans votre code, la variable "resultat" contient-elle un HTML conforme à la structure standard d'un UI Accordion, exemple :

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
34
<div id="accordion">
	<h3><a href="#">Section 1</a></h3>
	<div>
		<p>
		Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.
		</p>
	</div>
	<h3><a href="#">Section 2</a></h3>
	<div>
		<p>
		Sed non urna.
		</p>
	</div>
	<h3><a href="#">Section 3</a></h3>
	<div>
		<p>
		Nam enim risus, molestie et, porta ac, aliquam ac, risus.
		</p>
		<ul>
			<li>List item one</li>
			<li>List item two</li>
			<li>List item three</li>
		</ul>
	</div>
	<h3><a href="#">Section 4</a></h3>
	<div>
		<p>
		Cras dictum.
		</p>
		<p>
		Suspendisse eu nisl
		</p>
	</div>
</div>

Citation:
Envoyé par danielhagnoul
Bonjour

Normalement :
Code:

1 2 3 4 5 6 7 8 9 if(xhr.readyState == 4 && xhr.status == 200) { resultat = xhr.responseText; alert(resultat); var obj = $("#accordion"); obj.html(resultat); obj.accordion("destroy").accordion(obj.data("accordionSettings")); }
Mais dans votre code, la variable "resultat" contient-elle un HTML conforme à la structure standard d'un UI Accordion, exemple :
Bonsoir,

Mille mercis pour votre réponse.

Cela fonctionne, mais je ne comprends pas bien le code et la façon dont ça fonctionne :

Code:

obj.accordion("destroy").accordion(obj.data("accordionSettings"));

Je présume que ce sont deux instructions différentes séparées par un point ?

Je ne comprends pas du tout cette ligne :

Code:

accordion(obj.data("accordionSettings")

Merci à nouveau car personne n'a pu m'aider à l'exception de vous.

Bonne soirée ;)

beegees

26/05/2011, 10h22
danielhagnoul

Bonjour

Désolé pour le délai, je n'ai pas beaucoup de temps libre et je le consacre à découvrir la documentation, le blog et à tester jQuery UI Mobile car la version beta 1 est attendue pour la semaine prochaine.

Oui, il y a deux instructions chaînées.

obj.accordion("destroy"); : détruit le UI Accordion.

obj.accordion(obj.data("accordionSettings")); reconstruis le UI Accordion avec les options (obj.data("accordionSettings")) que vous avez demandées lors de la création du précédent UI Accordion.
26/05/2011, 10h26
beegees

Citation:

Envoyé par danielhagnoul

Bonjour

Désolé pour le délai, je n'ai pas beaucoup de temps libre et je le consacre à découvrir la documentation, le blog et à tester jQuery UI Mobile car la version beta 1 est attendue pour la semaine prochaine.

Oui, il y a deux instructions chaînées.

obj.accordion("destroy"); : détruit le UI Accordion.

obj.accordion(obj.data("accordionSettings")); reconstruis le UI Accordion avec les options (obj.data("accordionSettings")) que vous avez demandées lors de la création du précédent UI Accordion.

Bonjour,

Mille mercis pour votre réponse claire et précise.

Vous êtes une valeur sûre sur ce forum (au même titre que Bovino)

Bonne journée et encore merci pour votre aide précieuse et appréciée.

beegees
27/05/2011, 00h27
danielhagnoul
Bonsoir

Dernière modification, suite à http://www.developpez.net/forums/d10...e/#post6015516

Il ne faut pas utiliser data("accordionSettings"), ce n'est pas fiable.

Il faut reprendre explicitement les options du premier UI Accordion, par exemple :
Code:

1 2 3 4 5 6 obj.accordion("destroy").accordion({ header: "> h3", collapsible: true, active: false, autoHeight: false });