Forum d'entraide PHPFrance

Bonjour !

J'ai récemment dû travailler sur un site avec une directive particulière, en effet tout le site, et je dis bien tout le site, doit être réalisé en AJAX. Il ne doit JAMAIS y avoir de changement de page. Donc, quand on clique sur un lien, on restera toujours sur la même "page", sauf que le contenu changera, en AJAX donc.

Ca fonctionne...à peu près. C'est très étrange. Normalement, soit ça marche, soit ça marche pas.

Ici, lorsqu'on clique une fois sur le lien "Tv" en haut, ça fonctionne (mais pas tout le temps), et ça affiche 3 bandeaux avec un carousel dans chacun d'entre eux. Si on clique plusieurs fois, on obtient des résultats différents, mais je n'arrive pas du tout à trouver l'erreur, ni d'où vient le problème.

Voici le lien, ce n'est qu'un début de site, seul les deux liens "Tv" et "News" fonctionnent : http://nestecha.fr/confi

A noter que j'ai le même soucis sur la page news. Et que dans la page News, le premier bandeau subsiste quasiment tout le temps, il ne m'est jamais arrivé de voir le deuxième sans le premier, l'inverse arrive fréquemment, et il arrive même qu'aucun des bandeaux ne soit chargé.

Comment faire ?

Bonjour,

Peux-tu poster les appels faits en JS ?

Oui, voici celui qui "rate" le plus souvent :

[javascript]$('li a[href^=tv]').on('click', function() {
event.preventDefault();

$('li a[href^=tv] div.icons').css('background', 'url("img/icone_tv.png") no-repeat 15px -45px');

var $sPage = '';
$.ajax({
url: 'webservice/tvTournage.php',
dataType: 'json'
})
.done(function (result) {
$sPage = '<div class="container">';
$sPage += '<div class="row"><div class="col-xs-12 text-center title"><h1 id="tournage">Tournage</h1></div></div>';
$sPage += '<div class="row">';
$sPage += '<div id="owl">';
$.each(result, function(key, resultSingle) {
$sPage += '<div class="item">';
$sPage += '<div class="viewSmall view-thirdSmall">';
$sPage += '<img src="'+ resultSingle['image'] +'" class="img-responsive">';
$sPage += '<div class="maskSmall">';
$sPage += '<h2>'+ resultSingle['titre'] +'</h2>';
$sPage += '<p>'+ resultSingle['description'] +'</p>';
$sPage += '<a class="fancybox-media info" rel="group" href="'+ resultSingle['lien'] +'">Visionner</a>';
$sPage += '</div>';
$sPage += '</div>';
$sPage += '</div>';
});
$sPage += '</div>';
$sPage += '</div>';
});
$.ajax({
url: 'webservice/tvAnimation.php',
dataType: 'json'
})
.done(function(result) {
$sPage += '<div class="row"><div class="col-xs-12 text-center title"><h1>Animation 2D/3D</h1></div></div>';
$sPage += '<div class="row">';
$sPage += '<div id="owl2">';
$.each(result, function(key, resultSingle) {
$sPage += '<div class="item">';
$sPage += '<div class="viewSmall view-thirdSmall">';
$sPage += '<img src="'+ resultSingle['image'] +'" class="img-responsive">';
$sPage += '<div class="maskSmall">';
$sPage += '<h2>'+ resultSingle['titre'] +'</h2>';
$sPage += '<p>'+ resultSingle['description'] +'</p>';
$sPage += '<a class="fancybox-media info" rel="group" href="'+ resultSingle['lien'] +'">Visionner</a>';
$sPage += '</div>';
$sPage += '</div>';
$sPage += '</div>';
});
$sPage += '</div>';
$sPage += '</div>';
});
$.ajax({
url: 'webservice/tvStoryboard.php',
dataType: 'json'
})
.done(function(result) {
$sPage += '<div class="row"><div class="col-xs-12 text-center title"><h1>Storyboard</h1></div></div>';
$sPage += '<div class="row">';
$sPage += '<div id="owl3">';
$.each(result, function(key, resultSingle) {
$sPage += '<div class="item">';
$sPage += '<div class="viewSmall view-thirdSmall">';
$sPage += '<img src="'+ resultSingle['image'] +'" class="img-responsive">';
$sPage += '<div class="maskSmall">';
$sPage += '<h2>'+ resultSingle['titre'] +'</h2>';
$sPage += '<p>'+ resultSingle['description'] +'</p>';
$sPage += '<a class="fancybox-media info" rel="group" href="'+ resultSingle['lien'] +'">Visionner</a>';
$sPage += '</div>';
$sPage += '</div>';
$sPage += '</div>';
});
$sPage += '</div>';
$sPage += '</div>';
$sPage += '</div>';
});

$('#page').fadeOut('slow', function() {
$('#page').html($sPage).fadeIn('slow');

$("#owl").owlCarousel({

autoPlay: false, //Set AutoPlay to 3 seconds

items : 4,
itemsDesktop : [1199,4],
itemsDesktopSmall : [990,2]

});

$("#owl2").owlCarousel({

autoPlay: false, //Set AutoPlay to 3 seconds

items : 4,
itemsDesktop : [1199,4],
itemsDesktopSmall : [990,2]

});

$("#owl3").owlCarousel({

autoPlay: false, //Set AutoPlay to 3 seconds

items : 4,
itemsDesktop : [1199,4],
itemsDesktopSmall : [990,2]

});
});
});[/javascript]

