Question

I’m looking for a way to use jQuery with a script index.php that is built bit-by-bit using a template engine, like so:

<?php

global $template;

page_header(); // Calls and displays header.html
$template->load('body', 'index.html'); // Loads index.html and calls it 'body'
   *Code that assigns values to variables in index.html*
$template->display('body'); // Displays index.html
page_footer(); // Calls and displays footer.html
?>

where each line does as commented.

I want to build a function using jQuery that autorefreshes index.php, but only the ‘body’ part. I can’t find any documentation on doing that, but I’ve looked at the following code:

function update() {
  $("#notice_div").html('Loading..'); 
  $.ajax({
    type: 'GET',
    url: 'index.php',
    timeout: 2000,
    success: function(data) {
      $("#current_game").html(data);
      $("#notice_div").html(''); 
      window.setTimeout(update, 10000);
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      $("#notice_div").html('Timeout contacting server..');
      window.setTimeout(update, 60000);
    }
});
};

But it gets really messy when this is in the header, because it calls the whole index.php page which nests the header, so we have a header in a header. Any suggestions?

Answer 1

simplest solution would be to send a get variable;

function update() {
    $("#notice_div").html('Loading..'); 
    $.ajax({
        type: 'GET',
        url: 'index.php',
        data: 'ajax=true',
     ...
}

and in your php file do something like:

if($_GET['ajax'] == 'true') {
    // don't print header, but other stuff
} else {
    // print header
}

if you’re using a framework it might have some intelligent functions to automatically determine if it’s a xhttp request or a normal request. It is generally done by examening the headers