Append a php file with jquery

Question

i have a file which echoes out data from a database.

I wish to have a load more button which appends this file so that it will keep loading the rest of the results.

The php page works fine but need help with the jquery...

have used this else where for a json return but dont think this is needed for this.

So i am trying this:

$(document).ready(function(){
$("#loadmore").click(function () {
     $("#content").append('includes/loadmorebuilds.php');
});
});

In essence, this works but it appends 'includes/loadmorebuilds.php' as just that. I simply appends those words and not the file.

Any help on this?

Many thanks!

Solution 1

You could use $.ajax to get content from file to be appended into DOM. One important thing is that you should use Relative PATH to your web root on url parameter in $.ajax

So it will become like this

$('#loadmore').click(function() {
    $.ajax({
       url: '/relative/path/to/your/script',
       success: function(html) {
          $("#content").append(html);
       }
    });
});

And make sure you should be able to access your script on http://www.example.com/relative/path/to/your/script

Solution 2

You have two options:

$('#content').load('includes/loadmorebuilds.php');

Which will replace the content of #content with the new html.

Or this:

$.ajax({
    url: 'includes/loadmorebuilds.php'
}).done(function(data) {
    $('#content').append(data);
});

Which will append the new data.

Solution 3

use $.ajax

$(document).ready(function(){
        $(".loader").click(function(){

      $.ajax({
                url:"index.php",
                dataType:"html",
                type:'POST', 

                beforeSend: function(){
                },
                success:function(result){
                      $(".content").append(result);
                 },

        });
    });
    });