Problème de chargement d'images en php via ajax et jqueryRésolu

Question

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

lezj · Accepted Answer

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

cs_AlexN · Answer

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

lezj · Answer

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

Problème de chargement d'images en php via ajax et jquery

3 réponses

Votre réponse

Discussions similaires