How to have 2 Ajax Calls for 2 different PHP files?

Question

I'm having 3 php files, first one is posts.php ,inside this file some PHP code and here's the javascript and AJAX code:

<script type="text/javascript">
$(document).ready(function(){
 $("table").on('click','a',function() {

        var ID = $(this).attr("id");
        $.ajax({
        type: 'POST',
        cache: false,
        url: 'posts_info.php',
        data: {id:ID},
        success: function(html){

            $("#more"+ID).before(html);
            alert('this is the info');
            }
        });

    });

$('#content').on('click','.more',function( event){

    var ID = $(this).attr("id");
    if(ID)
    {
        $("#loader").show();
        $.ajax({
        type: 'POST',
        url: 'posts_load.php',
        data: {id:ID},
        cache: false,
        success: function(html){
            $("#loader").hide();
            $("#more"+ID).before(html);
            $("#more"+ID).remove();
            alert('this is moreee posts');

            }
        });

    }

    }); 

});

</script> 

The first ajax call happends when the user clicks on an image.The second when the user clicks on a hyperlink "more". Each of the posts.info file and posts_load file loads different content When the user clicks on the image the content from the posts_info is displayed successfully.Also, when the user then clicks on the more link the content of the posts_load is displayed successfully.The problem is when the user clicks on more , posts_load.php is loaded.However after that when the user clicks on the image , nothing is displayed from " posts_info.php ". The call is made successfully till the alert part however nothing is displayed.Any help?

Answer 1

problem is when the user clicks on more ,posts_load.php is loaded.However after that when the user clicks on the image , nothing is displayed from "posts_info.php".The call is made successfully till the alert part however nothing is displayed

As i can see your code may be problem is this:

When you click on Image, In second ajax call you are removing element:

$("#more"+ID).remove();

Then you are adding when click on a

$("#more"+ID).before(html);

Its not adding response content because element is already removed from DOM .