Multiple AJAX loading in JQuery

Question

I want to make multiple AJAX page loading in one. I found this example that makes 2 levels loadings, but i need more levels in witch.

I modyfy code. In index.html i'm add div to load level 3 content

<div id="content2">&nbsp;</div>

In main.js i'm clone function. and whole file:

    $(document).ready(function(){
    //References
    var cars = $("#menu li");
    var tos = $("#menu-to li");
    var loading = $("#loading");
    var content = $("#content");
    var content2 = $("#content2");

    //Manage click events
    cars.click(function(){
        //show the loading bar
        showLoading();
        //load selected section
        switch(this.id){
            case "m3":
                content.slideUp();
                content.load("/mazda/v2/js/mazda_3.html #m3-to", hideLoading);
                content.slideDown();
                break;
            case "news":
                content.slideUp();
                content.load("/mazda/v2/js/sections.html #section_news", hideLoading);
                content.slideDown();
                break;
            case "interviews":
                content.slideUp();
                content.load("/mazda/v2/js/sections.html #section_interviews", hideLoading);
                content.slideDown();
                break;
            case "external":
                content.slideUp();
                content.load("/mazda/v2/js/external.html", hideLoading);
                content.slideDown();
                break;
            default:
                //hide loading bar if there is no selected section
                hideLoading();
                break;
        }
    });

    tos.click(function(){
        //show the loading bar
        showLoading();
        //load selected section
        switch(this.id){
            case "m3_to_1":
                content2.slideUp();
                content2.load("/mazda/v2/js/mazda_3.html #m3-to-1", hideLoading);
                content2.slideDown();
                break;
            case "m3_to_2":
                content2.slideUp();
                content2.load("/mazda/v2/js/mazda_3.html #m3-to-2", hideLoading);
                content2.slideDown();
                break;
            default:
                //hide loading bar if there is no selected section
                hideLoading();
                break;
        }
    });

    //show loading bar
    function showLoading(){
        loading
            .css({visibility:"visible"})
            .css({opacity:"1"})
            .css({display:"block"})
        ;
    }
    //hide loading bar
    function hideLoading(){
        loading.fadeTo(1000, 0);
    };
});

And i'm make mazda_3.html

<div id="m3-to">
    <ul id="menu-to">
        <li id="m3_to_1">One</li>
        <li id="m3_to_2">Two</li>
    </ul>
    Level Two
</div>
<div id="m3-to-1">
    Level Three 1
</div>
<div id="m3-to-2">
    Level Three 2
</div>

No errors in console, but it's not work. Level three not loads.

ul tag with ID menu does not exist!! so cars variable will be null — Amir Ismail
– Amir Ismail, Commented Aug 29, 2011 at 10:08
No. id="menu" loaded in index.html file -> than i load "mazda_3.html #m3-to" to content div, and want load "mazda_3.html #m3-to-1" to content2 div. — skywind
– skywind, Commented Aug 29, 2011 at 10:38
did you specified the names #m3-to-1 and #m3-to inside mazda_3.html page. if you did try to remove the white space from url /mazda/v2/js/mazda_3.html #m3-to-2 and /mazda/v2/js/mazda_3.html #m3-to-1 — Amir Ismail
– Amir Ismail, Commented Aug 29, 2011 at 10:51

Amir Ismail · Accepted Answer · 2011-08-29 12:20:58Z

3

Use live function to bind click vents to tos controls

tos.live('click',function(){
    //show the loading bar
    showLoading();
    //load selected section
    switch(this.id){
        case "m3_to_1":
            content2.slideUp();
            content2.load("/mazda/v2/js/mazda_3.html #m3-to-1", hideLoading);
            content2.slideDown();
            break;
        case "m3_to_2":
            content2.slideUp();
            content2.load("/mazda/v2/js/mazda_3.html #m3-to-2", hideLoading);
            content2.slideDown();
            break;
        default:
            //hide loading bar if there is no selected section
            hideLoading();
            break;
    }
});

edited Aug 29, 2011 at 12:20

answered Aug 29, 2011 at 12:12

Amir Ismail

3,8713 gold badges22 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Multiple AJAX loading in JQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related