Loading Page Fragments on main page using Jquery

Question

Hi Guys,

I am trying to use Jquery to resolve my below issue.

I have got below HTML Links.

<ul class="tabHead tabs-nav"> 
    <li class="tabs-selected" id="tab-1">
    <a id="tab1" class="load-fragment" href="/index.aspx"><span>Overview</span></a>
    </li>
    <li id="tab-2">
    <a id="tab2" class="load-fragment" href="/guide.aspx"><span>Guide</span></a>
    </li>
    <li id="tab-3">
    <a id="tab3" href="/flightschedule.aspx"><span>Flight Schedule</span></a>
    </li>
    <li id="tab-4">
    <a id="tab4" href="/specialOffers.aspx"><span>Special Offers</span></a>
    </li>
    <li id="tab-5">
    <a id="tab5" class="load-fragment" href="/photo.aspx"><span>Photos</span></a>
    </li>   
</ul>

First of all above HTML is generated dynamically, I have written a jquery on class="load-fragment", please see below

$(document).ready(function() 
{
        $(".load-fragment").each(function() 
        {           
            var fname = $(this).attr('href');
            var lastSlash = fname.lastIndexOf('/');
            var fileName = fname.substring(lastSlash+1, fname.lastIndexOf('.aspx')); //taking out filename for adding it in dynamic DIVs

            var dynDivID = "divContent"+fileName;
            $(this).attr("id",fileName)

            var newDiv = $("<div>").attr("id",dynDivID).load(fname + " #tabs-container",function ()
            {               
                $(this).hide();

            });      
            $("#column2").append(newDiv); //adding new div in div column2  
        });    

        $("#tab1").click(function()
        {
            // load home page on click
            $(this).attr("href", "#");
            $(".tabs-nav li").removeClass("tabs-selected"); //remove selected from other tabs
            $(this).parent().addClass("tabs-selected");
            $("#divContentindex").show();
            $("#tabs-container").hide();
            $("#divContentguide").hide();
            $("#divContentphoto").hide();
        });
        $("#tab2").click(function()
        {
            // load about page on click
            $(this).attr("href", "#");
            $(".tabs-nav li").removeClass("tabs-selected"); //remove selected from other tabs
            $(this).parent().addClass("tabs-selected");  
            $("#divContentguide").show();
            $("#tabs-container").hide();
            $("#divContentindex").hide();
            $("#divContentphoto").hide();
        });
        $("#tab5").click(function()
        {
            // load about page on click
            $(this).attr("href", "#");
            $(".tabs-nav li").removeClass("tabs-selected"); //remove selected from other tabs
            $(this).parent().addClass("tabs-selected"); 
            $("#divContentphoto").show();
            $("#tabs-container").hide();
            $("#divContentguide").hide();
            $("#divContentindex").hide();
        });

}); 

If you see above code, i have added the dynamic divs (divContentindex,divContentguide,divContentphoto) to DIV "column2", I want to avoide the below code written above for hide and show for dynamic DIVs, I want it should also work as dynamic, there should not be any harcoded DIV ID as these ID are created dynamic above.

Please suggest!

Thanks.

Best Regards, MS

Answer 1

Replace

var lastSlash = fname.lastIndexOf('/');
var fileName = fname.substring(lastSlash+1, fname.lastIndexOf('.aspx')); // ...
var dynDivID = "divContent"+fileName;
$(this).attr("id",fileName)

By

var dynDivID = "divContent"+$(this).attr('id');

Add newDiv.addClass('dynDiv'); before $("#column2").append(newDiv);

And replace all

$("#tabX").click(function() { ... });

By

$(".load-fragment").click(function() {
    // load about page on click
    var thiz = $(this);
    thiz.attr("href", "#");
    $(".tabs-nav li").removeClass("tabs-selected"); // ...
    thiz.parent().addClass("tabs-selected");
    $('.dynDiv').hide();
    $("#divContent" + thiz.attr("id")).show();
}

Should do the job (not tested)

Edited according to comment

Answer 2

Short form:

$(document).delegate('.tabs-nav li a.load-fragment', 'mouseenter', function (ev) {
    var _link = $(this),
        _div = _link.data('dynDiv');
    if (_div) return;
    var newDiv = $('<div>').hide()
        .addClass('dynamic')
        .load(_link.attr('href')+' #tabs-container', function () {
            var onLoad = _link.data('dynOnLoad');
            if (onLoad) onLoad(this);
            _link.data('dynLoaded', true);
        })
        .appendTo('#column2');
    _link.data('dynDiv', newDiv);
});
$(document).delegate('.tabs-nav li a.load-fragment', 'click', function (ev) {
    var _link = $(this),
        _div = _link.data('dynDiv'),
        onLoad = function () {
            $('#column2 .dynamic').hide();
            _div.show();
        };
    if (!_link.data('dynLoaded')) _link.data('dynOnLoad', onLoad);
    else  onLoad();
});

I went with the load on mouseenter because it's a trade off between front-loading on dom ready (which can hinder page load time) and loading on click (which can hinder the user experience). Predictvely loading on the mouseenter gets you most of both worlds, and $(document).delegate lets you put the script in the head, so you can live without the flash of unbehaviored content. It does require a little inter-event communication to avoid displaying the content before it's potentially ready, but what's a little .data() between friends?