CODEWITHSUNDEEP
javascriptjqueryhtml
Mateusz Rogulski
Mateusz Rogulski

Reputation: 7455

How to display multiple contents without reloading?

I'm developing some webpage which based on html5. On my page I want to have some nav and container with selected content. But I don't want reload page after click on menu position.

At first I thought about placed whole content on site, hide some of them and show after click.

very simple example of this

But there are a lot of content which is hidden and I'm not sure is this a good idea.

Then I think about include a content from .html files by javascript and placed them on site, but my little research tells me this is very bad practice. Some article.

Also this is small, and simple page and I don't want to use any backend technologies.

So, my question is: What is the best practise for doing this?

Any help would be appreciated.

Upvotes: 0

Views: 246

Answers (1)

Dom
Dom

Reputation: 40491

I am not sure what the best way is but I recommend using jQuery's .load() along with jQuery's .ajaxSetup().

First, use .ajaxSetup() so you can cache future ajax requests.

$.ajaxSetup({
    cache: true
});

Then, bind a .click() event that uses .load().

Here is the code from my example...

HTML:

<ul id="nav">
    <li id="first">first</li>
    <li id="second">second</li>
    <li id="last">last</li>
</ul>
<ul id="contents">
    <li id="content1">first</li>
    <li id="content2">second</li>
    <li id="content3">last</li>
</ul>

JAVASCRIPT:

$(document).ready(function(){
    $.ajaxSetup({
        cache: true
    });

    $('#nav>li').click(function(){
       var url = 7;
       index = $(this).index();
        url += index;
       $('#content' + (index + 1)).load('http://fiddle.jshell.net/dirtyd77/jUEEd/' + url + '/show/');
    });   
});

DEMO: http://jsfiddle.net/dirtyd77/jUEEd/13/

Hope this helps and let me know if you have any questions!

Upvotes: 1

Related Questions