Question

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>

Answer 1

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 });
});