javascript - jquery ajax and after is duplicating the results -
i've got load more button, when clicked displays next 4 items, doing ajax call.
however, (for no apparent reason), content duplicated , returned twice, though when alert results, there's 1. happens when double click button.
any appreciated!
here's code:
/* load more */ $('.load-more').on('click',function(e){ e.preventdefault(); e.stoppropagation(); $('.pagination-holder').fadeout(250,function(){ $(this).remove(); }); var start = $(this).data('start'), limit = $(this).data('limit'), page = $(this).data('page'), type = $(this).attr('href'); $.ajax({ url:'/index.php?route=news/news/getnext&start=4&limit=4&page=2', method:'get', data:{start:start,limit:limit,page:page}, datatype:'json' }).done(function(data){ var html = ''; html +='<div class="row next" style="display:none">'; $.each(data.newss,function(i,news){ html +='<div class="col-md-3 pt30">'; html +=' <div class="image mb30"><a href="'+news.href+'"><img src="'+news.image+'" alt="'+news.title+'" class="responsive" /></a></div>'; html +=' <div class="text">'; html +=' <h3><a href="'+news.href+'">'+news.title+'</a></h3>'; html +=' <p class="date mb5">'+news.date+'</p>'; html +=' <p class="mb30">'+news.description+'</p>'; html +=' <a href="'+news.href+'" class="btn mb30">read</a>'; html +=' </div>'; html +='</div>'; if ((i+1) % 4 === 0) { html +='<div class="clear"></div>'; } }); html +='</div>'; //alert(html); /* when alert this, displays 1 row, should do, when don't alert this, can append duplicates */ $('#'+type+'-list').find('.row').after(html).ready(function(){ $('.row.next').fadein(500).removeclass('next'); }); }); });
i've seen similar questions throughout stackoverflow , i've tried solve issue, can't figure out.
hey can use same answer on it:
https://stackoverflow.com/questions/45788916/jquery-isnt-getting-dynamically-updated-data-from-button
Comments
Post a Comment