asp.net and jQuery (pretty photo)

I've got problem with PrettyPhoto in my aspx page. There is a Reapeater control inside an Update Panel control. Repeater control repeat table rows: each row contain image, which is a link (with rel=prettyphoto attribute) and few link buttons (edit, save). jQuery code is like this:

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

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

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

When the page loads pretty photo work fine. When I click one time button edit or s开发者_开发技巧ave pretty photo work fine but after this click each next click any other button in update panel don't cause action. Any ideas? I will be grateful for any advice.

Regards, Martin

You can do something along the lines of this:

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);
}

When utilizing an update panel, only a portion of the page is posted back to the server. The jquery command document.ready fires only when the whole page is loaded (or something like that). Unfortunately, PrettyPhoto needs to be initialized every time something on the page is loaded.

If you are using an update panel and you want PrettyPhoto to work properly, you need to put the PrettyPhoto initialization code inside the .NET AJAX "pageLoad" function, like this:

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

For a good article on the differences between document.ready and pageLoad, check out this link:

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

Try putting the Sys.WebForms... call inside the $(document).ready() function. Could be that you are calling it before that particular function has been loaded on the page.

well its because you need to remove the Div tags this Jquery plugin add each time at page load( on each post back as well). To do that eighter add the following fix code in the js file function $.fn.prettyPhoto or at your $(document).ready (); but you should make sure that your script runs before that of the Jquery plugin

Fix Code have to run on each page load before $("a[rel^='prettyPhoto']").prettyPhoto() function :

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

so you can change your function to this:

 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'});
 }; 

as I said before you could also add the fix code to the the js file function $.fn.prettyPhoto

so for version 2.5.6 just change the function to this(by adding the fixation code at the begining of the function):

 $.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*/.....