Fatal编程技术网
  • javascript/
  • Javascript 加载选项卡内容时如何显示正在加载的图像？

Javascript 加载选项卡内容时如何显示正在加载的图像？

javascript jquery

Javascript 加载选项卡内容时如何显示正在加载的图像？,javascript,jquery,Javascript,Jquery,我有一个带有三个面板的tabcontainer，里面有gridview。当我单击该选项卡时，将加载gridview。我想在gridview加载之前，应该显示img gif，并在网格完全加载后隐藏。 为此，我编写了如下代码： <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="example.aspx.cs" Inherits="example" %> <%@ Register Assembly="Sys

我有一个带有三个面板的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>


$（函数（）{
$（“#mytab”）.mytab({
ajaxOptions：{
键入：“POST”，
数据：postData，
beforeSend:function（）{
$（“#加载程序”）.show（）；
},
完成：函数（）{
$（“#加载程序”）.hide（）；
}
}
});
});
但是，当我运行应用程序时，会出现以下错误：

Microsoft JScript运行时错误：需要对象

上面的代码有什么问题，因为我使用的是jquery，所以任何文件都丢失了。

试试这个，而不是你的

    <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>


$（文档）.ready（函数（）{
$（“#mytab”）.mytab({
ajaxOptions：{
键入：“POST”，
数据：postData，
beforeSend:function（）{
$（“#加载程序”）.show（）；
},
成功：功能（数据）{
console.dir（数据）
},
错误：函数（错误）{
console.dir（'错误：'+错误）
}
完成：函数（）{
$（“#加载程序”）.hide（）；
}
}
});
})
使用console.dir（）；您可以在chrome或firebug中跟踪传入的数据对象。ie不是一个很好的开发浏览器

希望这有帮助。

啊，我明白了。示例代码使用
tabs
而不是
mytab
。这意味着示例代码使用jquery ui（您可以在这里找到它：）

对于选项卡您可以在此处找到文档（单击“查看来源”链接）

因此，请使用firebug或webinspector查看编译后的源代码，并查找jquery、jquery ui和所有源文件，如用于jquery ui的图像和css。 如果未实现->获取源代码

在此之后，您应该能够运行您的代码

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

jquery在哪里？没有实施？尝试另外两种方法：success:function（）{console.log（'data received'）}和error:function（err）{console.log（'error:'+err）}像这样success:function（）{console.log（'data received'）}error:function（err）{console.log（'error:'+err）}我的代码中有没有像你说的那样缺少jquery？没有实现？成功和错误函数将做什么？？？看起来，这是你的主模板，我看不到。另一方面，只有在加载并调用jquery脚本时，才能访问jquery选择器。对于$.ajax中的成功和错误方法，请阅读上的文档。但是当我单击选项卡时，仍然看不到任何内容（没有图像加载器），我放置了一个breakpiont，但没有点击。好的。这是我必须问你是否熟悉jquery或者你是否是后端程序员的时候了。您的调用是$（'#mytab'），它是选择器，因此jquery知道以下所有方法都适用于DOM中的该元素，而您尝试调用.mytab（）。我不知道这个方法，我认为这是一个来自jquery插件的方法。控制台是怎么说的？我知道javascript，我不知道jquery，我只想当用户单击任何选项卡面板时，在加载选项卡面板（在我的例子中是gridview）中的内容时，img加载应该是可见的。mytab是选项卡容器id。我的例子中有3个选项卡容器，即使我不知道$（'#mytab'）。mytab（）我刚刚从这个url获得了这段代码