jQuery 选项卡 - 在 ajax 加载期间在容器 div 中显示指示器答案

【问题标题】：jQuery tabs - Display indicator in the container div during ajax loadjQuery 选项卡 - 在 ajax 加载期间在容器 div 中显示指示器
【发布时间】：2012-02-15 05:45:40
【问题描述】：

jQuery 1.7.1，jQuery UI 选项卡。我有以下 HTML 表示选项卡，

<div id="tabs">
    <ul>
        <li><a href="t1" title="content">Gallery</a></li>
        <li><a href="t2" title="content">Polls</a></li>
        <li><a href="t3" title="content">Events</a></li>
    </ul>
<div id="content"></div>
</div>

当我单击或选择选项卡时，我需要在“内容”div 容器中显示一个指示器。我尝试了以下，

HTML

<div id="content"><img id="ind" src="images/indicator.gif" 
alt="Loading..." style="display:none"/></div>

JavaScript

$.ajaxSetup({
cache:false,
beforeSend: function() {
   $('#ind').show()
},
complete: function(){
   $('#ind').hide()
},
success: function() {}
});

这与以下选项卡选择代码一起使用，我执行该代码以在页面加载时选择默认选项卡，

var $tabs = $('#tabs').tabs();
$tabs.tabs('select', 1);

但是，每当我单击选项卡时，指示器都不会显示。知道为什么吗？

【问题讨论】：

标签： jquery jquery-ui jquery-ui-tabs

【解决方案1】：

您没有在选项卡选择中调用任何 ajax。

如果您通过 ajax 调用选项卡内容，则会显示该指示器。

我已经用小例子对此进行了测试，添加在下面。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Load Demo</title>
<link rel="stylesheet" href="demos.css">
<link rel="stylesheet" href="jquery.ui.tabs.css">

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.ui.core.js"></script>
<script type="text/javascript" src="jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery.ui.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $.ajaxSetup({
    cache:false,
    beforeSend: function() {
       $('#ind').show()
    },
    complete: function(){
       $('#ind').hide()
    },
    success: function() {}
    }); 

    $( "#tabs" ).tabs({
        ajaxOptions: {
            error: function( xhr, status, index, anchor ) {
                $( anchor.hash ).html(
                    "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                    "If this wouldn't be a demo." );
            }
        }
    });

});
</script>
</head>

<body>
<div id="content" style="border:1px solid red"><img id="ind" src="images/indicator.gif" alt="Loading..." style="display:none"/></div>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Preloaded</a></li>
        <li><a href="load.php?url=http://www.google.com">Tab 1</a></li>
        <li><a href="load.php?url=http://www.yahoo.com">Tab 2</a></li>
        <li><a href="load.php?url=http://www.msn.com">Tab 3 (slow)</a></li>
        <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
    </ul>
    <div id="tabs-1">
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
    </div>
</div>

</body>
</html>

带有额外 JQuery 插件的新代码

<!DOCTYPE html>
<html lang="en">
<!--

  Created using /
  Source can be edited via /iwajir/8/edit

-->
<head>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script class="jsbin" src="http://malsup.github.com/jquery.blockUI.js"></script>

    <meta charset="utf-8">
    <title>jQuery UI Tabs - Content via Ajax</title>
    <script>
    $.ajaxSetup({
        cache:false,
        beforeSend: function() {
             $('#content').block({ 
              message: '<img id="ind" src="images/indicator.gif" alt="Loading..." style="border: 1px solid red"/>', 
                css: { 
                        width: '100%', 
                        width: '100%', 
                        padding: '5px', 
                        backgroundColor: '#FFF', 
                        '-webkit-border-radius': '10px', 
                        '-moz-border-radius': '10px', 
                        color: '#000' 
                  } 
            }); 
        },
        complete: function(){

        },
            success: function() {}
        }); 

    $(function() {
        $( "#tabs" ).tabs({
            ajaxOptions: {
                success:function()
                {
                    $('#content').unblock(); 
                },
                error: function( xhr, status, index, anchor ) {
                    $( anchor.hash ).html(
                        "Couldn't load this tab. We'll try to fix this as soon as possible. " + "If this wouldn't be a demo." );
                }
            }
        });



    });
    </script>
</head>
<body>
<div id="tabs" style="position:relative">
    <ul>
        <li><a href="http://jsbin.com/ewoyos/2" title="content">Tab 1</a></li>
        <li><a href="http://jsbin.com/imakug/3" title="content">Tab 2</a></li>
        <li><a href="http://jsbin.com/ayocul" title="content">Tab 3</a></li>
    </ul>
    <div id="content" style="border: 1px solid red"></div>
</div>


</body>
</html>

【讨论】：

我使用 id 为 'content' 的 div 作为加载 ajax 内容的容器。请检查[这个] (jqueryui.com/demos/tabs/#ajax)。我想在选项卡下方的容器 div (id - content) 中显示指示器。我的锚标记 href 指向 struts 操作名称，当单击选项卡时，ajax 请求进入服务器并且响应内容被加载到“内容”div 中。问题是单击选项卡后的那一刻，我想在加载 ajax 内容之前显示指示器并隐藏指示器。
你能分享 URL 以获得更好的想法吗？
请参阅this。在 'content' div 的 html 被 ajax 内容覆盖之后，我可以看到第一次显示带有 'content' div 的指示符 gif。因此，随后的标签点击没有要显示的指示符 gif。我相信我的理解是正确的。

【解决方案2】：

这不是对您具体问题的回答，但我使用以下方法获得了类似的结果：

$('#loading_indicator').show();
$('#tabs').tabs({select: function(event, ui) { $('#loading_indicator').show(); },
                 load:   function(event, ui) { $('#loading_indicator').hide(); }});

【讨论】：

【解决方案3】：

jQuery UI 选项卡小部件为此有一个名为 beforeLoad 的特定事件。

如果您查看the official jQuery UI demo for Ajax，您将看到该事件是如何用于处理错误的。在加载时设置选项卡内的内容也很有用。

这里是工作代码 sn-p（JS 中只有 1 行重要，HTML 中只有 3 行）：

$(function() {
  $("#tabs").tabs({
    beforeLoad: function( event, ui ) {
      ui.panel.html($('#ind').clone()); // the only line one I added to the official sample
      ui.jqXHR.fail(function() {
        ui.panel.html("ERROR: Couldn't load this tab.");
      });
    }
  });
});

<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Preloaded</a></li>
    <li><a href="https://rawgit.com/jquery/jquery-ui/master/tests/unit/tabs/data/test.html">Tab 1</a></li>
    <li><a href="https://hub.github.com/hub.1.html">Tab 2</a></li>
    <li><a href="http://google.com/not-found-ajax-content">Tab 3 (broken)</a></li>
  </ul>
  <div id="tabs-1">
    <p>Preloaded tab content</p>
  </div>
</div>
<!-- important lines below (the HTML of the loading indicator) -->
<div style="display:none">
  <img id="ind" src="http://www.ajaxload.info/images/exemples/1.gif" alt="Loading..."/>
</div>

请注意，加载指示器位于 HTML 中 隐藏的 <div> 内，并且在加载时会复制到选项卡内容中（加载选项卡后会自动替换）。 p>

【讨论】：