Application Web ASP.Net Jquery Photoviewer et mise à jour Ajaxical

Il y a un bug dans mon site web .

S’il vous plaît aller au troisième menu de la droite:

entrez la description de l'image ici

Il y a des images qui seraient affichées avec jquery photoviewer. Cela fonctionne bien.

Maintenant, des problèmes surviennent lorsque je clique sur le bouton de mise à jour Ajaxical au bas de la page ci-dessous:

entrez la description de l'image ici

Après la réponse, jquery photoviewer ne fonctionne pas correctement. Il ouvre les images en tant que lien séparé au lieu de s’ouvrir à l’intérieur de photoviewer

Voici le code pour l’onglet:

             <asp:Label ID="Label1" runat="server" Text=''>        <asp:Label ID="lbl_More_Photos" Visible="false" runat="server" Text="
لا توجد مواضيع أخرى">

Et voici ce que fait le bouton ajaxical:

  Protected Sub btn_More_Feeds_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btn_More_Feeds.Click DS_post.PageSize = DS_post.PageSize + 15 DS_post.DataBind() If DS_post.Rows.Count < DS_post.PageSize Then btn_More_Feeds.Visible = False lbl_More_Feeds.Visible = True End If End Sub

Toute aide serait très appréciée .

* La solution donnée ci-dessous fonctionne correctement. Maintenant, après la mise à jour ajaxique lorsque je clique sur le premier onglet (Dernière vidéo), les vidéos ne sont pas diffusées.

Votre problème est que vous ne mettez pas à jour le code JavaScript une fois que UpdatePanel est terminé. En prenant le code JavaScript de votre page, je l’ai changé en:

 $(document).ready(function () { // set the handlers var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_initializeRequest(InitializeRequest); prm.add_endRequest(EndRequest); // init on page load PrettyPhotoInit(); }); function InitializeRequest(sender, args) { } function EndRequest(sender, args) { // init again after the UpdatePanel PrettyPhotoInit(); } function PrettyPhotoInit() { $("a[rel^='prettyPhoto']").prettyPhoto(); /*$(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',theme:'light_square',slideshow:3000, autoplay_slideshow: true}); $(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',slideshow:10000, hideflash: true}); $("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({ custom_markup: '
', changepicturecallback: function(){ initialize(); } }); $("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({ custom_markup: '
', changepicturecallback: function(){ _bsap.exec(); } });*/ }

Votre question est semblable à celles-ci:

Asp.Net UpdatePanel dans Gridview Jquery DatePicker
JQuery Accordion ne redémarre pas après un postback ASP.Net

Vous pourriez avoir besoin de plus de changements; Je ne sais pas ce que les autres bibliothèques que vous appelez ou d’autres fichiers JavaScript, mais c’est l’idée générale.

De plus, votre état d’affichage est énorme. Réduisez-le en fermant l’état d’affichage sur les contrôles dont vous n’avez pas besoin, puis comprimez-le.

Vidéo initialiser:

Les pages utilisent le ” flowplayer ” pour afficher et lire des vidéos. Pour que cela fonctionne correctement, vous devez initialiser le flowplayer après le chargement de chaque nouveau contenu via UpdatePanel.

Ce que vous faites maintenant, c’est d’appeler le script au fur et à mesure. Voici une ligne de votre page:

À présent:

Chaque vidéo est suivie par le script qui l’initialise. Cela ne peut pas fonctionner avec Ajax, ni avec UpdatePanel, car lorsque vous chargez un nouveau contenu, la ligne complète ressemble au texte et n’est pas compilée par le navigateur lorsque vous le rendez sur la page (le code JavaScript ne s’exécutera pas).

La méthode correcte consiste à écrire la balise video et à initialiser la vidéo lorsque la page est entièrement chargée. À partir des documents ” initialiser ” du Flowplayer, vous devez définir l’espace réservé pour la vidéo comme suit:

Doit être comme:

et chaque vidéo aura une ligne comme ci-dessus, puis initialisera toutes les lignes comme suit:

  // install flowplayer to an element with CSS class "player" $(".player").flowplayer({ swf: "/swf/flowplayer-.swf" });

Le code final sera:

 $(document).ready(function () { // set the handlers var prm = Sys.WebForms.PageRequestManager.getInstance(); prm.add_initializeRequest(InitializeRequest); prm.add_endRequest(EndRequest); // init on page load PrettyPhotoInit(); InitFlowPlayer(); }); function InitializeRequest(sender, args) { } function EndRequest(sender, args) { // init again after the UpdatePanel PrettyPhotoInit(); // init again the videos InitFlowPlayer(); } function InitFlowPlayer() { // install flowplayer to an element with CSS class "player" $(".player").flowplayer({ swf: "/swf/flowplayer-.swf" }); } function PrettyPhotoInit() { $("a[rel^='prettyPhoto']").prettyPhoto(); /*$(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',theme:'light_square',slideshow:3000, autoplay_slideshow: true}); $(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',slideshow:10000, hideflash: true}); $("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({ custom_markup: '
', changepicturecallback: function(){ initialize(); } }); $("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({ custom_markup: '
', changepicturecallback: function(){ _bsap.exec(); } });*/ }