Problème de chargement d'images en php via ajax et jquery [Résolu]

lezj 70 Messages postés samedi 14 août 2004Date d'inscription 5 juillet 2013 Dernière intervention - 3 juil. 2013 à 18:25 - Dernière réponse : lezj 70 Messages postés samedi 14 août 2004Date d'inscription 5 juillet 2013 Dernière intervention
- 5 juil. 2013 à 02:22
Bonjour à toutes et à tous. Je viens vers vous car j'ai un problème somme toutes intéressant à résoudre pour un de mes sites web. Le problème est le suivant:

dans ma base de données j'ai une table image
image(id_image, nom_image, #id_post)
j'ai également ne table post
post(id_post, contenu, date,etc.)

j'ai un code php qui me permet de récupérer la liste des posts d'une part et la liste des images d'autre part et d'envoyer le résultat au format json et je récupère ces données dans mon fichier javascript par méthode $.ajax()

pour que ce soit plus clair voici le code:

fichier ajax.modele.php
function getListePostAjax(){

$out;
$db = mysql_connect(DB_SERVER, DB_LOGIN, DB_PASSWORD);
mysql_select_db(DB_NAME, $db);
$q "SELECT a.id_post, a.contenu, u.login, u.image_profile, u.id_user FROM (post a INNER JOIN user u ON a.id_annonceur u.id_user) ORDER BY a.id_post DESC";		
$res = mysql_query($q);
if($res != false){
while($r = mysql_fetch_array($res)){
if($r != null)
$out[] = $r;
}
return $out;
}
}

function getListeFichiersAjax(){

$out;
$db = mysql_connect(DB_SERVER, DB_LOGIN, DB_PASSWORD);
mysql_select_db(DB_NAME, $db);
$q = "SELECT f.* FROM post a INNER JOIN fichier f ON a.id_post=f.id_post";		
$res = mysql_query($q);
if($res != false){
while($r = mysql_fetch_array($res)){
if($r != null)
$out[] = $r;
}
return $out;
}
}


fichier post.controller.php
if(isset($_GET) && !empty($_GET)){
extract($_GET);
if($module == 'post'){
if($action == 'listerposts'){
$results = getListePostsAjax();
echo json_encode($results);
}
if($action == 'obtenirimagesposts'){
$results = getListePostsAjax();
echo json_encode($results);
}
}
}


ici nous avons le code html:
fichier html
...
...


et voici le code js:
script.js
$(document).ready(function() { 
tab1 = new Array();
tab2 = new Array();

function getListePosts(){

$.ajax({
dataType: "json",
url: "controllers/post.controller.php",
async: false,
data: {module:"posts",action: "listerposts"},
success: function(data){
if(data != null){
for(var i=0;i<data.length;i++){
tab1[i] = new Array(data[i].id_post,data[i].contenu,data[i].login,data[i].image_profile);
}
getListeImagesPosts();
}
}
});

}

function getListeImagesPosts(){

$.ajax({
dataType: "json",
url: "controllers/post.controller.php",
async: false,
timeout: 5000,
data: {module:"posts",action: "obtenirfichierposts"},
success: function(data){
if(data != null){
for(var i=0;i<data.length;i++){
tab2[i] = new Array(data[i].id_post,data[i].nom_image);
}
}
}
});
}

function showListPost(){

getListePosts();
//getListeImagesPosts();
for(var i=0;i<tab1.length;i++){
$("#listeposts").append('
'+
''+
''+unescape(tab1[i][2])+'

'+
''+unescape(tab1[i][1])+'

'+
'
');
for(var j=0;j<tab2.length;j++){
if(tab2[j][0] == tab1[i][0]){
$("#listeposts").append('
'+
'   '+
'
');
}
}
}
}
});        


Alors le principe est le suivant, lorsque qu'on va cliquer sur un bouton afficher par exemple, la liste des posts va apparaître et pour les posts ayant des images, celles-ci seront également affichées à la suite des posts correspondant. C'est exactement ce qui se produit à un détail près:
Le problème est que lorsque je clique sur ledit bouton, j'ai l'image qui ne se charge pas instantanément; le code est bien généré avec le lien vers l'image mais à la place j'ai un espace et avec firebug on m'indique "fail to load the given url". Mais lorsque je recharge la page, comme par miracle l'image apparaît.
ce que je voudrais c'est que l'image apparaisse au click sur le bouton comme le fait le contenu du post.
Je tiens à préciser qu'en localhost tout fonctionne bien mais dès que j'essaye à partir des autres machines du réseau (avec 192.168.1.x) j'ai le même problème. J'ai vraiment besoin d'aide svp!! Merci à ceux qui s'y colleront.
Lez-J
Afficher la suite 

Votre réponse

3 réponses

lezj 70 Messages postés samedi 14 août 2004Date d'inscription 5 juillet 2013 Dernière intervention - 5 juil. 2013 à 02:22
+3
Utile
C'est encore moi!

çà y est j'ai résolu mon problème. enfait je n'appliquais pas la fonction setTimeout() au bon endroit. une fois rctifié, mon problème s'est décanté.

Merci! ce sujet est clos.


Lez-J
Cette réponse vous a-t-elle aidé ?  
Commenter la réponse de lezj
cs_AlexN 719 Messages postés lundi 5 décembre 2005Date d'inscription 8 janvier 2014 Dernière intervention - 4 juil. 2013 à 15:35
0
Utile
Bonjour,

data: {module:"posts",action: "obtenirfichierposts"},


et

if($action == 'obtenirimagesposts'){


- Les noms d'action ne sont pas les mêmes. Est-ce une erreur de frappe ?
- Avez-vous vérifiez que le JSON reçu correspond bien à ce que vous attendiez ?
- En fonction de la version de jquery, certaines méthodes de retour (les callback) passent en deprecated : success, error et complete (jQuery.ajax()). La syntaxe de l'appel n'est plus la même.
- Enfin vos appels ne gèrent pas les cas d'erreurs, êtes vous certains que vos appels ne génèrent pas une erreur ?

Enfin, mais c'est un avis personnel. Utiliser des méthodes principalement asynchrones en mode synchrone, c'est le mal.
Mais surtout un raccourci qui pourrait permettre d'éviter d'avoir à gérer cet asynchronisme, mais qui à mon avis est plus source de problème qu'autre chose.
J'aurais fait autrement :
- Soit tout faire en un seul appel avec une jointure qui va bien.
- Soit chainer le second appel dans le done du premier
Commenter la réponse de cs_AlexN
lezj 70 Messages postés samedi 14 août 2004Date d'inscription 5 juillet 2013 Dernière intervention - 5 juil. 2013 à 02:00
0
Utile
Bonsoir AlexN, je te remercie de ta réponse en fait pour l'erreur dans les noms des actions, en effet c'est une faute de frappe lol considérons qu'il s'agisse de la même fonction. Ensuite, j'ai trouvé d'où vient précisément le problème: lorsque je charge les images et les textes, les textes sont effectivement pris en compte et les images aussi mais le problème que je rencontre à l'affichage des images est du au fait que l'image n'est pas encore créée au moment de l'affichage c'est pourquoi quand je rafraichis la page, l'image apparait. Alors il faudrait que je trouve un moyen de mettre une pause avant de relancer la requete qui récupère les images mais le problème est que le setTimeout() ne fonctionne pas dans mon cas. pourrais-tu me proposer une façon de relancer getListeImagesPosts après un temps défini par exemple 5sec?
Merci!

Lez-J
Commenter la réponse de lezj

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.