CODEWITHSUNDEEP
jqueryrefresh
Stuart Sloan
Stuart Sloan

Reputation: 145

Refresh Div on page load then auto refresh every X seconds

I have a div that I would like to refresh on page load then auto refresh every 60 seconds after. I have it set now to refresh every 60 seconds but I don't know how to combine that with the first page load. Here is the whole php page:

<script>
$(document).ready(function () {
    var notify = $("#notify");
    notify.hide();
    notify.click(function(event) {
        // Handle the click on the notify div so the document click doesn't close it
        event.stopPropagation();
    });

    var count = $("#count");
    var notifyLink = $("#notify_link");

    count.click(showNotification);
    notifyLink.click(showNotification);

    function showNotification(event) {
        $(this).unbind('click', showNotification);

        $(this).addClass("selected");
        loadData();

        notify.show();

        $(document).click(hideNotification);

        // So the document doesn't immediately handle this same click event
        event.stopPropagation();
    };

    function hideNotification(event) {
        $(document).unbind('click', hideNotification);

        notify.hide();
        notifyLink.removeClass("selected");
        count.removeClass("selected");

        notifyLink.click(showNotification);
        count.click(showNotification);
    }

    count.load(
        "<?php echo $vars['url']; ?>mod/notifications/ajax/livenum.php"
    );
    $.ajaxSetup({ cache: false });

    var refreshId = setInterval(function () {
        count.load(
            "<?php echo $vars['url']; ?>mod/notifications/ajax/livenum.php"
        );
    }, 60000);
    $.ajaxSetup({ cache: false });
});

function loadData() {
    $('#loader').html(
        '<?php echo elgg_view('ajax/loader',array('slashes' => true)); ?>'
    );
    $("#result").load(
        "<?php echo $vars['url']; ?>mod/notifications/ajax/data.php",
        function () {
            $('#loader').empty(); // remove the loading gif
        }
    );
}

</script>

Upvotes: 0

Views: 2667

Answers (3)

jholloman
jholloman

Reputation: 1979

On page load do it once, and then do your setInterval.

function loadCount() {
    count.load(
            "<?php echo $vars['url']; ?>mod/notifications/ajax/livenum.php"
    );
}

$(function () {
    var refreshId = setInterval( function () {
            loadCount();
        }, 60000);
    $.ajaxSetup({ cache: false });
}

Edited based on suggestion to make the code more maintainable.

Upvotes: 2

Rupo
Rupo

Reputation: 402

Just call the

count.load( "<?php echo $vars['url']; ?>mod/notifications/ajax/livenum.php" );

on the page load. With jQuery you could do something like this (put the code in a function, as Anthony pointed out):

$(function() {
    function loadCount() {
        count.load(
            "<?php echo $vars['url']; ?>mod/notifications/ajax/livenum.php"
        );
    }

    // Load on page load (call the function loadCount):
    loadCount()

    // Set the refresh interval and call the function loadCount every 60 seconds):
    var refreshId = setInterval(loadCount, 60000);
    $.ajaxSetup({ cache: false });
});

Upvotes: 1

Sherwin Yu
Sherwin Yu

Reputation: 3230

Your approach is correct -- using setInterval should work as expected. I wrote a quick test that just uses console.log() and it works. But I think your error is in your .load() function in loadData() -- you aren't using double quotes so '<?php echo elgg_view('ajax/loader',array('slashes' => true)); ?>' gets interpreted as three separate strings. What you want is "<?php echo elgg_view('ajax/loader',array('slashes' => true)); ?>" (surrounded by double quotes).

Upvotes: -1

Related Questions