Can jQuery load and replace an entire webpage (similar to iframe)?

1 Views

This is website that I’ll use as an example: http://templatic.com/demos/geoplaces4/

When the user selects their city, is it possible for jQuery to fade away the existing page and load in the next page, without actually refreshing the browser? I suppose this would be similar to how Facebook’s new responsive links work.

Read More

I just don’t know where to start on this and I can’t seem to find any information it, so any links/resources/tips are much appreciated.

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. You can’t replace the entire document in place, nor would that really make much sense. If you’re swapping the entire document it’s really no different than just reloading the page or loading a new one.

    You can however replace the top most document element – which is body and then modify headers of the document to generally simulate the same behavior though, but you’d have to manually manage what gets updated (ie. manage the scripts and css loaded etc.)

    Typical apps that do ‘page’ swapping tend to use a single page frame and then swap the main portion of the document in or out – the headers stay the same and only key headers are manipulated. This is the basic concept behind Single Page Applications (SPA).

  2. You’ve already got your document divided into roughly 2 partitions that stay relatively fixed between your city-picker and your map display page. So you could individually AJAX in new contents for both of them. Why does the whole document need to be replaced? I realize that approach would be the easiest to match up with your given framework, but I guarantee you that’s not what Facebook is doing.

    The approach behind a single page app of this type would be something like this:

    Html

    <body><!-- with a solid background color -->
    <div id="main-content">
        <header>
        </header>
        <div id="city-picker">
             <!-- city picker stuff here -->
        </div>
    </div>
 </body>

    Javascript

    // inside On click/on select handler for your city picker
// Animate the fade-out of your first page
$('#main-content').hide(2000).html('')
    .load('ajax/city-map.php?theCity='+selectedValue).show(2000);

    That’s basically it – 2 second fade out where just the solid background of the <body> tag is shown, use .load to fetch the html of the new document into the main-content div, and a 2 second fade back in.

    That kind of relies on an instantaneous AJAX request, which is clearly impossible. The right thing to do would be to fade it back in from the .load complete function callback. Check the docs on .load for details on using the callback. You could go even more advanced and start the ajax before starting the fade out, so the request is going while the user is watching the content fade. But that should be enough to get you started.

    One other thing to watch out for is that .load is basically calling $('#main-content').html(data), where data is the entire response returned by the AJAX requested URL. So it is improper and will likely break the user experience if you return a fully formatted html doc with a doctype, , and tags.