Affichage des infos users

zblteam -  
 zblteam -
Bonjour à tous,
je viens vers vous car bien sur j'ai un petit blocage niveau requête AJAX. je vous explique.
j'ai une page profile.php qui affiche les infos du user connecté (session user) et en bas de cette page j'ai généré des boutons affichant les autres users (7) avec du php pour récupérer facilement leurs avatars et leurs nicknames dans ma base de donnée sql.
J'ai crée une autre page contacts.php qui me sert a afficher les infos via les id des autres users en cliquant sur les boutons respectifs.
Seulement voila et vous voyez ou je veux en venir certainement, quand je clique sur ces boutons les infos users s'affichent bien mais sur une autre page alors que je voudrais les afficher sur le même tableau que les infos du user connecté (les remplacer en gros). Donc j'ai écris dans ma page profile.php une requête AJAX que je n'arrive pas a faire fonctionner. Tout du moins elle fonctionne peut-être mais n'est pas pris en compte.....:/ J'ai de gros doute sur le code a insérer dans la partie echo de mes boutons ainsi que l'id infos
Merci d'avance pour votre aide
Bertrand

Voici le code ajax, le tableau et la partie php de mes boutons :

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>

<script type="text/javascript">
$("#friendslist_button").click(function changeUser(){
$.ajax({
type : "GET",
data : {"id":variableid},
url : "contacts.php",
error: function(msg) {
alert( "Error !: " + msg );
},
success: function(data){
//affiche le contenu du fichier dans le bloc indiqué
$(code_html).appendTo("#infos");
}
});
});
</script>

<!-- Tableau -->
<table id="infos" width="920" bordercolor="FFFFFF"cellspacing="2" cellpadding="15" style="margin-left:15px">
<tr><span width="10" class="bckg-userprofile">User Profile</span>
<tr><td width="10" class="profil-color4">User Profile</td>
<td width="10" class="profil-color4"><?php echo "<img class='bckg_avatar' src='".$row['avatar']."' />"; ?>
<tr><td width="10" class="profil-color1">Nickname :</td>
<td width="10" class="profil-color3"><?php echo $row['nickname']; ?>
<tr><td width="10" class="profil-color1">Name :</td>
<td width="10" class="profil-color2"><?php echo $row['name']; ?>
<tr><td width="10" class="profil-color1">Username :</td>
<td width="10" class="profil-color3"><?php echo $row['username']; ?>
<tr><td width="10" class="profil-color1">E-mail :</td>
<td width="10" class="profil-color2"><?php echo $row['email']; ?>
<tr><td width="10" class="profil-color1">Skype :</td>
<td width="10" class="profil-color3"><?php echo $row['skype']; ?>
<tr><td width="10" class="profil-color1">Website :</td>
<td width="10" class="profil-color2"><?php echo $row['website'];?>
</table>

<!-- Button Friends list -->
<div id="friendslist_title">Friends list :</div>
<ul id="friendslist_button" onchange="changeUser(this.value)" class="clearfix">
<?php
include ('connection_sql.php');
$query = " SELECT * FROM users ";
$result = mysqli_query($link, $query);
while ($row = mysqli_fetch_array($result)) {

echo '<a href="contacts.php? id='.$row['id'].'"><img class="bckg_avatar_buttons" width="22" height="22" src="'.$row['avatar'].'">' .$row['nickname']. '</a>';

}
?>
</ul>


et le code de la page contacts.php

<?php
if ( isset($_GET['id'])) {
$id = $_GET['id'];

include ('connection_sql.php');
//Vérification de la connexion
if (mysqli_connect_errno()) {
$texte = 'An error occurred(connect).';
}
else {
$query = " SELECT * FROM users WHERE id='$id' ";
$result = mysqli_query($link, $query);

while($row = mysqli_fetch_assoc($result)) {

print $row['nickname'] . $row['name'] . $row['username'] . $row['email'] . $row['skype'] . $row['website'] . $row['avatar'];
}
}
}
?>


9 réponses

Utilisateur anonyme
 
Bon déjà si t'as copier ta page tel quel tu as 2 problèmes, le premier c'est que tu charges ton script JS avant de charger ta page, donc quand le script JS veut ajouter la fonction click sur le bouton #friendslist_button, ce dernier n'existe pas encore donc ça ne fait rien. Il est conseiller de mettre tout le JS avant la fermeture de la balise body (</body>)

Ensuite code_html correspond à quoi? Car cette variable n'existe pas, tu ajoutes rien à #infos du coup.

N'hésite pas à utiliser la console du navigateur et les console.log() pour déboguer une erreur
0
zblteam
 
Bonjour ZeNairolf,
donc j'ai mis mon script avant la fin de </body> ça parait effectivement logique quand on le sait :)
Ensuite concernant le $(code_html).appendTo("#infos"); j'ai suivi bêtement le tutorial de http://openclassrooms.com/courses/un-site-web-dynamique-avec-jquery/le-fonctionnement-de-ajax sans qu'il explique pourquoi il met ça.
Du coup je ne me suis pas poser de question. mais je dois mettre quoi ?
0
Utilisateur anonyme
 
Ok car eux leur success se présente comme ça:

success : function(code_html, statut){
$(code_html).appendTo("#commentaires"); // On passe code_html à jQuery() qui va nous créer l'arbre DOM !
}


