asp.net et jQuery (jolie photo)

Question

J'ai un problème avec PrettyPhoto dans ma page aspx. Il existe un contrôle Reapeater dans un contrôle Update Panel. Répétition du répéteur: chaque ligne contient une image, qui est un lien (avec l'attribut rel = prettyphoto) et quelques boutons de lien (modifier, enregistrer). Le code de jQuery est comme ceci:

function bindPrettyPhoto() 
{ 
    $("a[rel^='prettyPhoto']").prettyPhoto({theme:'facebook'}); 
}; 

$(document).ready(function(){ 
    bindPrettyPhoto(); 
}); 

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindPrettyPhoto); 

Lorsque la page charge une jolie photo, elle fonctionne bien. Lorsque je clique une fois sur le bouton éditer ou que je sauvegarde une jolie photo, je travaille bien, mais après cela, je clique chaque fois que je clique sur un autre bouton du panneau de mise à jour. Des idées? Je serai reconnaissant pour tout conseil.

Cordialement, Martin

Answer 1

Essayez de mettre l'appel Sys.WebForms... dans la fonction $(document).ready(). Peut-être que vous appelez avant que cette fonction particulière a été chargée sur la page.

Answer 2

bien parce que vous devez supprimer les balises Div ce plugin Jquery ajouter chaque fois au chargement de la page (sur chaque post-retour aussi bien). Pour faire cela huitard ajoutez le code correctif suivant dans la fonction de fichier js $.fn.prettyPhoto ou à votre $(document).ready(); mais vous devez vous assurer que votre script est exécuté avant que du plugin Jquery

Code Fix doivent exécuter sur chaque chargement de la page avant $("a[rel^='prettyPhoto']").prettyPhoto() fonction:

//to remove div tag prettyPhoto adds on each page load 
$('div.pp_pic_holder').remove(); 
$('div.pp_overlay').remove(); 
$('div.ppt').remove(); 
//End remove div tag prettyPhoto adds on each page load 

afin que vous puissiez changer votre fonction à ceci:

function bindPrettyPhoto() 
{ 
    //to remove div tag prettyPhoto adds on each page load 
    $('div.pp_pic_holder').remove(); 
    $('div.pp_overlay').remove(); 
    $('div.ppt').remove(); 
    //End remove div tag prettyPhoto adds on each page load 
    $("a[rel^='prettyPhoto']").prettyPhoto({theme:'facebook'}); 
}; 

comme je l'ai dit avant que vous pouvez également ajouter le code fixe à la fonction de fichier js $.fn.prettyPhoto

donc pour la version 2.5.6 change juste la fonction à ce (en ajoutant le code de fixation au début de la fonction):

$.prettyPhoto = { version: '2.5.6' }; $.fn.prettyPhoto = function (settings) { 

     $('div.pp_pic_holder').remove(); 
     $('div.pp_overlay').remove(); 
     $('div.ppt').remove(); 

.../* the rest of the function*/..... 

Answer 3

Vous pouvez faire quelque chose le long des lignes de celle-ci:

protected override void OnPreRender(EventArgs e) 
{ 
    base.OnPreRender(e); 

    RegisterScript(); 
} 

private void RegisterScript() 
{ 
    StringBuilder sb2 = new StringBuilder(); 
    string selector = this.ClientID.ToString(); 

    if (ScriptManager.GetCurrent(this.Page).IsInAsyncPostBack) 
    { 
     sb2.AppendLine(String.Concat("Sys.Application.add_load(", selector, "_func);")); 
     sb2.AppendLine(String.Concat("function ", selector, "_func() {")); 
    } 
    else 
    { 
     sb2.AppendLine(" $(document).ready(function() {"); 
    } 

    sb2.AppendLine("$(\"a[rel^='prettyPhoto']\").prettyPhoto({ animation_speed: 'fast' });"); 
    sb2.AppendLine("}"); 

    if (!ScriptManager.GetCurrent(this.Page).IsInAsyncPostBack) 
     sb2.Append(");"); 

    if (ScriptManager.GetCurrent(this.Page).GetRegisteredClientScriptBlocks().FirstOrDefault(e => e.Key == String.Concat("PrettyPhoto", selector)) == null) 
     ScriptManager.RegisterClientScriptBlock(this, this.GetType(), String.Concat("PrettyPhoto", selector), String.Format("<script type=\"text/javascript\">{0}</script>", sb2.ToString()), false); 
} 

Answer 4

Lors de l'utilisation d'un panneau de mise à jour, seule une partie de la page est affichée sur le serveur. La commande jquery document.ready ne se déclenche que lorsque toute la page est chargée (ou quelque chose comme ça). Malheureusement, PrettyPhoto doit être initialisé chaque fois que quelque chose sur la page est chargé.

Si vous utilisez un panneau de mise à jour et que vous voulez prettyPhoto fonctionne correctement, vous devez mettre le code d'initialisation prettyPhoto dans la fonction, comme AJAX .NET « pageLoad » ceci:

function pageLoad() { 
    $("a[rel^='prettyPhoto']").prettyPhoto({theme:'facebook'}); 
} 

Pour une bonne article sur les différences entre document.ready et pageLoad, consultez ce lien:

http://encosia.com/document-ready-and-pageload-are-not-the-same/