在JQuery中加载多个AJAX

我想在一个页面中加载多个AJAX页面。我发现this example，使2级装载，但我需要更多的女巫水平。在JQuery中加载多个AJAX

我是代码。在index.html我添加div加载级别3内容

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

在main.js我是克隆功能。和整个文件：

$(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); 
    }; 
});

而我做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>

在控制台中没有错误，但它不能正常工作。三级不加载。

来源

2011-08-29 skywind

'用ID ul'标签'menu'不存在！所以'汽车'变量将为null –

编号id =“菜单”在index.html文件中加载 - >比我加载“mazda_3.html＃m3-到”内容div，并希望加载“mazda_3.html＃m3- to-1“到content2 div。 – skywind

是否在'mazda_3.html'页面内指定了名称'＃m3-to-1'和'＃m3-to'。如果您尝试删除网址'/mazda/v2/js/mazda_3.html＃m3-to-2'和'/mazda/v2/js/mazda_3.html＃m3-to-1'的空白区域，则我会删除该空白区域。 –

使用live功能，点击通风口结合tos控制

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; 
    } 
});

来源

2011-08-29 12:12:59

在JQuery中加载多个AJAX

回答

相关问题