asp.net и jQuery (красивое фото)

Question

У меня проблема с PrettyPhoto на моей странице aspx.Внутри элемента управления панели обновления есть элемент управления Reapeater.Повторитель повторяет строки таблицы повторов: каждая строка содержит изображение, которое является ссылкой (с атрибутом rel = prettyphoto) и несколькими кнопками ссылки (редактировать, сохранять).Код jQuery выглядит примерно так:

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

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

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

Когда страница загружается, красивые фотографии работают нормально.Когда я нажимаю один раз кнопку, редактирую или сохраняю красивую фотографию, все работает нормально, но после этого, нажимая каждый следующий щелчок, любая другая кнопка на панели обновлений не вызывает никаких действий.Есть идеи?Буду благодарен за любые советы.

С уважением, Мартин

Answer 1

При использовании панели обновлений только часть страницы отправляется обратно на сервер. Команда jquery document.ready запускается только когда загружена вся страница (или что-то в этом роде). К сожалению, PrettyPhoto нужно инициализировать каждый раз, когда что-то загружается на страницу.

Если вы используете панель обновления и хотите, чтобы PrettyPhoto работала правильно, вам нужно поместить код инициализации PrettyPhoto в функцию .NET AJAX "pageLoad", например:

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

Хорошую статью о различиях между document.ready и pageLoad можно найти по этой ссылке:

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

Answer 2

Вы можете сделать что-то вроде этого:

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 3

хорошо, потому что вам нужно удалять теги Div, которые этот плагин Jquery добавляет каждый раз при загрузке страницы (также на каждом посте обратно).Чтобы сделать это, добавьте следующий код исправления в функцию файла 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*/.....

Answer 4

Попробуйте ввести вызов Sys.WebForms... внутри функции $(document).ready().Возможно, вы вызываете его до того, как эта конкретная функция была загружена на страницу.