CODEWITHSUNDEEP
jqueryhtmlajaxrefresh
user1011589
user1011589

Reputation: 113

how to use jquery or ajax to refresh a div at 10 second intervals

Any help at all is appreciated here folks. I'm building a web app in php and I'm using the Yii MVC framework which has a lot of built in tools. Just as the title says, i need to refresh a div every 10 seconds. At the moment I have this ajax function

<script type="text/javascript">
    function ajaxFunction(){
    var ajaxRequest;  

    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
                var list = document.getElementById('logged_in_users_list');
        if(ajaxRequest.readyState == 4){
            list.innerHTML = ajaxRequest.responseText;
                        setTimeout('ajaxFunction()',10000);
        }
    }
    ajaxRequest.open("GET", "protected/controllers/room/openRoom", true);
    ajaxRequest.send(null);
}
</script>


<script type="text/javascript">
            setInterval(function() {ajaxFunction();}, 5000);
</script>

For those of you who are unfamiliar with Yii it stores most of your php files in a folder called protected. Well it is just that, the ajaxRequest.open line of code above is requesting that url which is stored inside the protected folder, so I keep getting an access forbidden 403 error. Any ideas how I could implement something different with jquery or get round this access problem?

Upvotes: 3

Views: 12067

Answers (3)

zeeshan
zeeshan

Reputation: 11

    // zisu.php

    <html>
    <head>
    <script type="text/javascript">
    var auto_refresh = setInterval(
           function ()
           {
           $('#div1').load('time.php');
           }, 10000);
    </script>
    </head>
    <body>
    <div id ="div1">
    <?php
    echo date("h:i:s A");
    ?>
    </div>
    </body>
    </html>


// time.php
    <?php
    echo date("h:i:s A");
    ?>

Upvotes: 1

The Alpha
The Alpha

Reputation: 146191

Usin jquery

$(function() {
    function callAjax(){
        $('#myDiv').load("http://yourdomain.com");
    }
    setInterval(callAjax, 5000 );
});

Upvotes: 6

Joseph
Joseph

Reputation: 119827

a rough equivalent to your code in jQuery is this:

//execute call immediately
(function check(){
    //a GET AJAX call
    $.get('protected/controllers/room/openRoom')
    .done(function(data){
        //when we receive, populate
        $('#logged_in_users_list').html(data);
    })
    .always(function(){
        //regardless of a fail or success, call again after 10 seconds
        setTimeout(check,10000);
    });
}());

and 403 will always be 403. that's the code that tells you that you are not allowed to enter that location (maybe you need authentication?)

Upvotes: 3

Related Questions