CODEWITHSUNDEEP
phpjavascriptjqueryajax
EnexoOnoma
EnexoOnoma

Reputation: 8836

Load pages using jQuery/Ajax in the same div that loads a page every 6 sec?

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

Upvotes: 3

Views: 2438

Answers (3)

Herbert
Herbert

Reputation: 5778

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.

Upvotes: 1

Jonathan Lonowski
Jonathan Lonowski

Reputation: 123473

Without interrupting the timeout cycle, the contact form will display for a maximum of 6 seconds inside #feed before the next $.load request finishes.

If you want to leave the timeout cycle going, rather than putting everything in #feed, you can give it an appropriate sibling:

<div id="panels">
    <div id="feed">
        <!-- ... -->
    </div>
    <div id="contact" style="display:none">
        <!-- ... -->
    </div>
</div>

Then, switch which is currently displaying:

$('a.contact').click(function (e) {
    e.preventDefault();

    $('#contact').show();
    $('#panels > div:not(#contact)').hide();
});

$('a.feed').click(function (e) {
    e.preventDefault();

    $('#feed').show();
    $('#panels > div:not(#feed)').hide();
});

The feed will continue to load into #feed, while the contact page can display uninterrupted.

Also, if you supply a clue on your links, you can combine those click handlers with fair ease:

<div id="menu">
    <a href="feed.php" data-panel="feed">Feed</a>
    <a href="contact.php" data-panel="contact">Contact</a>
</div>

<script>
$('#menu > a').click(function (e) {
    e.preventDefault();

    var panel = $(this).data('panel'); // or $(this).attr('data-panel') for jQuery 1.4 or older
    $('#' + panel).show();
    $('#panels > div:not(#' + panel + ')').hide();
});
</script>

Upvotes: 1

Ryan Tuosto
Ryan Tuosto

Reputation: 1951

You can load a file with $.load

$("#contactBtn").click(function() {
  $("#feed").load('contact.html') No need for a callback or the timeout.
}

Check the jquery docs if you're looking for something more specific. Hope that helps.

Upvotes: 0

Related Questions