jquery - All my functions don't seem correct -
i posting broad question here , might seem quite challenge people. appreciated.
i busy building small web app displays different news articles via ajax , json.
i have made search feature populates various posts based on user input. problem facing lazy loading trying build. think problem starts way before execute lazy load function.
when execute getposts function when reach 100 pixels above bottom of screen, getposts function seems append multiple times rather once new set of data.
more piece of code here -
//lazy load
$(function ($) { $(window).scroll(function () { if ($(window).scrolltop() + $(window).height() > $(document).height() - 100) { getposts(str); changepage = '2'; } }); }); this gives me result of more 1 page being appended , think has getposts function.
i hoping bit more knowledge me maybe take @ code, maybe sift through , criticise have done. maybe suggest better/the right way things.
my articles change onclick event , various other functions populate content via ajax , jquery.
i appreciate might have :)
please take @ code have inserted below -
i have inserted link 1 of json files test -
and link css file there many characters -
var newsdata; var eventsdata; var nightdata; var dinedata; var outdata; var videodata; var data; var str = 'news'; var changepage = '1'; function getposts(str) { var baseurl = 'http://www.capetownetc.com/api/get_category_posts/?slug='; var pagecount = '&count=10&page='; $.ajax({ type: 'get' , url: baseurl + str + pagecount + changepage , data: { get_param: 'value' } , datatype: 'json' , success: function postdata(data) { if (str == 'news') { newsdata = data; displayposts(newsdata); } if (str == 'events') { eventsdata = data; } if (str == 'nightlife%20culture') { nightdata = data; } if (str == 'dine') { dinedata = data; } if (str == 'family%20fun') { outdata = data; } if (str == 'videos') { videodata = data; } } }); } getposts('news'); getposts('events'); getposts('nightlife%20culture'); getposts('dine'); getposts('family%20fun'); getposts('videos'); function displayposts(str) { data = str; if (str == 'news') { data = newsdata; } if (str == 'events') { data = eventsdata; } if (str == 'nightlife%20culture') { data = nightdata; } if (str == 'dine') { data = dinedata; } if (str == 'family%20fun') { data = outdata; } if (str == 'videos') { data = videodata; } var maxlength2 = 6; var maxlength = 130; var imgtitle = {}; var imgthumb = {}; var cat = {}; var ex = {}; var text = {}; var time = {}; // $('#post-cont').empty(); $("#post-cont").append('<div class="ip1 full-post-img" id="card" attr-index="0"><div class="ip1 full-post-info"><a class="ip1 post-cat">breaking news</a><h2 class="ip1 text-heading" id="ip1heading">' + data.posts[0].title + '</h2><p class="ip1 post-source" id="ip1source">' + data.posts[0].date + '</p></div><span class="ip1 main-card-img1" id="ip1img"></span></div>'); $('#ip1img').css('background-image', 'url(' + data.posts[0].thumbnail_images.medium.url + ')'); $.each(data.posts, function (i, item) { //title imgtitle = item.title.replace('newsflash:', ''); console.log(imgtitle); //thumbnail imgthumb = item.thumbnail_images.medium.url; //category cat = item.categories[0].title; //excerpt ex = item.excerpt.substr(0, maxlength); //content text = item.content; //time time = item.date; if (i > 0){ $("#post-cont").append('<div class="p full-post-text" id="card" attr-index="' + +'"><div class="p1 text-post-img"><span class="p1 card-img1" id="p1img" style="background-image:url(' + imgthumb + ');"></span><a class="p1 post-cat">' + cat + '</a> </div><div class="p1 full-text-info"><h2 class="p1 text-heading" id="p1heading">' + imgtitle + '</h2>' + ex + '<p class="lay2 post-source">' + time + '</p></div></div>'); } // post populate *** $(document).on('click', '#card', function(i, item) { $('#cont').css('left', '0px'); $('#cont').css('position', 'relative'); $('#cont').css('top', '0'); $('#cont').css('display', 'block'); $('#swipe').css('display', 'none'); $('#post-header').css('left', '0px'); $('#post-cont').css('left', '-9999px'); $('#slider').css('left', '-9999px'); $('#slider').css('display', 'none'); $(window).scrolltop(0, 0); var ind = $(this).attr("attr-index"); imgtitle = data.posts[ind].title; imgthumb = data.posts[ind].thumbnail_images.full.url; text = data.posts[ind].content; var maxlength2 = 6; time = data.posts[ind].date.substr(10, maxlength2); $('#cont').html('<div class="content-container"><div class="header-img"><span id="para-img"></span></div><div class="pagecontent"><h1 class="post1 header">' + imgtitle + '</h1><p class="lay2 post-source">' + time + '</p>' + text + '<div class="post inter-tags"><ul class="post-tag-list" id="post-inter-tags"></ul></div></div></div>'); $('#para-img').css('background-image','url(' + imgthumb + ')'); $.each(data.posts, function (key, value) { var cat = data.posts[ind].tags[key].title; var apcat = '<li><input type="checkbox" id="tagpol" value=" " class="tag"><label for="tagpol" class="inter-label">' + cat + '</label></li>'; $('#post-inter-tags').append(apcat); }); }); }); } //end of displayposts //lazy load $(function ($) { $(window).scroll(function () { if ($(window).scrolltop() + $(window).height() > $(document).height() - 100) { getposts(str); changepage = '2'; } }); }); //search function $('#sload').css('opacity', '0'); $("#search-btn").click(function (e) { var usertext = $.trim($('#searcharea').val()); $('.full-post-img').css('display', 'none'); $('.full-post-text').css('display', 'none'); $('#op').attr('checked', false); $.getjson('http://www.capetownetc.com/api/get_search_results/?search=' + usertext, { srsearch: usertext , action: "query" , list: "search" , format: "json" , }, function (data) { if (usertext.length === 0) { $("body").append("<p class='results'>please enter keyword</p>"); $('#sload').css('opacity', '0'); } else { $("#swipe").empty(); var imgtitle = {}; var imgthumb = {}; var cat = {}; var ex = {}; var time = {}; var maxlength = 130; var maxlength2 = 6; $.each(data.posts, function (i, item) { imgtitle = item.title.replace('newsflash:', ''); console.log(imgtitle); //thumbnail check if (item.thumbnail_images) { imgthumb = item.thumbnail_images.full.url; } else { imgthumb = item.thumbnail; } //catergory if (item.categories[0]) { cat = item.categories[0].title; } else { cat = 'blog'; } //excerpt ex = item.excerpt.substr(0, maxlength); //time time = item.date; $("#swipe").append('<div class="p full-post-text" id="search-result" attr-index="' + +'"><div class="p1 text-post-img"><span class="p1 card-img1" id="p1img" style="background-image:url(' + imgthumb + ');"></span><a class="p1 post-cat">' + cat + '</a> </div><div class="p1 full-text-info"><h2 class="p1 text-heading" id="p1heading">' + imgtitle + '</h2>' + ex + '<p class="lay2 post-source">' + time + '</p></div></div>'); $(document).on('click', '#search-result', function(i, item) { $('#cont').css('left', '0px'); $('#cont').css('position', 'relative'); $('#cont').css('top', '0'); $('#cont').css('display', 'block'); $('#swipe').css('display', 'none'); $('#post-header').css('left', '0px'); $('#post-cont').css('left', '-9999px'); $('#slider').css('left', '-9999px'); $('#slider').css('display', 'none'); $(window).scrolltop(0, 0); var ind = $(this).attr("attr-index"); imgtitle = data.posts[ind].title; imgthumb = data.posts[ind].thumbnail_images.full.url; text = data.posts[ind].content; time = data.posts[ind].date.substr(10, maxlength2); $('#cont').html('<div class="content-container"><div class="header-img"><span id="para-img"></span></div><div class="pagecontent"><h1 class="post1 header">' + imgtitle + '</h1><p class="lay2 post-source">' + time + '</p>' + text + '<div class="post inter-tags"><ul class="post-tag-list" id="post-inter-tags"></ul></div></div></div>'); $('#para-img').css('background-image','url(' + imgthumb + ')'); $.each(data.posts, function (key, value) { var cat = data.posts[ind].tags[key].title; var apcat = '<li><input type="checkbox" id="tagpol" value=" " class="tag"><label for="tagpol" class="inter-label">' + cat + '</label></li>'; $('#post-inter-tags').append(apcat); }); }); }); } //search success $('#sload').css('opacity', '0'); $('#results').css('display', 'inline-block'); $('#search-img').css('display', 'none'); $('#islider').css('display', 'none'); $('#searchbr').css('display', 'block'); }); }); $('textarea').keydown(function (e) { if (e.keycode == 13) { e.preventdefault(); $("#search-btn").click(); } }); $('#searchbr').click(function () { $('#swipe').html('<div class="post-cont" id="post-cont"><div class="ip1 full-post-img"><a class="link-click" id="post1"></a><div class="ip1 full-post-info"> <a class="ip1 post-cat">breaking news</a><h2 class="ip1 text-heading" id="ip1heading"></h2><p class="ip1 post-source" id="ip1source"> / </p></div><span class="ip1 main-card-img1" id="ip1img"></span></div><div class="p1 full-post-text"><a class="p1 link-click" id="post2" target="_blank"></a><div class="p1 text-post-img"><span class="p1 card-img1" id="p1img"></span><a class="p1 post-cat">sport</a></div><div class="p1 full-text-info"><h2 class="p1 text-heading" id="p1heading"></h2><p class="p1 text-post-desc" id="p1desc"></p><p class="p1 post-source" id="p1source"> / </p></div></div><div class="p2 full-post-text"><a class="p2 link-click" id="post3" target="_blank"></a><div class="p2 text-post-img"><span class="p2 card-img2" id="p2img"></span><a class="p2 post-cat">local news</a> </div><div class="p2 full-text-info"><h2 class="p2 text-heading" id="p2heading"></h2><p class="p2 text-post-desc" id="p2desc"></p><p class="p2 post-source" id="p2source"> / </p></div></div><div class="p3 full-post-text"><a class="p3 link-click" id="post4" target="_blank"></a><div class="p3 text-post-img"><span class="p3 card-img3" id="p3img"></span><a class="p3 post-cat">health</a> </div><div class="p3 full-text-info"><h2 class="p3 text-heading" id="p3heading"></h2><p class="p3 text-post-desc" id="p3desc"></p><p class="p3 post-source" id="p3source"> / </p></div></div></div>'); displayposts(str); $('#searchbr').css('display', 'none'); $('#results').css('display', 'none'); $('#islider').css('display', 'inline-block'); $('#search-img').css('display', 'inline-block'); $('#op').attr('checked', false); }); $('#searchb').click(function () { $('#results').css('display', 'none'); $('#searcharea').val(''); }); $("#search-btn").click(function () { $('#sload').css('opacity', '1'); }); //***problem area*** //get categories var catnames = {}; function getallcat() { $.ajax({ type: 'get' , url: 'http://www.capetownetc.com/api/get_category_index/' , data: { get_param: 'value' } , datatype: 'json' , success: function (data) { $.each(data.categories, function (key, item) { catnames[key] = item.title; $('#tag-list').append('<li><input type="checkbox" id="tagpol" value=" " class="tag"><label for="tagpol" class="inter-label">' + catnames[key] + '</label></li>'); }); } }); } getallcat(); // swipe event **** $('#swipe').bind('swipeleft', function () { if (str == 'news') { displayposts('events'); str = 'events'; $(".i-item.current").removeclass("current"); $('.interest-list li:nth-child(2) p').addclass("current"); } else if (str === 'events') { displayposts('nightlife%20culture'); str = 'nightlife%20culture'; $(".i-item.current").removeclass("current"); $('.interest-list li:nth-child(3) p').addclass("current"); } else if (str === 'nightlife%20culture') { displayposts('dine'); str = 'dine'; $(".i-item.current").removeclass("current"); $('.interest-list li:nth-child(4) p').addclass("current"); if ($(window).width() < 370) { $('#interestslider').animate({ scrollleft: 330 }, 600); } else { $('#interestslider').animate({ scrollleft: 260 }, 600); } } else if (str === 'dine') { displayposts('family%20fun'); str = 'family%20fun'; $(".i-item.current").removeclass("current"); $('.interest-list li:nth-child(5) p').addclass("current"); if ($(window).width() < 370) { $('#interestslider').animate({ scrollleft: 330 }, 600); } else { $('#interestslider').animate({ scrollleft: 260 }, 600); } } else if (str === 'family%20fun') { displayposts('videos'); str = 'videos'; $(".i-item.current").removeclass("current"); $('.interest-list li:nth-child(6) p').addclass("current"); } console.log(str); }); $('#swipe').bind('swiperight', function () { if (str == 'events') { displayposts('news'); str = 'news'; $(".i-item.current").removeclass("current"); $('.interest-list li:nth-child(1) p').addclass("current"); } else if (str === 'nightlife%20culture') { displayposts('events'); str = 'events'; $(".i-item.current").removeclass("current"); $('.interest-list li:nth-child(2) p').addclass("current"); if ($(window).width() < 370) { $('#interestslider').animate({ scrollleft: -330 }, 600); } else { $('#interestslider').animate({ scrollleft: -250 }, 600); } } else if (str === 'dine') { displayposts('nightlife%20culture'); str = 'nightlife%20culture'; $(".i-item.current").removeclass("current"); $('.interest-list li:nth-child(3) p').addclass("current"); if ($(window).width() < 370) { $('#interestslider').animate({ scrollleft: -330 }, 600); } else { $('#interestslider').animate({ scrollleft: -250 }, 600); } } else if (str === 'family%20fun') { displayposts('dine'); str = 'dine'; $(".i-item.current").removeclass("current"); $('.interest-list li:nth-child(4) p').addclass("current"); } else if (str === 'videos') { displayposts('family%20fun'); str = 'family%20fun'; $(".i-item.current").removeclass("current"); $('.interest-list li:nth-child(5) p').addclass("current"); } }); //making current styles interest slider $('.i-item').click(function () { if (!$(this).hasclass("current")) { $(".i-item.current").removeclass("current"); $(this).addclass("current"); } }); //post page button $('.back').click(function () { $('#cont').css('left', '-9999px'); $('#cont').css('display', 'none'); $('#post-cont').css('left', '0px'); $('.interest-slider').css('left', '0px'); $('#swipe').css('display', 'block'); $('#post-header').css('left', '-9999px'); $('iframe').attr('src', ''); }); //loading screen $(document).ajaxcomplete(function () { $("#loading").delay(1000).fadeout("slow"); }); //interest menu option $('.interests').click(function () { $('.inter-cont').css('left', '0px'); }); //interest menu option - $('.interlogo').click(function () { $('.inter-cont').css('left', '-9999px'); }); //parallax on post page $(window).scroll(function () { var scrolledy = $(window).scrolltop(); $('#para-img').css('background-position', 'center ' + ((scrolledy)) + 'px'); }); //$.each(data.categories, function(key, item){ // catnames[key] = item.title; // $('#tag-list').append('<li><input type="checkbox" id="tagpol" value=" " class="tag"><label for="tagpol" class="inter-label">' + catnames[key] + '</label></li>'); // }); //animate search results //$("#searchr").hide(); //$('#searcharea').bind('input propertychange type', function() { // if (!$.trim($("#searcharea").val())) { // $("#searchr").hide(500); // } // else{ // $("#searchr").show(500); // } //}); // loop categories // $.each(data.posts , function(key , value){ // first level // $.each(value.tags , function(k , v ){ // contents inside stars // $('#post-inter-tags').append('<li><input type="checkbox" id="tagpol" value=" " class="tag"><label for="tagpol" class="inter-label">' + v.title + '</label></li>'); // }); // });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="islider" id="islider"> <ul class="interest-list" id="interestslider"> <li><p onclick="displayposts('news'); str = 'news'" class="i-item current">home</p></li> <li><p onclick="displayposts('events'); str = 'events'" class="i-item">events</p></li> <li><p onclick="displayposts('nightlife%20culture'); str = 'nightlife%20culture'" class="i-item">nightlife</p></li> <li><p onclick="displayposts('dine'); str = 'dine'" class="i-item">dine</p></li> <li><p onclick="displayposts('family%20fun'); str = 'family%20fun'" class="i-item">outdoors</p></li> <li><p onclick="displayposts('videos'); str = 'videos'" class="i-item">video</p></li> </ul> </div>
like says in comment, please specific problem.
but 1 thing see right away using same name ids checkboxes, don't this, should make sure unique. giving id of tagpol, make make unique:
$.each(data.posts, function(key, value) { var cat = data.posts[ind].tags[key].title; var apcat = '<li><input type="checkbox" id="tagpol' + key + '" value=" " class="tag"><label for="tagpol' + key + '" class="inter-label">' + cat + '</label></li>'; $('#post-inter-tags').append(apcat); });
Comments
Post a Comment