CODEWITHSUNDEEP
phpjavascriptajax
Deepali
Deepali

Reputation: 23

Loading a part of page after remaining page contents are loaded

I have a html page which have many PHP include statements. One of them takes a longer time to load. But I want remaining elements getting loaded earlier than that, but want to maintain the sequence

index.php
<div id="a1">
 <?  include('a.php'); ?>
</div>
<div id="b1">
 <?  include('b.php'); ?>
</div>
<div id="c1">
 <?  include('c.php'); ?>
</div>

I want the same sequence to be maintained. b.php takes a longer time to load affecting the whole page getting loaded lately. I want to load a.php and c.php first and then make b.php load later. How can I use AJAX to do the same?

Upvotes: 2

Views: 1925

Answers (5)

DevZer0
DevZer0

Reputation: 13525

You can use jQuery .load() to load the other page into your html page

<div id="a1">
<?  include('a.php'); ?>
</div>
<div id="b1">

</div>
<div id="c1">
 <?  include('c.php'); ?>
</div>

 <script type='text/javascript'>
  $(document).ready(function (e) {
        $('#b1').load('/path/to/b.php');
   });
 </script>

Upvotes: 1

bystwn22
bystwn22

Reputation: 1794

<script type="text/javascript">
  $(function() {
    $('#a1').load( 'a.php', function() {
      $('#c1').load( 'c.php', function() {
        $('#b1').load( 'b.php' );
      });
    });
  });
</script>

Upvotes: 0

Jay Harris
Jay Harris

Reputation: 4271

index.php

<div id="a1"> </div>
<div id="b1"> </div>
<div id="c1"> </div>


 <script>
 (function() {
 function ajax(location, element){
   var xhr = new XMLHttpRequest();
   xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
       element.innerHTML = xhr.responseText;
       return true;
    };
   }

  xhr.open("GET", location, true);
  xhr.send();   
  }
  if(true) {
    var a = document.getElementById('a1');
    var b = document.getElementById('b1');
    var c = document.getElementById('c1');
    if(ajax('/a.php', a) && ajax('/c.php', c)) {
      ajax('/b.php', b);
    }
  } 
  })();
</script>

Upvotes: 0

anwar
anwar

Reputation: 408

<? 
$a=false;
$b=false;
$c=false;
?>
<div id="a1">
<? $a = include('a.php'); ?>
</div>
<div id="c1">
<? $c = include('c.php'); ?>
</div>

<? if ( $a && $c) { ?>
<div id="b1">
<? include('b.php'); ?>
</div>
<? } ?>

then use javascript if you want specific positioning

Upvotes: 0

Amit Garg
Amit Garg

Reputation: 3907

<script>
    $(function(){
        $('#a1').load('a.php');
        $('#b1').load('b.php');
        $('#c1').load('c.php');
    });
</script>
<div id="a1">
 <?  include('a.php'); ?>
</div>
<div id="b1">
 <?  include('b.php'); ?>
</div>
<div id="c1">
 <?  include('c.php'); ?>
</div>

Include jquery.js withing your script if it is not there. Before the

Upvotes: 0

Related Questions