Обновить Div при загрузке страницы, затем автоматически обновлять каждые X секунд

Question

У меня есть div, который я хотел бы обновить при загрузке страницы, а затем автоматически обновлять каждые 60 секунд. У меня сейчас настроено обновление каждые 60 секунд, но я не знаю, как совместить это с загрузкой первой страницы. Вот вся страница php:

<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

При загрузке страницы сделайте это один раз, а затем сделайте ваш setInterval.

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

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

Отредактировано на основе предложения сделать код более понятным.

Answer 2

Просто вызовите

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

при загрузке страницы.С jQuery вы можете сделать что-то вроде этого (поместить код в функцию, как указал Энтони):

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

Answer 3

Ваш подход правильный - использование setInterval должно работать как положено.Я написал быстрый тест, который просто использует console.log (), и он работает.Но я думаю, что ваша ошибка в функции .load () в loadData () - вы не используете двойные кавычки, поэтому '<?php echo elgg_view('ajax/loader',array('slashes' => true)); ?>' интерпретируется как три отдельные строки.То, что вы хотите, это "<?php echo elgg_view('ajax/loader',array('slashes' => true)); ?>" (в двойных кавычках).