1

4番目のjQueryタブを追加するまで正しく機能する単純なasp.netWebページがあります。4番目のタブにどのようなコンテンツを配置しても、何もレンダリングされません。

約12のSO投稿を検索した後、ここで解決策を見つけたと思いました。Jqueryflowplayer-タブ-divタグ内のコンテンツが表示されない...それでも機能させることができません。

私はjQuery、JavaScript、aspを初めて使用するので、優しくしてください:)

よろしくお願いします。

 <div class="tabWrapper">
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1"><span>Current Status</span></a></li>
                <li><a href="#tabs-2"><span>Budget vs. Actual</span></a></li>
                <li><a href="#tabs-3"><span>Projected Expense</span></a></li>
                <li><a href="#tabs-4"><span>Expense History</span></a></li>
            </ul>
            <div id="tabs-1">
                <br />
                <asp:Panel ID="pnlNoDataFound" runat="server">No data available at this time.</asp:Panel>
                <asp:GridView ID="expenditureSummaryGrid" class="multiRowCashTable" runat="server"></asp:GridView>
            </div>    <%--close tab 1--%>
            <div id="tabs-2" >
                <div class="buttonContainer"><button class="balanceButton" onclick="toggleButton('balance'); return false;" title="Help">Hide Balance Table</button></div>
                <asp:GridView ID="balanceGrid" class="multiRowCashTable" runat="server"></asp:GridView>  
                <div class="buttonContainer"><button class="expenseButton" onclick="toggleButton('expense'); return false;" title="Help">Show Expense Table</button></div>
                <asp:GridView ID="expenseGrid" class="multiRowCashTable" runat="server"></asp:GridView>
                <div class="buttonContainer"><button class="budgetButton" onclick="toggleButton('budget'); return false;" title="Help">Show Budget Table</button></div>
                <asp:GridView ID="budgetGrid" class="multiRowCashTable" runat="server"></asp:GridView> 
            </div>    <%--Close Tab 2--%>
            <div id="tabs-3">
                <asp:Panel ID="divProjectionHeader" runat="server">                
                    <table class="tblProjectHeader">
                        <tr>
                            <td><asp:label ID="Label1" class="makeBold" runat="server" >Current Award Year: </asp:label><asp:label id="lblCurrAwardYear" runat="server" ></asp:label></td>
                            <td><asp:label ID="Label2" class="makeBold" runat="server" >Months Remaining: </asp:label><asp:label id="lblRemainingMonths" runat="server" ></asp:label></td>
                            <td><asp:label ID="Label3" class="makeBold" runat="server" >Burn Rate Months: </asp:label>
                                <asp:DropDownList id="selBurnRateMonths"
                                    AutoPostBack="True"
                                    EnableViewState="True"
                                    runat="server">
                                    <asp:ListItem Selected="True" Value="12">12</asp:ListItem>
                                    <asp:ListItem Value="9">9</asp:ListItem>
                                    <asp:ListItem Value="6">6</asp:ListItem>
                                    <asp:ListItem Value="4">4</asp:ListItem>
                                    <asp:ListItem Value="3">3</asp:ListItem>
                                    <asp:ListItem Value="2">2</asp:ListItem>
                                    <asp:ListItem Value="1">1</asp:ListItem>                        
                                </asp:DropDownList>
                            </td>
                            <td><asp:label ID="Label4" class="makeBold" runat="server" >Months Included:</asp:label><asp:label id="lblBurnRateMonths" runat="server" ></asp:label></td>
                        </tr>
                    </table>                                     
                </asp:Panel>
                <br /><br />
                <asp:Panel ID="pnlProjection" runat="server"></asp:Panel>
                <br />
                <asp:Panel ID="divCalc" runat="server">
                    <button id="calcButton" onclick="calcAdjustedBalance(); return false;"  >Calc</button>
                    <button id="zeroButton" onclick="calcZero(); return false;"  >Zero</button>
                    <button id="resetButton" onclick="resetForm(); return false;"  >Reset</button>
                </asp:Panel>
            </div>    <%--Close tab 3--%>
            <div id="tabs-4" >
                <p>Hello</p>
            </div>    <%--Close tab 4--%>
        </div>    <%--Close tabs--%>        
    </div>  <%--Close Tab Wrapper--%>

初期化ロジック：

    // On Doc Ready
    $(document).ready(function () {

        // Config Tabs
        $(function () {
            $('#tabs').tabs();
        });  // End Config Tabs

これが役立つかどうかはわかりませんが、4番目のタブを追加する前に奇妙なインデックス作成の動作に気づきました。selectを使用して、開く最初のタブを動的に変更します。

    If IsPostBack Then

        Dim SenderName As String
        SenderName = clsWebUtil.GetPostBackControl(Me)

        If SenderName = "selBurnRateMonths" Then
            hfSelectedTab.Value = 3
        Else
            hfSelectedTab.Value = 0
        End If

    End If

奇妙な部分は、3番目のタブにアクセスするにはインデックスが「3」でなければならないことです。ゼロベースなので、インデックス「2」にすべきだと思いました。おそらく、「tabs-2」に埋め込まれたdivが問題の原因ですか？

4

1 に答える 1

0

私も同じ問題を抱えていました。何時間も遊んだ後、ネストされていてdiv、jQueryAccordionが最後のタブをめちゃくちゃにしていたことがわかりました。最終的に、最後のタブのマークアップを最初のタブの上部に移動しました。あなたの場合、それは次のようなものになります

<div id="tabs-4" >
   <p>Hello</p>
</div>
<div id="tabs-1">
   <br />
   <asp:Panel ID="pnlNoDataFound" runat="server">No data available at this time.</asp:Panel>
   <asp:GridView ID="expenditureSummaryGrid" class="multiRowCashTable" runat="server"></asp:GridView>
</div>

実行時に、タブはリストと同じ順序で表示されることに注意してください。

<ul>
   <li><a href="#tabs-1"><span>Current Status</span></a></li>
   <li><a href="#tabs-2"><span>Budget vs. Actual</span></a></li>
   <li><a href="#tabs-3"><span>Projected Expense</span></a></li>
   <li><a href="#tabs-4"><span>Expense History</span></a></li>
</ul>

したがって、マークアップを移動しても順序は変わりません。

于 2014-11-26T21:48:43.890 に答える