2010-08-15 73 views
1

我在我的aspx页面中有PrettyPhoto的问题。更新面板控件中有一个Reapeater控件。中继器控制重复表格行:每行包含图像,这是一个链接(具有rel = prettyphoto属性)和少量链接按钮(编辑,保存)。 jQuery代码是这样的:asp.net和jQuery(漂亮的照片)

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

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

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

当页面加载漂亮的照片工作正常。当我点击一次按钮编辑或保存漂亮的照片工作正常,但在此之后单击下一步,单击更新面板中的任何其他按钮都不会引起操作。有任何想法吗?我会很感激任何建议。

问候, 马丁

+0

什么时候最后一行'Sys.WebForms ...'运行? – 2010-08-15 11:49:54

+0

完成异步回发并将控件返回给浏览器后,会引发EndRequest事件。 – grom 2010-08-15 11:59:40

回答

0

尝试把Sys.WebForms...调用$(document).ready()函数内。可能是因为您在页面上加载特定功能之前调用了它。

0

以及因为你需要删除这个jquery插件添加每次页面加载时(每个帖子后面)的Div标签。 要做到这一点eighter在js文件的功能$.fn.prettyPhoto或在您$(document).ready(); 添加以下修补程序代码,但你应该确保你的脚本之前的jQuery插件

修复代码必须之前在每个页面加载运行的运行$("a[rel^='prettyPhoto']").prettyPhoto()功能:

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

所以你可以你的函数改成这样:

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

正如我以前说过,你也可以修复代码添加到JS文件功能$.fn.prettyPhoto

所以版本2.5.6只是改变了功能,这(通过在函数的开头加上固定代码):

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

你可以沿着这个线的东西:

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

当使用一个更新面板,只有页面的一部分回发到服务器。 jquery命令document.ready仅在整个页面加载时(或类似的)触发。不幸的是,每次加载页面上的东西时,PrettyPhoto都需要初始化。

如果您使用的是更新面板,并且希望PrettyPhoto正常工作,你需要把PrettyPhoto初始化代码的.NET AJAX里面的“页面加载”功能,像这样:

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

对于一个好的在document.readypageLoad之间的差异的文章,看看这个链接:

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