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

beegees · 21/05/2011, 18h08

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 :

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

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

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 :

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

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

danielhagnoul · 21/05/2011, 20h01

Bonsoir

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

beegees · 22/05/2011, 10h06

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

danielhagnoul · 22/05/2011, 10h15

Bonjour

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

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

beegees · 22/05/2011, 10h22

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 !

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 :

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

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

danielhagnoul · 22/05/2011, 23h47

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.

Bovino · 23/05/2011, 08h41

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

beegees · 23/05/2011, 09h35

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 :

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

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

beegees · 23/05/2011, 09h35

Citation:

Envoyé par Bovino

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

+1

je mets ton point

beegees

danielhagnoul · 23/05/2011, 10h45

Bonjour

Normalement :

Code :

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

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 :

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

beegees · 23/05/2011, 21h25

Citation:

Envoyé par danielhagnoul

Bonjour

Normalement :

Code :

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

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 :

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

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 :

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

accordion(obj.data("accordionSettings")

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

Bonne soirée

beegees

danielhagnoul · 26/05/2011, 10h22

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.

beegees · 26/05/2011, 10h26

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

danielhagnoul · 27/05/2011, 00h27

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 :

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

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

21/05/2011, 20h01	#2
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	Bonsoir L'homme qui a vu les extra-terrestres a oublié l'existence de live ou mieux de delegate. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

22/05/2011, 10h15	#4
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	Bonjour Nous en sommes à jQuery 1.6.1 et le problème pour live() n'existe plus depuis la version 1.4 ! Voir : http://api.jquery.com/live/ __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

22/05/2011, 23h47	#6
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	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. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

26/05/2011, 10h22	#12
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	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. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email