Когда вызывается jGrowl, Thickbox перестает работать должным образом (с помощью UpdatePanel) - PullRequest
Новая
       35

Когда вызывается jGrowl, Thickbox перестает работать должным образом (с помощью UpdatePanel)

6 голосов
/ 09 сентября 2011

Я звоню в толстую коробку, когда ссылка нажата: 

<a href="createContact.aspx?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=400&width=550&modal=true"
                            title="Add a new Contact" class="thickbox">Add a new Contact</a>

И, когда нажата кнопка сервера, я вызываю эту функцию javascript для отображения уведомления jGrowl: 

ScriptManager.RegisterClientScriptBlock(this, typeof(Page), Guid.NewGuid().ToString(), "$(function(){$.jGrowl('No Contact found: " + searchContactText.Text + "');});", true);

Оба работают как положено, за исключением случаев, когда jGrowl показывается первым, а не густым. Это приведет к тому, что Thickbox не будет работать, и страница будет отображаться как обычный веб-сайт (как если бы Thickbox ушел).

Кто-нибудь знает, что происходит?

ОБНОВЛЕНИЕ: это тестовая страница без главной страницы: 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="RoutingPortal.Presentation.WebForm2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="../Scripts/jquery-1.6.2.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="../Scripts/thickbox.js" type="text/javascript"></script>
<script src="../Scripts/jquery.jgrowl.js" type="text/javascript"></script>
<link href="../Scripts/css/jquery.jgrowl.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="~/CSS/thickbox.css" type="text/css" media="screen" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
    <a href="createContact.aspx?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=400&width=550&modal=true"
            title="Add a new Contact" class="thickbox">Add a new Contact</a>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>

Это код: 

namespace RoutingPortal.Presentation
{
public partial class WebForm2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        ScriptManager.RegisterClientScriptBlock(this.Page, typeof(Page), Guid.NewGuid().ToString(),
                "$(function(){$.jGrowl('My Message');});", true);
    }
}
}

Я только что протестировал его без UpdatePanel, и он работал отлично. Таким образом, это определенно проблема с UpdatePanel или с тем, как он взаимодействует с jGrowl, вызываемым из codebehind.

Я был бы очень признателен за вашу помощь, ребята.

ОБНОВЛЕНИЕ: Я даже создал демонстрационный проект, в котором эту проблему легко выявить. Не против отправить его любому, кто захочет мне помочь с этим. Заранее спасибо, ребята!

ОБНОВЛЕНИЕ: Я также попробовал решение, данное @Rick, изменив способ выполнения скрипта jGrowl из codebehind: 

ScriptManager.RegisterStartupScript(this.Page, typeof(Page), Guid.NewGuid().ToString(),
        "$.jGrowl('My Message');", true);

Однако проблема не устранена, поскольку результат точно такой же. Есть еще идеи? Я был бы очень признателен за вашу помощь.

ОБНОВЛЕНИЕ: я также пробовал это в IE8 и Chrome, столкнувшись с той же проблемой. Таким образом, это не имеет ничего общего с браузером. На всякий случай.

Ответы [ 3 ]

2 голосов
/ 26 сентября 2011

Я считаю, что ваша проблема не имеет ничего общего с jGrowl, и все, что связано с использованием вами UpdatePanel.

Когда вы используете UpdatePanel, он обновляет все содержащиеся в нем элементы в DOM. Это означает, что оригинальный тег <a>, который был создан на странице и для которого было установлено событие click для использования Thickbox, больше не существует. После обновления UpdatePanel у вас теперь есть НОВЫЙ тег <a>, который имеет класс Thickbox, но не был «инициализирован» (так как Thickbox устанавливает обработчик щелчков при загрузке страницы, что не происходит, как обычно, при частичной обратной передаче) , Следовательно, когда вы нажимаете на ссылку, она действует как обычная ссылка.

Есть несколько способов исправить это, в зависимости от вашей ситуации.

Вариант 1 : Исходя из вашего кода, вставленного выше, не похоже, что на самом деле что-то меняется, связанное со ссылкой, во время обработки обратной передачи. Поэтому, возможно, вы могли бы переместить <div><a ...></a> </div> за пределы UpdatePanel и оставить только кнопку внутри. Это сохранит вашу ссылку как часть страницы, и к ней по-прежнему будет прикреплен обработчик Thickbox.

Вариант 2 : Если по какой-то причине вы не можете воспользоваться Вариантом 1, вы можете настроить запуск JavaScript во время загрузки вашей UpdatePanel, чтобы повторно прикрепить обработчик кликов для вашей ссылки. В функции, которая вызывает jGrowl, попробуйте добавить tb_init('a.thickbox'); в ваш код.

Опция 3 : Вы можете изменить файл Thickbox.js, чтобы использовать живой обработчик jQuery вместо обычного обработчика щелчков. В функции tb_init вы должны изменить ее на $(domChunk).live('click', function(){..}). Я думаю, что это будет работать, хотя возможно, что процесс обновления панели все еще может помешать этому.

Надеюсь, это поможет.

2 голосов
/ 26 сентября 2011

Я не совсем понимаю архитектуру вашей страницы, но, как отмечает @patmortech, UpdatePanel приводит к полной замене элементов DOM при каждой асинхронной обратной передаче. Вам необходимо повторно привязать любые затронутые элементы.

$(document).ready недостаточно для работы с панелями обновления. Он будет вызываться только при первой загрузке страницы (не после обновления UpdatePanel). Решение состоит в том, чтобы подключиться к архитектуре ajax ASP.NET для вашего кода конфигурации.

Какой бы код вы не использовали для настройки ссылок ThickBox и jGrowl, добавьте сюда: 

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
    // page config code
});

Это вызывается в конце жизненного цикла клиента ASP.NET, поэтому поместите свой конфигурационный код для чего-либо в пределах UpdatePanel. Если у вас есть несколько UpdatePanels, вы можете проверить, какие из них были обновлены (google add_endRequest). Однако зачастую проще просто использовать состояние разметки клиента, чтобы определить, нужно ли вам что-то настраивать или нет, или просто использовать код конфигурации, который не сломает вещи, если дважды выполнить одну и ту же разметку.

Использование jquery live также является опцией, но она работает не во всех ситуациях.

1 голос
/ 20 сентября 2011 
protected void Button1_Click(object sender, EventArgs e)
{
    ScriptManager.RegisterStartupScript(this.Page, typeof(Page), Guid.NewGuid().ToString(),
            "$.jGrowl('My Message');", true);
}
...