How do I load a page fragment using jQuery?

Question

Hi Guys,

I have three pages

1) index.aspx
2) schools.aspx
3) Classes.aspx

All the pages has same div section in there pages. Please see below the common DIV section in all the pages, however text will be different for each page.

<div id="tab-container" class="tabs-container">
    <div class="contentContainer">
        <img width="275" height="220" title="" alt="" src="/99/english/images/fpoSquare.jpg" class="imgRight"></img>
        <p class="destinationSectionHeader first">About Sydney</p><p>Learn English at a Kaplan International Colleges English school! We offer a variety of English courses at over 40 English schools in some of the world's most desirable locations in the UK, Ireland, Australia, New Zealand, USA, Canada and Malta.From fashionable city centre schools to schools on the campuses of prestigious universities, you can take an English course at a Kaplan International Colleges school in the environment that best suits you. All of our English schools provide our students with easy access to great resources and the local area's best cultural, social and historic attractions.
Study in the world-famous Empire State Building in New York, in a beautiful 7-storey art deco building next to the famous Cathedral Square in Christchurch, on Santa Barbara City College's impressive campus, in a historic building in London or in the heart of Sydney. You can have a look at all our schools and English courses by browsing through our website - so take your time and choose the English school that's right for you.</p>
    </div>
</div>

Now on index page I have got links for other two pages (Schools.aspx and Classes.aspx), when user will click on those links it will show above section based on div id="tab-container" taken from those pages and will show in a div section of index page below.

<div id="contents"></div>

Please suggest how can I achieve this functionality using AJAX and JQuery. (It would be good have solution using AJAX)

Thanks!

Update:

All the above links (schools, classes etc) are coming from below html code

ul class="tabHead tabs-nav">
    <li class="tabLeftEnd"></li>
    <li class="tabs-selected" id="tab-1">
    <a class="load-fragment" href="/index.aspx"><span>Overview</span></a></li>
    <li id="tab-2">
    <a class="load-fragment" href="/schools.aspx"><span>Guide</span></a></li>
    <li id="tab-3">
    <a class="load-fragment" href="/classes.aspx"><span>Flight Schedule</span></a></li>
    <li id="tab-4">
    <a class="load-fragment" href="/specialOffers.aspx"><span>Special Offers</span></a></li>
    <li id="tab-5">
    <a class="load-fragment" href="/photo.aspx"><span>Photos</span></a></li>
    <li class="tabRightEnd"></li>
</ul>

If you see there is a class "tabs-selected" on selected li, I want this to be changed according to the link clicked in the code as suggested by " Marko Ivanovski"

Thanks again!

Answer 1

Using jQuery load() you can easily load page fragments.

Update
Let's set a class (you can change this to whatever) for every link that we want to load via ajax. This is a good approach because users without Javascript will just navigate to the pages.

HTML

<a href="Schools.aspx" class="load-fragment">Schools</a>
<a href="Classes.aspx" class="load-fragment">Classes</a>

jQuery

$(".load-fragment").click(function(e) {
    // Stop the browser from going to the page
    e.preventDefault();

    // add tabs-selected class for the selected item
    $(".tabs-nav li").removeClass("tabs-selected"); //remove selected from other tabs
    $(this).parent().addClass("tabs-selected");

    // store the href in a variable
    var href = $(this).attr('href'); // this is the clicked link's href attribute

    // load the data
    $("#contents").load(href + " #tab-container", function() {
        // perform some action when the content is loaded
        $(this).fadeIn('slow');

        // unsure if $(this) works with .load(), use the line below if it doesn't
        $("#contents").fadeIn('slow');        
    });
});

That's it :)