jquery - AJAX call, add loader only when loading posts -
i have ajax call on click on section i'll load posts (the featured images assigned them) category assigned section. works well, except few things.
1: have loader appear when images (from posts) being loaded second div. when loading of posts in div complete, div gets class triggers it's transition, it's visible, loader gets loaded
class, , no ajax loader present. but, when click hide second div (gallery), loader appears again, , transition happens. how make on second click won't have loader , have transition hides div immediately?
i'm doing wordpress. ajax looks this.
var $content = $("#gallery"); var $content_inner = $("#inner_gallery"); var $fullpage = $('#fullpage'); var $gallerycat = $('#fullpage').find('.section'); var $close = $('.close'); var $loader = $("#loader"); var catid; var order; var orderby; $('#fullpage').find('.section').eq(0).addclass('first'); $gallerycat.each(function(){ $(this).on('click', function(){ catid = $(this).data('cat'); order = $(this).data('order'); orderby = $(this).data('orderby'); load_posts(catid, order, orderby); if(!$(this).hasclass('first')){ $fullpage.toggleclass('galleryshow'); } if (!$content.hasclass('galleryshow')) { $content_inner.scrolltop(0); } }); }); function load_posts(currentcat, order, orderby){ var str = '&cat=' + currentcat + '&order=' + order + '&orderby=' + orderby + '&action=gallery_posts'; $content_inner.html(); $.ajax({ type: "post", datatype : "html", url: get_gallery_posts.ajaxurl, data: str, success: function(data){ var $data = $(data); if ($data.length) { $content_inner.imagesloaded(function(){ $content_inner.html(data); $content.toggleclass('galleryshow'); }); } }, beforesend : function(){ $loader.removeclass('loaded').addclass('loading'); }, error : function(jqxhr, textstatus, errorthrown) { $loader.html(jqxhr + " :: " + textstatus + " :: " + errorthrown); }, complete : function(){ $loader.removeclass('loading').addclass('loaded'); } }); return false; }
and html looks this:
<div id="fullpage"> <div class="section" data-cat="category1" data-catname="category1" data-order="asc" data-orderby="title" style="background:url(\''.$image_url.'\'); background-size: contain; background-repeat: no-repeat; background-position: center;"></div> <div class="section" data-cat="category2" data-catname="category2" data-order="asc" data-orderby="title" style="background:url(\''.$image_url.'\'); background-size: contain; background-repeat: no-repeat; background-position: center;"></div> <div class="section" data-cat="category3" data-catname="category3" data-order="asc" data-orderby="title" style="background:url(\''.$image_url.'\'); background-size: contain; background-repeat: no-repeat; background-position: center;"></div> </div> <div id="gallery"> <div id="inner_gallery"></div> </div> <div id="loader"></div>
so when click on section, info it, pass function query posts, , posts appear in #inner_gallery
.
all of works, needs tweaking. making loader not loading when hiding gallery, , resetting scroll position of inner gallery.
edit: i've sorted scroll issue:
if (!$content.hasclass('galleryshow')) { $content_inner.scrolltop(0); }
still loader issue persists.
ok think got
var $content = $("#gallery"); var $content_inner = $("#inner_gallery"); var $fullpage = $('#fullpage'); var $gallerycat = $('#fullpage').find('.section'); var $close = $('.close'); var $loader = $("#loader"); var catid; var order; var orderby; $('#fullpage').find('.section').eq(0).addclass('first'); $(window).on('load', function(){ $('#fp-nav').append('<div class="closed_nav"></div>'); }); $gallerycat.each(function(){ $(this).on('click', function(){ catid = $(this).data('cat'); order = $(this).data('order'); orderby = $(this).data('orderby'); if(!$(this).hasclass('first')){ $fullpage.toggleclass('galleryshow'); } if (!$content.hasclass('galleryshow')) { load_posts(catid, order, orderby); $content_inner.scrolltop(0); } if ($content.hasclass('galleryshow')) { $content.removeclass('galleryshow') } }); }); $(document).on('click', '#fp-nav', function(){ $content.removeclass('galleryshow'); $fullpage.removeclass('galleryshow'); }); function load_posts(currentcat, order, orderby){ var str = '&cat=' + currentcat + '&order=' + order + '&orderby=' + orderby + '&action=gallery_posts'; $content_inner.html(); $.ajax({ type: "post", datatype : "html", url: get_gallery_posts.ajaxurl, data: str, success: function(data){ var $data = $(data); if ($data.length) { $content_inner.imagesloaded(function(){ $content_inner.html(data); $content.toggleclass('galleryshow'); }); } }, beforesend : function(){ $loader.removeclass('loaded').addclass('loading'); }, error : function(jqxhr, textstatus, errorthrown) { $loader.html(jqxhr + " :: " + textstatus + " :: " + errorthrown); }, complete : function(){ $loader.removeclass('loading').addclass('loaded'); } }); return false; }
just remove classes. added additional on click event remove classes when click navigation between sections, added fullpage.js
:)
Comments
Post a Comment