如何在加载标签内容时显示加载图像？

问题描述：

我有一个tabcontainer与三个面板，里面，我有gridview。当我用户点击选项卡时，gridview被加载。我想直到gridview正在加载，应该显示一个img gif，并且在网格完全加载后应该隐藏。对于我写的代码为：如何在加载标签内容时显示加载图像？

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="example.aspx.cs" 
    Inherits="example" %> 

<%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" 
    Namespace="System.Web.UI" TagPrefix="asp" %> 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> 
<!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 id="Head1" runat="server"> 

    <script type="text/javascript"> 

     $(function() { 



     $("#mytab").mytab({ 
       ajaxOptions: { 
        type: 'POST', 
        data: postData, 
        beforeSend: function() { 
         $('#loader').show(); 
        }, 
        complete: function() { 
         $("#loader").hide(); 
        } 
       } 
      }); 
     }); 

</script> 


</head> 
<body> 
    <form id="form2" runat="server"> 
    <iframe id="iFrame2" runat="server" height="2px" width="2px"></iframe> 
     <asp:UpdatePanel ID="UpdatePanel2" runat="server"> 
    <ContentTemplate> 
    <div> 
     <asp:ScriptManager ID="ScriptManager2" runat="server" EnablePartialRendering="true"> 
     </asp:ScriptManager> 


    </div> 
    <asp:Panel ID="loader" runat="server" Wrap="true" CssClass="body" > 
        <table cellpadding="5" cellspacing="5" style="width:322px; height:245px; border:1"> 
         <tr> 
          <td style="width:322px; height:245px; border:1"> 
           <asp:Image ID="Image1" Width="322px" Height="245px" BorderWidth="0" runat="server" ImageUrl="Images/loading.gif" /> 
          </td> 
         </tr> 
        </table> 
       </asp:Panel> 

     <cc1:TabContainer ID="mytab" runat="server" Width="100%" 
           Visible="true" AutoPostBack="true" > 
           <cc1:TabPanel runat="server" HeaderText="application" ID="TabPanel1" 
            > 
            <ContentTemplate> 
            <asp:Panel ID="Panel1" runat="server"> 
             <table class="outline-tabs"> 
              <tr class="pagination-row"> 

              </tr> 
              <tr> 
               <td> 
                <asp:UpdatePanel ID="UpdatePanel3" runat="server"> 
                 <ContentTemplate> 
                  <asp:GridView ID="GridView1" runat="server" CssClass="tblGrid" AllowSorting="True"> 

                </asp:GridView> 
                 </ContentTemplate> 
                </asp:UpdatePanel> 
               </td> 
              </tr> 

             </table> 
            </asp:Panel> 

            </ContentTemplate> 
           </cc1:TabPanel> 



      </ContentTemplate> 
    </asp:UpdatePanel> 
    </form> 
</body> 
</html>

但是当我运行的应用程序，我得到一个错误是：

Microsoft JScript runtime error: Object expected

什么是错的，上面的代码，任何文件丢失，因为我使用jQuery。

jquery在哪里？未实现？尝试两个更多的方法：成功：function（）{console.log（'data received'）}和error：function（err）{console.log（'Error：'+ err）} – liquid 2012-07-21 17:51:52

like this success：function（）{ console.log（'data received'）} error：function（err）{console.log（'Error：'+ err）}是否在我的代码中缺少任何东西，如你所说的jQuery？没有实现？成功和错误功能会做什么？ – 2012-07-21 18:12:25

看来，这是你的主模板，我没有看到

答

与console.dir试试这个，而不是你的......

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script> 
$(document).ready(function() { 
$("#mytab").mytab({ 
       ajaxOptions: { 
        type: 'POST', 
        data: postData, 
        beforeSend: function() { 
         $('#loader').show(); 
        }, 
        success: function(data) { 
         console.dir(data) 
        }, 
        error: function(error) { 
         console.dir('ERROR: ' + error) 
        } 
        complete: function() { 
         $("#loader").hide(); 
        } 
       } 
      }); 
}) 
    </script>

（）;您可以使用Chrome或Firebug跟踪传入的数据对象。即不是一个很好的开发浏览器。

希望这有助于。

但仍然当我点击标签没有什么是可见的（没有图像加载器）我已经放置了breakpiont但没有击中。 – 2012-07-22 12:05:55

好的。这是我不得不问你是否熟悉jquery或者你是否是后端程序员的时候。你的调用是$（'＃mytab'），它是选择器，所以jquery知道你的DOM中的这个元素的所有后续方法都比你试图调用.mytab（）更好。我不知道这个方法，并认为这是一个jQuery插件的方法。控制台说什么？ – liquid 2012-07-22 12:35:04

我知道javascript，我不知道jquery，我只是想当用户点击任何tabpanel时，img加载应该是可见的，而tabpanel内容（在我的情况下gridview）是loading.mytab是tabcontainer id。 – 2012-07-22 15:27:19

答

啊，我明白了。示例代码使用tabs而不是mytab。这意味着示例代码使用jquery-ui（您在此处找到：http://jqueryui.com/）。

对于标签您在这里找到文档（http://jqueryui.com/demos/tabs/点击链接“查看源代码”）。

所以看看你的编译的源代码与萤火虫或webinspector和寻找jQuery的，jQuery的UI和所有的源文件，如图像和CSS的jquery-UI。如果未实现 - >获取源代码。

之后，你应该可以运行你的代码。

如需更多帮助，请发布您的编译（！）源代码。

如何在加载标签内容时显示加载图像？

相关推荐