CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Máté Nagy
Máté Nagy

Reputation: 125

Two separate $.ajax call "kill" each other on click function

So here is the problem: I have two click event in one page. The first when you click on a thumbnail picture it's open a modal which shows a bigger image like Instagram on PC (I make an Instagram clone for practicing btw). The other button is for show more image.

The problem is, I use ajax for both click to get some variable and pass to the php. When the page loaded it's shows only 3 image and when I clicked one of them It's shows the right image in the modal but when I click show more it shows 3 more and after when I clicked on the thumbnail it's stucked. I mean its shows only one picture doesn't matter which thumbnail i clicked so the ajax request not runs again. I hope you can understand the problem and can help me. (sorry for my English).

So here is the code:

This is the ajax calling function:

function ajaxShow(urls,datas,element){
    $.ajax({
        url: urls,
        data: {datas: datas},
        cache:true,
    }).always(function(result){
        console.log("done");
        element.html(result);
    });
}

And these are the click events:

$(document).ready(function(){
    //Open picture in modal
    var pic = $(".pics");
    var modalCont = $(".modal-content");

    pic.on('click',function(event){
        event.preventDefault();
        var id = $(this).attr('data-id');
        console.log(id);
        ajaxShow("../php/ajax_modal.php",id,modalCont);
    });

    //Load more
    var smbt = $(".smbt");
    var limit = $(smbt).data('loaded');

    smbt.on('click',function(event) {
        event.preventDefault();
        var cont = $("#cont");
        limit += 3;
        console.log(limit);
        ajaxShow("../php/show_more.php",limit,cont);
    });
});

In a nutshell: After I clicked on load more the modal open ajax request not run again.

Upvotes: 0

Views: 111

Answers (1)

Paweł Łukasik
Paweł Łukasik

Reputation: 4153

Use overloaded version of .on() on document node. 

$(document).on(events, selector, data, handler );

So your code should be rewritten as this:

$(document).on('click', '.pics', null, function (event) {   
    event.preventDefault();
    var id = $(this).attr('data-id');
    console.log(id);
    ajaxShow("../php/ajax_modal.php",id,modalCont);
});

and 

$(document).on('click', '.smbt', null, function (event) {
    event.preventDefault();
    var cont = $("#cont");
    limit += 3;
    console.log(limit);
    ajaxShow("../php/show_more.php",limit,cont);
});

Upvotes: 2

Related Questions