I have this problem, anytime I click on an class ShowLB
I want it to appear a LightBox where I create a new element #Content
where I load the posts....Once I want it to close the Lightbox I click on the class HideLB
to do it, and It does.
JQUERY Initial call to function "show results on Lightbox"
$('.ShowLB').on('click', function() {
var id_post = $(this).data('id_post');
//show lightbox, create container
$(".LightBoxPosts").show();
$(".Title").after('<ul id=Container></ul>');
$(document).ShowPosts(id_post);
});
//hide lighbox, remove container
$('.HideLB').on('click', function() {
$("#Container").remove();
$(".LightBoxPosts").hide();
});
HTML
<div class="ShowLB" data-id_post="5">[SHOW LIGHTBOX]</div>
<div id="LightBoxPosts">
<div class="HideLB">[X]</div>
<div class="Title">[ALL POSTS]</div>
<div class="ShowMore">[SHOW MORE]</div>
</div>
FUNCTION Once the Lightbox appears the posts loads successfully into #Container
$(".ShowMore").hide();
jQuery.fn.ShowPosts = function(id_post) {
var loading = false;
var track_load = 0;
var total_groups = 5;
$(".ShowMore").show();
$(".ShowMore").on('click', function() {
if (track_load <= (total_groups - 1) && loading == false) {
alert(track_load);
$.post("posts.php", {
'group_no': track_load
},
function(data) {
loading = true;
$(".Container").append(data);
track_load++;
loading = false;
});
}
});
}
PROBLEM
At the beginning, When clicking on the .ShowMore
button for first time, It retrieves normally the posts.
The problem comes out when I click on HideLB
to close the lightbox. The container gets removed and anytime I click again ShowLB
then .ShowMore
the function ShowPosts()
loads content from previous calls. It means that the alert track_load
appears twice after clicking on the .ShowMore
button...and then loads twice new content along with content from the very first time I openned the Lightbox. Does it make sense? I cant continue with this problem.