Accès aux éléments du DOM chargés dynamiquement
BONJOUR Madame/Monsieur;
J ai charger un nouveau contenu dans mon DOM avec
Code:
$("#zone_affichage1").load("amis.php");
mais j arrive pas du tout à acceder aux ID de mes boutons qui sont rajoutés afin de les associer à un evenement.
VOIR CODE COMPLET:
fichier p.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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
<!DOCTYPE html>
<html>
<head>
<title>utilisateur</title>
<link rel="stylesheet" href="style.css"/>
<script src="jquery-2.1.1.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script>
$(function(){
//gestion de la liste deroulante
//partie à garder pour le moment
/*$('#selection').click(function(){
if($(selection).val() == "profils"){
//$('#zone_affichage').load("profils.php");
//recuperer l' id du div où doit etre ajouté le contenu
var doc = document.getElementById("zone_affichage");
//vider d' abord le div avant de rajouter les elements
doc.innerHTML = "";
//doc.open();
//creation du document
//var bt1 = new Array();
bt1 = document.createElement("button");
bt1.setAttribute("id", "info");
bt1.setAttribute("onclick", "alert('toto')");
var texte1 = document.createTextNode("Information");
bt1.appendChild(texte1);
//var bt2 = new Array();
bt2 = document.createElement("button");
bt2.id= "tofs";
var texte2 = document.createTextNode("Photos");
bt2.appendChild(texte2);
//var bt3 = new Array();
bt3 = document.createElement("button");
bt3.id= "amis";
var texte3 = document.createTextNode("Amis");
bt3.appendChild(texte3);
//ajouter les elements dans l' arborescence
doc.appendChild(bt1);
doc.appendChild(bt2);
doc.appendChild(bt3);
}
else if($(selection).val() == "supprimer"){
//rediriger l' utilisateur sur la page supprimer
document.location.href="supprimer.php";
}
});
*/
//code à explorer plus tard
$('#selection').click(function(){
//si on clique sur profils alors on associe
//à la div 'zone_affichage' des elements
if($(this).val() == "profils"){
//recuperer l' id de la div 'zone_affichage'
var doc = document.getElementById("zone_affichage");
var doc1 = document.getElementById("zone_affichage1");
//vider d' abord les divs avant de rajouter les elements
doc.innerHTML = "";
$("#zone_affichage").append( [
$('<button></button>',{
'id': 'info',
'text': 'Information',
'on': {
'click': function( event ){
doc1.innerHTML = "";
$("#zone_affichage1").load("donnes_perso.php");
}
}
}),
$('<button></button>',{
'id': 'photo',
'text': 'Photos',
'on': {
'click': function( event ){
alert('Photos Button cliqued!');
}
}
}),
$('<button></button>',{
'id': 'amis',
'text':'Amis',
'on':{
'click' : function(event){
doc1.innerHTML = "";
$("#zone_affichage1").load("amis.php");
}
}
}
),
]);
//zone affichage1
}
//supprimer
else if($(this).val() == "supprimer"){
//rediriger l' utilisateur sur la page supprimer
document.location.href="supprimer.php";
}
});
});
</script>
</head>
<body>
<header>
<div id="parame">
<input type="search"/>
<select id="selection">
<optgroup label="Selectionner une option">
<option value="profils">Profils</option>
<option value="supprimer">Supprimer</option>
</optgroup>
</select>
</div>
</header>
<nav
<!-- elements de navigations -->
<!-- affiche la liste des amis -->
<div id="amis">
<button class="link">Liste amis</button><br/>
</div>
<!-- affiche les commentaires -->
<div class="commentaire">
<button class="link">Commentaires</button>
</div>
<!-- affiche les messages -->
<div id="message">
<button class="link">Messages</button><br/>
</div>
</nav>
<section>
<div id="zone_affichage"></div>
<div id="zone_affichage1"></div>
</section>
</body>
</html> |
fichier amis.php
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<?php
session_start();
//inclure le fichier "users.php"
require_once 'users.php';
$i = 1;
//on recupere la liste des amis et on construit notre petit formulaire
$utilisateur = new utilisateurs();
//Recuperer la liste des amis
$bdd = $utilisateur->search_friends($_SESSION['email']);
//on parcour la liste d' amis tout en construisant le petit formulaire
while($lignes = $bdd->fetch(PDO::FETCH_OBJ)){
//formulaire
echo '
<div id= "amis'.$i.'">
<label>'.$lignes->nom.'</label>
<button id= "bouton'.$i++.'">Supprimer</button>
</div>
';
}
?> |
