javascript - AJAX resulting in not consistently showing the right content -
i'm doing website , want no url change @ when navigating. i'm using ajax generated content.
here's link : http://nestecha.fr/confi/
so when first arrive on page it's fine, when click on either "news" or "tv", :
- sometimes work absolutely fine , generate content want to.
- sometimes not work @ all, generate content randomly, 1 row load, won't ordered in right way, nothing loaded @ all.
i can't see what's going on since seems random. works, doesn't.
why ?
thanks !
here's of important code believe flawed :
// when click on "news" $('li a[href^=index]').on('click', function() { event.preventdefault(); var $spage = ''; $.ajax({ url: 'webservice/newsshowreel.php', datatype: 'json' }) .done(function (result) { $spage += '<div class="container">'; $spage += '<div class="row"><div class="col-xs-12 text-center title"><h1>show réel</h1></div></div>'; $spage += '<div class="row">'; $spage += '<section class="col-xs-12 text-center showreel">'; $spage += '<div class="view view-third">'; $spage += '<img src="'+ result['image'] +'" class="img-responsive">'; $spage += '<div class="mask">'; $spage += '<h2>'+ result['titre'] +'</h2>'; $spage += '<p>'+ result['description'] +'</p>'; $spage += '<a class="fancybox-media info" rel="group" href="'+ result['lien'] +'">visionner</a>'; $spage += '</div>'; $spage += '</div>'; $spage += '</section>'; $spage += '</div>'; }); $.ajax({ url: 'webservice/newsnouveautes.php', datatype: 'json' }) .done(function(result) { $spage += '<div class="row"><div class="col-xs-12 text-center title"><h1>nouveautés</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>'; $spage += '</div>'; }); $('#page').fadeout('slow', function() { $('#page').html($spage).fadein('slow'); $("#owl").owlcarousel({ autoplay: false, //set autoplay 3 seconds items : 4, itemsdesktop : [1199,4], itemsdesktopsmall : [990,2] }); }); });
i have found answser problem , why it's not working.
originally, code :
// when click on "news" $('li a[href^=index]').on('click', function() { event.preventdefault(); var $spage = ''; $.ajax({ url: 'webservice/newsshowreel.php', datatype: 'json' }) .done(function (result) { $spage = '<div class="container">'; $spage += '<div class="row"><div class="col-xs-12 text-center title"><h1>show réel</h1></div></div>'; $spage += '<div class="row">'; $spage += '<section class="col-xs-12 text-center showreel">'; $spage += '<div class="view view-third">'; $spage += '<img src="'+ result['image'] +'" class="img-responsive">'; $spage += '<div class="mask">'; $spage += '<h2>'+ result['titre'] +'</h2>'; $spage += '<p>'+ result['description'] +'</p>'; $spage += '<a class="fancybox-media info" rel="group" href="'+ result['lien'] +'">visionner</a>'; $spage += '</div>'; $spage += '</div>'; $spage += '</section>'; $spage += '</div>'; }); $.ajax({ url: 'webservice/newsnouveautes.php', datatype: 'json' }) .done(function(result) { $spage += '<div class="row"><div class="col-xs-12 text-center title"><h1>nouveautés</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>'; $spage += '</div>'; }); $('#page').fadeout('slow', function() { $('#page').html($spage).fadein('slow'); $("#owl").owlcarousel({ autoplay: false, //set autoplay 3 seconds items : 4, itemsdesktop : [1199,4], itemsdesktopsmall : [990,2] }); }); }); the problem had not displaying right content consistently. also, more ajax requests there were, more display wasn't shown properly. thing is, doing multiple ajax requests @ same time gives bad results. did ajax request once request before finished.
here's new code consistently working :
$('li a[href^=index]').on('click', function() { event.preventdefault(); var $spage = ''; $.ajax({ url: 'webservice/newsshowreel.php', datatype: 'json' }) .success(function (result) { $spage = '<div class="container">'; $spage += '<div class="row"><div class="col-xs-12 text-center title"><h1>show réel</h1></div></div>'; $spage += '<div class="row">'; $spage += '<section class="col-xs-12 text-center showreel">'; $spage += '<div class="view view-third">'; $spage += '<img src="'+ result['image'] +'" class="img-responsive">'; $spage += '<div class="mask">'; $spage += '<h2>'+ result['titre'] +'</h2>'; $spage += '<p>'+ result['description'] +'</p>'; $spage += '<a class="fancybox-media info" rel="group" href="'+ result['lien'] +'">visionner</a>'; $spage += '</div>'; $spage += '</div>'; $spage += '</section>'; $spage += '</div>'; $.ajax({ url: 'webservice/newsnouveautes.php', datatype: 'json' }) .success(function(result) { $spage += '<div class="row"><div class="col-xs-12 text-center title"><h1>nouveautés</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>'; $spage += '</div>'; }); }); $('#page').fadeout('slow', function() { $('#page').html($spage).fadein('slow'); $("#owl").owlcarousel({ autoplay: false, //set autoplay 3 seconds items : 4, itemsdesktop : [1199,4], itemsdesktopsmall : [990,2] }); }); });
Comments
Post a Comment