CODEWITHSUNDEEP
javascripthtmlajax
mujahid
mujahid

Reputation: 701

How to reload, a part of a webpage after a given time?

What i want to do is, to show a message based on certain condition. So, i will read the database after a given time continuously, and accordingly, show the message to the user. But i want the message, to be updated only on a part of the page(lets say a DIV).

Any help would be appreciated ! Thanks !

Upvotes: 3

Views: 1354

Answers (4)

Frederik.L
Frederik.L

Reputation: 5620

I'm not suggesting that my method is the best, but what I generally do to deal with dynamic stuff that needs access to the database is the following method :

1- A server-side script that gets a message according to a given context, let's call it "contextmsg.php".

<?php
$ctx = intval($_POST["ctx"]);
$msg = getMessageFromDatabase($ctx); // get the message according to $ctx number
echo $msg;
?>

2- in your client-side page, with jquery :

var DIV_ID = "div-message";
var INTERVAL_IN_SECONDS = 5;

setInterval(function() {
    updateMessage(currentContext)
}, INTERVAL_IN_SECONDS*1000);

function updateMessage(ctx) {
    _e(DIV_ID).innerHTML = getMessage(ctx);
}

function getMessage(ctx) {
    var msg = null;
    $.ajax({
        type: "post",
        url: "contextmsg.php",
        data: {
            "ctx": ctx
        },
        success: function(data) {
            msg = data.responseText;
        },
        dataType: "json"
    });
    return msg;
}

function _e(id) {
    return document.getElementById(id);
}

Hope this helps :)

Upvotes: 0

Curtis
Curtis

Reputation: 103418

This is possible using setInterval() and jQuery.load()

The below example will refresh a div with ID result with the content of another file every 5 seconds:

setInterval(function(){
   $('#result').load('test.html');
}, 5000);

Upvotes: 2

Barry Jordan
Barry Jordan

Reputation: 2706

You can use setInterval if you want to make the request for content periodically and update the contents of your DIV with the AJAX response e.g.

setInterval(makeRequestAndPopulateDiv, "5000"); // 5 seconds

The setInterval() method will continue calling the function until clearInterval() is called.

If you are using a JS library you can update the DIV very easily e.g. in Prototype you can use replace on your div e.g.

$('yourDiv').replace('your new content');

Upvotes: 0

Vikas Naranje
Vikas Naranje

Reputation: 2402

You need a ajax solution if you want to load data from your database and show it on your currently loaded page without page loading.

<script type="text/javascript" language="javascript" src="  JQUERY LIBRARY FILE PATH"></script>
<script type="text/javascript" language="javascript">
    var init;
    $(document).ready(function(){
        init = window.setInterval('call()',5000);// 5000 is milisecond
    });

    function call(){
        $.ajax({
            url:'your server file name',
            type:'post',
            dataType:'html',
            success:function(msg){
                $('div#xyz').html(msg);// #xyz id of your div in which you want place result
            },
            error:function(){
                alert('Error in loading...');
            }
        });
    }
</script>

Upvotes: 0

Related Questions