CODEWITHSUNDEEP
phpjqueryhtmlajax
Swaroop Nagendra
Swaroop Nagendra

Reputation: 605

Including or appending many php pages using jquery and ajax

I have a page with a div tag like this

<div class="ajax-load">

<!-- First.php: jquery-slider-1
            jquery-widget-1

    second.php: jquery-slider-2
                jquery-widget-2
 -->

</div>

And a button like this

<button class="go-to-page-2">

When I click the button with class go-to-page2 I need to load some php pages say four.php and five.php into or inside the div with class ajax-load.

Using plain markup, I can easily place it like this

<?php
    require_once("four.php");
    require_once("five.php");
?>

But I do not want this. I want to load contents into the div using ajax. I tried this:

 $(".ajax-load").load("4.php")

But cant load or append 5.php using this. How to overcome this? I am ready to use $.get and $.post

Upvotes: 0

Views: 112

Answers (3)

hvgeertruy
hvgeertruy

Reputation: 190

Use $.get instead.

$.get('4.php', function(data) {
$('.ajax-load').prepend(data); //ensure this is appended before 5.php
});
$.get('5.php', function(data) {
$('.ajax-load').append(data); //ensure this is appended after 4.php
});

it's not perfect, though. It will execute as two separate async ajax requests. You can use $.Deferred for that, or use a ajax callback (see w00d's answer).

Upvotes: 0

Marc B
Marc B

Reputation: 360882

.load() replaces the contents of the target element with whatever you loaded. You'd need to load page4, then APPEND page5, e.g.

$(".ajax-load").load("4.php");
$.get('5.php', function(data) {
   $('.ajax-load').innerHTML += data;
});

As well, note that since this will involve TWO separate http requests, there is NO guarantee as to which of the two requests will come back first. If loading 4.php before 5.php is absolutely critical, you'll have to chain the requests to so that the request for 5.php goes out only after 4.php has completed.

Upvotes: 1

w00d
w00d

Reputation: 5606

You can just $.get and append to the html

$.get('5.php', function(data) {
  $('.ajax-load').append(data);
});

If you want 4.php to load first, do the two of them in a nested way:

$.get('4.php', function(data) {... $.get('5.php', ...) })

Upvotes: 3

Related Questions