Question

On my index.php I have a header, sidebar, footer and the main part of it is the <div id="feed"> that loads engine.php every 6000 ms.

I have a Contact page ( contact.php ) in my sidebar. Instead of copying my index.php to a new page, with header, sidebar, footer and a main div for the contact content, can I load it in the #feed div of index.php withour refreshing the site in the browser?

To summarize it, my question is, is there any way that my pages to be loaded on the same div ( #feed) without refresh and freeze the setTimeout timer?

When the user click back on Home, then the engine.php is loaded and reloaded every 6 seconds.

Maybe this can be done with Ajax, I don’t know…

Thank you for this and any examples/codes are highly appreciated.

<script language="JavaScript">
$(function () {
    function loadfeed() {
        $('#feed')
            .addClass('loading')
            .load('engine.php', function () {
                $(this).removeClass('loading');
                setTimeout(loadfeed, 6000);
        });
    }

    loadfeed();
});
</script>

Update

Having something like this works, but the engine.php loads after 6 sec.

$("#contactBtn").click(function() {
  $("#feed").load('contact.php');
});

Answer 1

I have no way of fully testing this, but you try something like this.

<script language="JavaScript">
var timerID;

$(function () {
    function loadfeed() {
        $('#feed')
            .addClass('loading')
            .load('engine.php', function () {
                $(this).removeClass('loading');
                timerID = setTimeout(loadfeed, 6000);
        });
    }

    $("#contactBtn").click(function() {
        clearTimeout(timerID);
        $("#feed").load('contact.php');
        $("#feedBtn").bind('click', loadfeed);
    });

    loadfeed();
});
</script>

The key here is the use of a global timerID variable and the clearTimeout() function.

If this works, you can include a Return to feeds button with id="feedBtn" in contact.php, but you’ll have to bind the loadfeed function to the button’s click event after loading it.