JQuery UI的页签组件中，使用AJAX方式加载页签内容时，每次都从服务器重新加载?
李小翔
2013-11-26 10:31

内容列表
问 	 # 
答 	 # 

问
    参考官方示例（http://jqueryui.com/tabs/#ajax），使用ajax方式直接加载页签内容时，每次点击页签都会重新从服务器加载一遍，如何才能让ajax内容的页签只加载一次呢？否则表单中填写尚未提交的内容会由于页签重新加载而丢失！
    示例代码如下：
<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8” />
<title>jQuery UI Tabs - Content via Ajax</title>
<link rel=”stylesheet” href=”http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css” />
<script src=”http://code.jquery.com/jquery-1.9.1.js”></script>
<script src=”http://code.jquery.com/ui/1.10.3/jquery-ui.js”></script>
<link rel=”stylesheet” href=”/resources/demos/style.css” />
<script>
$(function() { 
    $( ”#tabs” ).tabs();
} );
</script>
</head>
<body>
<div id=”tabs”>
  <ul>
    <li><a href=”#tabs-1”>Preloaded</a></li>
    <li><a href=”ajax/content1.html”>Tab 1</a></li>
    <li><a href=”ajax/content2.html”>Tab 2</a></li>
    <li><a href=”ajax/content3-slow.php”>Tab 3 (slow)</a></li>
    <li><a href=”ajax/content4-broken.php”>Tab 4 (broken)</a></li>
  </ul>
  <div id=”tabs-1”>
    <p>tabs-1</p>
  </div>
</div>
</body>
</html>

答
    JQuery UI 页签组件的机制就是这样的，每次点击页签时，会自动重新加载。
    但是参考其API文档，有事件 beforeLoad，并且可以在这个事件中取消ajax加载，借用该事件，即可实现ajax页签只加载一次的效果。
    修改后的javascript代码如下：
$(function() { 
    $( ”#tabs” ).tabs({ 
        beforeLoad: function( event, ui ) { 
          if ( ui.tab.data(”loaded”) ) return false;
           ui.tab.data(”loaded”, true);
        } 
    } );
} );