0

3つのパネルを持つタブコンテナがあり、その中にグリッドビューがあります。ユーザーがタブをクリックすると、グリッドビューが読み込まれます。グリッドビューが読み込まれるまで、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 を使用しているため、ファイルが見つからないことです。

4

2 に答える 2

0

ああ、なるほど。サンプルコードでは、tabs代わりにmytab. これは、サンプル コードが jquery-ui を使用していることを意味します (ここにあります: http://jqueryui.com/ )。

タブについては、こちらのドキュメントを参照してください ( http://jqueryui.com/demos/tabs/リンクの「ソースを表示」をクリックしてください)。

コンパイルされたソースを firebug またはwebinspectorで調べて、jquery、jquery-ui、および jquery-ui のイメージや css などのすべてのソース ファイルを探します。実装されていない場合 -> ソースを取得します。

この後、コードを実行できるはずです。

さらにヘルプが必要な場合は、コンパイルした (!)ソース コードを投稿してください。

于 2012-07-24T06:25:46.807 に答える
0

あなたの代わりにこれを試してください...

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

console.dir(); で 着信データ オブジェクトを chrome または firebug でトレースします。つまり、開発に適したブラウザではありません。

お役に立てれば。

于 2012-07-22T11:24:25.637 に答える