que toi c'est ça:


success: function(data){
//affiche le contenu du fichier dans le bloc indiqué
$(code_html).appendTo("#infos");
}


En gros eux récupère le contenu dans une variable code_html, que toi dans une variable data, donc pour corriger tu dois mettre: $(data).appendTo("#infos");
0
zblteam
 
ok ça c'est corrigé mais quand je clique sur mes boutons cela affiche toujours les infos des users concernés sur une autre page....

je ne sais pas is c'est utile mais j'ai ce message dans la console JS de firefox
The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
zblteam
 
juste une question concerant Jquery. la ligne
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>

je la laisse quand même avant </head> on est d'accord ?
0
Utilisateur anonyme
 
Tant qu'elle est avant ton script c'est bon.

Sinon je crois avoir compris en fait tu cliques jamais sur #friendslist_button en tant que tel, car c'est une liste, et ses li sont des liens, en gros tu cliques sur les liens mis dans ta liste #friendslist_button, voilà pourquoi ça ne fonctionne pas.
0
zblteam
 
En gros c'est la partie php de mes boutons qui ne prends pas en compte mon id="friendslist_button bien qu'inclus dans un <ul c'est bien ça ?

Du coup je doit re structurer tout ça mais de quelle façon ?

le but était d'afficher de jolie boutons avec un id="friendslist_button css, récupérer les avatars et names directement de la base de donnée sql pour éviter des interventions dans le code plus tard et d'afficher leur infos respectifs sur le tableau dans la même page.
0
Utilisateur anonyme
 
Ajoute une classe à tes bouton, et fait que c'est impossible de cliquer dessus, mais j'avoue que c'est trop mal structuré, et je comprend tous ton code là, donc pour aider c'est dur.
0
zblteam
 
errrf je sais. j'essaye pourtant de faire au plus propre mais je débute. je suis partis de rien. html, css, php et maintenant ajax.....

le code de ma page entière (profile.php). La première partie php affiche les infos du user connecté dans le tableau. ça, ça marche.
En suite il y a le tableau ou les infos du user connecté s'affiche et après la partie php pour afficher les boutons des autres users en bas du tableau (7users) c'est ça qui merde....

puis je termine avec la partie ajax pour essayer d'afficher ces satanées infos de ma bdd dans le tableau ci-dessus.


<?php
session_start();
//affichage du pseudo dans le menu
if(isset($_SESSION['nickname'])) {
$texte ="Hello ".$_SESSION['nickname']." !";
}
else {
header ('location:login.php');
}

/*Style procédural*/
//connexion au serveur:
include ('connection_sql.php');
$id = $_SESSION['nickname'];
$query = " SELECT * FROM users WHERE nickname='$id' ";
$result = mysqli_query($link, $query);
$row = mysqli_fetch_assoc($result);

//Libère le jeu de résultats
mysqli_free_result($result);

//Fermeture de la connexion
mysqli_close($link);
?>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>

</head>

<body>

<!-- Tableau -->
<table id="infos" width="920" bordercolor="FFFFFF"cellspacing="2" cellpadding="15" style="margin-left:15px">
<tr><span width="10" class="bckg-userprofile">User Profile</span>
<tr><td width="10" class="profil-color4">User Profile</td>
<td width="10" class="profil-color4"><?php echo "<img class='bckg_avatar' src='".$row['avatar']."' />"; ?>
<tr><td width="10" class="profil-color1">Nickname :</td>
<td width="10" class="profil-color3"><?php echo $row['nickname']; ?>
<tr><td width="10" class="profil-color1">Name :</td>
<td width="10" class="profil-color2"><?php echo $row['name']; ?>
<tr><td width="10" class="profil-color1">Username :</td>
<td width="10" class="profil-color3"><?php echo $row['username']; ?>
<tr><td width="10" class="profil-color1">E-mail :</td>
<td width="10" class="profil-color2"><?php echo $row['email']; ?>
<tr><td width="10" class="profil-color1">Skype :</td>
<td width="10" class="profil-color3"><?php echo $row['skype']; ?>
<tr><td width="10" class="profil-color1">Website :</td>
<td width="10" class="profil-color2"><?php echo $row['website'];?>
</table>

<!-- Button Friends list -->
<div id="friendslist_title">Friends list :</div>
<ul id="friendslist_button" onchange="changeUser(this.value)" class="clearfix">
<?php
include ('connection_sql.php');
$query = " SELECT * FROM users ";
$result = mysqli_query($link, $query);
while ($row = mysqli_fetch_array($result)) {
echo '<a href="#? id='.$row['id'].'"><img class="bckg_avatar_buttons" width="22" height="22" src="'.$row['avatar'].'">' .$row['nickname']. '</a>';
}
?>
</ul>
</section>

<script type="text/javascript">
$("#friendslist_button").click(function changeUser(){
$.ajax({
type : "GET",
data : {"id":variableid},
url : "contacts.php",
error: function(msg) {
alert( "Error !: " + msg );
},
success: function(data){
//affiche le contenu du fichier dans le bloc indiqué
$(data).appendTo("#infos");
}
});
});
</script>

</body>
</html>


si tu as une idée de comment organiser tout ça je suis preneur :)
0