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!

You're now appending #content with the string 'includes/loadmorebuilds.php'. If you want to fetch the file itself I'd suggest you use .load() to fetch the file asynchronously — Joren
– Joren, Commented Oct 3, 2013 at 21:44

pveyes · Accepted Answer · 2013-10-03 22:12:34Z

6

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

answered Oct 3, 2013 at 22:12

pveyes

4233 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

craig Over a year ago

This amongst others works. However it only works if i change my loaded file to something simple e.g. a php echo with a word. Its not working my query etc on it... anything i need to change?

pveyes Over a year ago

try using var_dump(); on query result then exit; and see what you got. Your query might be returning NULL values or there's an error on your code. You could access the script directly via URL or AJAX calls.

craig Over a year ago

the thing is, if i try do a simple php include of the file then everything loads fine... :/

Jason P · Accepted Answer · 2013-10-03 21:45:17Z

3

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.

answered Oct 3, 2013 at 21:45

Jason P

27k3 gold badges34 silver badges45 bronze badges

Comments

Osama Jetawe · Accepted Answer · 2016-07-17 13:15:15Z

2

use $.ajax

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

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

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

        });
    });
    });

edited Jul 17, 2016 at 13:15

answered Oct 3, 2013 at 21:49

Osama Jetawe

2,7057 gold badges27 silver badges45 bronze badges

Collectives™ on Stack Overflow

Append a php file with jquery

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related