Question

I’m sure I’m missing something pretty basic, but I have just started to get myself up to speed on jQuery and Javascript programming. Previously I was doing server side programming with PHP.
I’m now in the middle of creating a prototype for HTML5 webapp, where I would like to have different screens. Now with PHP that was pretty easy, I could just used server side templates like Smarty and be done with it.

However to make my app more webapp like, I would like to dynamically change between screens without having to reload the window.

I have looked into several options that might be anwsers to my question, but I’m not sure whether I’m on the right track.

I have checked for example JsRender, JsViews or even the pure jquery load command.
But what I’m not sure is whether these things would allow me to have something like this:

HEADER_PART
MAIN_CONTENT
FOOTER_PART (also contains links to common JS files that I use)

I would like to dynamically update the MAIN_CONTENT part. Currently my application is only one page, and all my custom logic that belongs to that page is in one JS file. In this JS file, I use a simple $(function() { … to load my page, so whenever it gets loaded, parts of my page get updated asyncronously. This is fine, since all my blocks in this certain page would have to be loaded when that one page gets loaded.

But what if I have a link, like main.html#otherscreen, and when I click that screen, I would like to change my MAIN_CONTENT and also run another page load specific JS that handles blocks on that other screen, not the first page?

I know I could still use probably server side templating and load my pages using AJAX requrests, but again, not sure whether that is the right approach.

Could you please enlighten me? 🙂

Thanks & best regards,
Bence

Answer 1

Check out jQuery.load(). Using this function you can dynamically load content into a div on the page, which is what I think you want to do. Just find the div on the page you want to load content into and call

$('#mydiv').load(url, data, function(response){
    //do something once it's done.
});

---

Per your comments…

This is actually very easy. .load() should replace the content in the div (I think. If not, just call .empty() first). Of course you could get fancy and add effects, like

function changePages(url) {
    $('#mydiv').fadeOut('fast', function() { 
        $(this).load(url, function(response){
            $('#mydiv').fadeIn('fast');
        });
    });
}

To handle things like the hash in the URL, in your click event you have to make sure you first call e.preventDefault():

$('#mylink').click(function(e){ 
    e.preventDefault(); //e is a jquery event object
    var link = $(this);
    var hash = link.attr('href'); // get the hashtag if the href is '#something'
    changePages(someUrl + hash);
});