Et les pages associées sont toutes identiques, seul un paramètre change dans la requête SQL :

TvTournage.php

<?php

$oPDO = new PDO('mysql:host=localhost;dbname=lyloo','root','****');

$sQueryNews = "SELECT * FROM `tv` WHERE `inTournage` = 1";

$aTournage = array();

foreach ($oResultsNews = $oPDO->query($sQueryNews) as $aRow) {
    $aTournage[] = $aRow;
}

echo json_encode($aTournage);

As-tu essayer de mettre ta fonction de retour dans success plutôt que dans done ?

Je viens d'essayer, le résultat est le même :/

Je pense que le problème vient du fait que tes appels ont lieu tous "en même temps".
Essayes de les faire les uns après les autres, en gros une fois que la première requête AJAX est terminée, tu lances la 2è, quand la 2è est terminée la 3è...

Ok j'ai donc essayé ce que tu m'as dit, voilà le nouveau code :

Je ne peux pas le mettre, j'ai un message d'erreur : This message was flagged as spam and has been denied.

Et ça a l'air de fonctionner parfaitement. Est-ce que tu aurais une explication ? Où est le soucis de faire ces appels en même temps ?

J'ai déjà eu le problème il y a quelques temps. Je pense que le fait que le JS continue son exécution, puis est appelé par un retour AJAx, etc... ne lui convienne pas vraiment ! Tu n'a pas de thread comme dans d'autre langages et c'est donc à nous, développeurs, de prendre ceci en compte lorsqu'on utilise des langages permissifs tel que JS.

J'ai déjà eu le problème il y a quelques temps. Je pense que le fait que le JS continue son exécution, puis est appelé par un retour AJAx, etc... ne lui convienne pas vraiment ! Tu n'a pas de thread comme dans d'autre langages et c'est donc à nous, développeurs, de prendre ceci en compte lorsqu'on utilise des langages permissifs tel que JS.

Même chose : lance tes ajax en cascade et non pas à la suite car il n'y a pas de pile respectée par le serveur. Dès qu'un est terminé, il sera renvoyé même si c'est le dernier.

Heu... Bah en fait moi j'ai pas de problème, si tu lis bien le fil...

Non je sais. J'ai voulu utiliser ta réponse pour illustrer mes propos (peut-être maladroitement )