分页后Jquery代码不起作用?

时间:2011-05-17 18:49:15

标签: jquery asp.net paging datapager

我在我的内容页面中编写了以下代码,其中包含listview和datapager

    <asp:Content ID="content2" runat="server" ContentPlaceHolderID="HeadContent">
    <link href="../js/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" />

    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js" type="text/javascript"></script>

    <script src='<%=ResolveClientUrl("~/js/fancybox/jquery.fancybox-1.3.4.js")%>' type="text/javascript"></script>

    <script src='<%=ResolveClientUrl("~/js/fancybox/jquery.easing-1.3.pack.js")%>' type="text/javascript"></script>

    <script src='<%=ResolveClientUrl("~/js/fancybox/jquery.mousewheel-3.0.4.pack.js")%>'type="text/javascript"></script>

    <script type="text/javascript"> 
     $(document).ready(function () { 
   $(".fancyYoutube").fancybox({ 
             'transitionIn': 'elastic',
             'transitionOut': 'fade',
             'width': 680,
             'height': 495,
             'type': 'swf'
             }); 
            });
    </script>
</asp:Content>

这很好..但是当我进行分页时,编写的代码不起作用。

我可以看到在visual studio中,一个文件被创建为'Jscript-window script block'。和编写的代码

__doPostBack('ctl00$BodyContent$lvEnglishMovieList$dpgGallery$ctl01$ctl01','')

这意味着什么?

3 个答案:

答案 0 :(得分:2)

问题已解决。

<script type="text/javascript">
    $(document).ready(function () {
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(showtrailer);
        showtrailer();
    });
    function showtrailer() {
        $(".fancyYoutube").fancybox({
            'transitionIn': 'elastic',
            'transitionOut': 'fade',
            'width': 680,
            'height': 495,
            'type': 'swf'
        });
    }
</script>

我的listview在更新面板内,因为我必须编写这些代码。得到了asp.net论坛的帮助,链接就是 HERE

答案 1 :(得分:1)

如果您的分页是异步的,$(".fancyYoutube")将不会捕获新获取的DOM元素,因为这只在DOMready上运行一次。您可以使用.delegate()方法创建一个更通用的事件处理程序,该处理程序使用动态添加的元素。

修改

事实上,再看一遍,.delegate()方法可能不起作用,因为.fancybox()函数不是一个事件。在这种情况下,您应该找到在分页完成时执行的回调函数(这将是获取新AJAX响应并将其注入DOM的函数),然后再调用.fancybox(),传入AJAX响应HTML。

你能发布你的分页代码吗?我可能会更清楚地帮助你!

答案 2 :(得分:0)

ObjectDatasource代码

<asp:ObjectDataSource ID="ObjHindiList" runat="server" SelectMethod="GetAllList"
                TypeName="Movie.Repositories.MovieDetailRepository" 
                OldValuesParameterFormatString="original_{0}">
                <SelectParameters>
                    <asp:Parameter DefaultValue="Hindi" Name="movielanguage" Type="String" />
                </SelectParameters>
            </asp:ObjectDataSource>

现在带有datapager的listview代码。

<asp:ListView ID="ListView1" DataKeyNames="MovieId" runat="server" 
                DataSourceID="ObjHindiMovieList" onitemcreated="ListView1_ItemCreated" 
                onitemdatabound="ListView1_ItemDataBound" EnableViewState="false">
                <LayoutTemplate>
                    <table class="AllMovieList">
                        <tbody class="tablebody">
                            <tr id="itemplaceholder" runat="server" class="trd">
                            </tr>
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="2">
                                    <div class="CustomDataPager">
                                        <asp:DataPager ID="dpgGallery" PagedControlID="ListView1" runat="server" PageSize="10">
                                            <Fields>
                                                <asp:NextPreviousPagerField ButtonCssClass="command" FirstPageText="« Previous" PreviousPageText="« Previous"
                                                    RenderDisabledButtonsAsLabels="false" ShowFirstPageButton="false" ShowPreviousPageButton="true"
                                                    ShowLastPageButton="false" ShowNextPageButton="false" RenderNonBreakingSpacesBetweenControls="False" />
                                                <asp:NumericPagerField CurrentPageLabelCssClass="current" NextPreviousButtonCssClass="next"
                                                    RenderNonBreakingSpacesBetweenControls="False" />
                                                <asp:NextPreviousPagerField ButtonCssClass="command" LastPageText="›" NextPageText="Next »"
                                                    RenderDisabledButtonsAsLabels="false" ShowFirstPageButton="false" ShowPreviousPageButton="false"
                                                    ShowLastPageButton="false" ShowNextPageButton="true" RenderNonBreakingSpacesBetweenControls="False" />
                                            </Fields>
                                        </asp:DataPager>
                                    </div>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </LayoutTemplate>
                <ItemTemplate>
                    <tr class="trd">
                        <td valign="top" style="width: 100px">
                            <asp:Image ID="Image1" ImageUrl='<%#Eval("MovieThumbNailImageUrl")%>' runat="server" />
                        </td>
                        <td valign="top" style="width: 600px">
                            <table class="InnerList">
                                <tr class="InnerTrRow">
                                    <td colspan="2">
                                        <div style="float: left">
                                            <asp:Label ID="lblmovieName" runat="server" Text='<%#Eval("MovieName")%>'></asp:Label>
                                        </div>
                                        <div style="float: right">
                                            <asp:Label ID="lbldate" runat="server" Text='<%#Eval("ReleaseDate","{0:dd-MMM-yy}")%>'></asp:Label>
                                        </div>
                                    </td>
                                </tr>
                                <tr valign="top">
                                    <td colspan="2">
                                        <asp:LinkButton CssClass="linkbutton" ID="lnkabout" runat="server" OnClick="lnkabout_Click" Text="About Movie"></asp:LinkButton>&nbsp|
                                        <asp:LinkButton CssClass="linkbutton" ID="lnkGallery" runat="server" Text="Photos"></asp:LinkButton>&nbsp|
                                        <a class="fancyYoutube" href='<%#Eval("TrailerUrl") %>'>View Trailer</a>
                                    </td>
                                </tr>
                                <tr valign="top">
                                    <td>
                                        <b>Director</b>
                                    </td>
                                    <td>
                                        <asp:Label ID="lblDirector" runat="server" Text='<%#Eval("Director") %>'></asp:Label>
                                    </td>
                                </tr>
                                <tr>
                                    <td valign="top">
                                        <b>Producer</b>
                                    </td>
                                    <td>
                                        <asp:Label ID="Label1" runat="server" Text='<%#Eval("Producer") %>'></asp:Label>
                                    </td>
                                </tr>
                                <tr valign="top">
                                    <td>
                                        <b>Staring</b>
                                    </td>
                                    <td>
                                        <asp:Label ID="lblstarring" runat="server" Text='<%#Eval("Cast") %>'></asp:Label>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </ItemTemplate>
                <ItemSeparatorTemplate>
                    <tr style="width: 600px">
                        <td colspan="2">
                            <div style="border-top: solid 1px #FFF; width: 100%">
                            </div>
                        </td>
                    </tr>
                </ItemSeparatorTemplate>
            </asp:ListView>

在后面的代码中,我没有为分页编写任何内容。