Le code Jquery ne fonctionne pas après la pagination?

Question

j'ai écrit ci-dessous le code dans ma page de contenu qui a listview et 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> 

Cela fonctionne très bien .. mais quand je fais alors la pagination du code écrit ne fonctionne pas.

J'ai pu voir que dans Visual Studio, un fichier est créé 'Jscript-window script block'. et le code écrit

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

Qu'est-ce que cela signifie?

Answer 1

Problème résolu.

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

Ma listview était dans le panneau de mise à jour parce que je devais écrire ces codes. A obtenu l'aide du forum d'asp.net et le lien est HERE

Answer 2

Si votre pagination est asynchrone, les éléments DOM nouvellement récupérés ne seront pas capturés par $(".fancyYoutube") car cela ne s'exécute qu'une seule fois sur DOMready. Vous pouvez créer un gestionnaire d'événements plus générique qui fonctionne avec des éléments ajoutés dynamiquement en utilisant la méthode .delegate() à la place.

EDIT

En fait, en regardant à nouveau, la méthode .delegate() ne fonctionnerait probablement pas, comme la fonction .fancybox() est pas un événement. Dans ce cas, vous devriez trouver la fonction de rappel qui est exécutée lorsque la pagination est terminée (ce sera la fonction qui prend la nouvelle réponse AJAX et l'injecte dans le DOM), et faites simplement un autre appel à .fancybox(), en passant dans la réponse AJAX HTML .

Pouvez-vous poster votre code de pagination? Je pourrais probablement t'aider plus clairement!

Answer 3

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

par code listview avec DataPager en elle.

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

et dans le code derrière je n'ai rien écrit pour la pagination.