1

これをブートストラップ フォーラムに送信しようとしましたが、応答がありません。JavaScriptに関する限り、私は緑色です。グリッドビュー内のデータのセルをクリックまたはマウスオーバーすると、ポップオーバーが表示されるようにしたいと考えています。私が使用しているグリッドビューは、私の問題の一部であると思われる更新パネルにラップされています。

偶然これを行う方法の例はありますか?

私の問題は、データの最初の 10 レコード (ページングがオンで、一度に 10 を表示) を動作させることができることです。しかし、その後どのページに行ってもうまくいかないようです。更新パネルと関係があるのか​​ 疑問に思っていますが、確かではありません。

誰かがこれをやったか、これを機能させるために私が従うことができる偶然の例がありますか?

助けてくれてありがとう。

コード：

 <asp:Panel ID="pnlRefenceList" GroupingText='Reference &nbsp;&nbsp;&nbsp;&nbsp; ' runat="server">

                        <asp:GridView ID="gvwIllustration" runat="server" CssClass="table table-hover" AutoGenerateColumns="false" PagerStyle-CssClass="pgr" AllowPaging="True" OnPageIndexChanging="gvwIllustration_PageIndexChanging"  OnRowDataBound="gvwIllustration_RowDataBound" DataKeyNames="REFERENCE_ID,PART_ID">
                            <Columns>
                                <asp:BoundField DataField="REFERENCE_ID" HeaderText="ID" SortExpression="REFERENCE_ID" Visible="false" />
                                    <asp:TemplateField AccessibleHeaderText="Title" HeaderText="Reference Number" SortExpression="REFERENCE_ID">
                                        <ItemTemplate>
                                            <asp:HyperLink ID="hypName" runat="server" NavigateUrl="" Text='<%# Eval("REF_NUMBER") %>'></asp:HyperLink>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                <asp:BoundField DataField="REF_SEQ_NUMBER" HeaderText="Sequence #" SortExpression="REF_SEQ_NUMBER" Visible="TRUE" />

                                <asp:TemplateField AccessibleHeaderText="Title" HeaderText="Part Number" SortExpression="PART_ID">
                                        <ItemTemplate>
                                            <asp:HyperLink ID="hypName" runat="server" NavigateUrl="" Text='<%# Eval("PART_NUMBER") %>'></asp:HyperLink>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                <asp:BoundField DataField="REF_DESC" HeaderText="Description" SortExpression="REF_DESC" Visible="TRUE" />
                                <asp:BoundField DataField="LINK_COUNT" HeaderText="Link Count" SortExpression="LINK_COUNT" Visible="TRUE" />
                                <asp:BoundField DataField="REMARKS" HeaderText="Remarks" SortExpression="REMARKS" Visible="TRUE" />
                                <asp:BoundField DataField="DISPOSITION" HeaderText="Disposition" SortExpression="DISPOSITION" Visible="TRUE" />
                                <asp:BoundField DataField="QTY" HeaderText="Quantity" SortExpression="QTY" Visible="TRUE" />
                                <%--<asp:BoundField DataField="HAS_SERIALS" HeaderText="Has Serials" SortExpression="HAS_SERIALS" Visible="TRUE" />--%>

                                <asp:TemplateField AccessibleHeaderText="Title" HeaderText="Has Serials" SortExpression="HAS_SERIALS">
                                        <ItemTemplate>
                                            <a href="#" class="IllustrationGridLink" rel="popover" data-original-title='This is title ao' data-content='junk - data content'><%# Eval("HAS_SERIALS") %></a>

                                             <div id="popover_content_wrapper" style="display: none">This is your div content</div>
  </div>



                                            <%--<%# Eval("YourDataContent")%>--%>
                                            <%--<asp:HyperLink ID="hypHasSerials" runat="server" NavigateUrl="" Text='<%# Eval("HAS_SERIALS") %>' data-original-title='This is your title ' data-content='junk - data content'>></asp:HyperLink>--%>
                                        </ItemTemplate>
                                    </asp:TemplateField>

                                <asp:BoundField DataField="ACTIVE_DATE" dataformatstring="{0:MM/dd/yyyy}" HeaderText="Active Date" SortExpression="ACTIVE_DATE" Visible="TRUE" />   
                                <asp:BoundField DataField="INACTIVE_DATE" dataformatstring="{0:MM/dd/yyyy}" HeaderText="Inactive Date" SortExpression="INACTIVE_DATE" Visible="TRUE" />
                            </Columns>
                        </asp:GridView>

                    </asp:Panel>

                </div>
            </div>
        </div>

        <script type="text/javascript">
            $(function () {


                $('[rel=popover]').popover({
                    html: true,
                    content: function () {
                        return $('#popover_content_wrapper').html();
                    }

                });

            });

        </script>

    </ContentTemplate>
    <Triggers>

    </Triggers>
</asp:UpdatePanel>
4

1 に答える 1

3

オプションを使用して、存在するかどうかわからない要素を指すイベント委任ターゲット セレクターを指定selectorできます。

$('body').popover({
    html: true,
    content: function () {
        return $(this).next().text();
    },
    selector: '.has-popover'
});

編集：

このjsFiddle Demoを参照してください。おそらくこれはより理にかなっています。selector: '.has-popover'オプション セットを追加したため、新しい行が追加されたときにポップアップが表示されることに注目してください。.has-popoverこれにより、要素が作成されるたびに、クラスを持つ要素にポップオーバーが追加されます。

content上記と私のデモに示されているように、オプションを動的にロードすることで、カスタム コンテンツを追加できます。基本的に、これが行っているのは、ポップオーバーが作成されている現在の要素を取得して$(this)から、「次の」要素にトラバースし、.next()そのテキストを取得することです.text()。

別の編集：

私はこれを私ができるよりもよく説明しているThis jsFiddle Demoを見つけました....

'selector' オプションを使用すると、基本的に jQuery の 'on' 関数を使用してツールチップとポップオーバーを実行できます。つまり、動的に追加された HTML と正しいセレクターを使用して、最初に読み込まれた DOM に存在するかのようにポップアップをトリガーできます。セレクター オプションがない場合、最初の DOM に存在する要素のみがツールチップをトリガーします。動的に追加されるものはありません。

于 2013-07-18T15:24:38.067 に答える