Tuesday, February 19, 2013

Only update a div in HTML

Below is the example to only update one div in HTML USING JS timing function setInterval
 Part 1: using ajax and jquery to update content posted from test.php
Part 2: Only use Javascript
<!-- Part 1 For ease i'm just using a JQuery version hosted by JQuery- you can download any version and link to it locally -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
var cacheData;
var data = $('#bottom-bar').html();
var auto_refresh = setInterval(
function ()
        url: 'test.php',
        type: 'POST',
        data: data,
        dataType: 'html',
        success: function(data) {
            if (data !== cacheData){
                //data has changed (or it's the first call), save new cache data and update div
                cacheData = data;
}, 300); // check every 30000 milliseconds
<!-- Part 2 Only using Javascript-->
            <script langauge="javascript">
                var counter = 0;
                window.setInterval("refreshDiv()", 500);
                function refreshDiv(){
                    counter = counter + 1;
                    document.getElementById("test").innerHTML = "Testing " + counter;

<div id="bottom-bar">test

            <div id="test">
            <div id="staticBlock">
                This is a static block

echo "Hello World <br />";
$counter = rand();
echo $counter;


No comments:

Post a Comment