Модальное всплывающее окно не работает внутри UpdatePanel - PullRequest
Новая
       16

Модальное всплывающее окно не работает внутри UpdatePanel

1 голос
/ 01 февраля 2012

У меня есть сетка внутри UpdatePanel.Один из столбцов в gridview - это ссылка, которая при щелчке должна отображать модальное значение (я использую модальный zurb http://www.zurb.com/playground/reveal-modal-plugin).. Проблема в том, что модальное изображение отображается только один раз при нажатии на ссылку, в следующий раз при нажатии на ссылку).он просто обновляет страницу. Модал должен отображаться каждый раз, когда нажимается ссылка внутри сетки.

Модальный скрипт: 

function popupModal()
{
    $("a.link").click(function (e) {
        e.preventDefault();
        $('#myModal #modalContents').load($(this).attr('href'));
        $('#myModal').reveal();
    });
}

GridView:

<asp:ScriptManager ID="smgr" runat="server" EnablePartialRendering="true" />
<asp:UpdatePanel ID="upnlSearchResults" runat="server" RenderMode="Inline">
    <ContentTemplate>       
        <asp:GridView ID="gvResult" runat="server" AutoGenerateColumns="false">                   
            <Columns>
                <asp:BoundField DataField="EmployeeID" HeaderText="Employee ID"  />
                <asp:TemplateField HeaderText="">
                    <ItemTemplate>
                        </td></tr>
                        <tr>
                            <td colspan="10">
                                <a href="Department.aspx" class="link">Detail Information</a>
                            </td>
                        </tr>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnSearch" />
    </Triggers>
</asp:UpdatePanel>

    <div id="myModal" class="reveal-modal">
         <div id="modalContents"></div>
         <a class="close-reveal-modal">&#215;</a>            
    </div>

Код для привязки GridView и регистрация модального всплывающего окна 

protected void btnSearch_Click(object sender, ImageClickEventArgs e)
{
    var results = _presenter.GetEmployers();
    gvResult.DataSource = results;
    gvResult.DataBind();

    ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "popUp", "popupModal();", true);

}

Редактировать: я пытался отладить JavaScript, и код ломается встрока, в которой отображается всплывающее окно 

   function popupModal()
    {
        $("a.link").click(function (e) {
            e.preventDefault();
            $('#myModal #modalContents').load($(this).attr('href'));
            $('#myModal').reveal(); -> [throws error in this line.]
        });
    }

Поскольку я использую модальный zurb, он состоит из файла jquery.reveal.js, который состоит из функции открытия. Функция popupModal находится в моем отдельном js-файле employee.js.Так как сообщение об ошибке выглядит примерно так: «Объект не поддерживает свойство или метод« раскрытие »в IE, я предполагаю, что после того, как модальное всплывающее окно отображается впервые, он не может найти версиюФункция eal из файла jquery.reveal.js.

Может кто-нибудь помочь мне решить эту проблему?

Sanjeev

Ответы [ 3 ]

2 голосов
/ 03 февраля 2012

ок, наконец, нашел решение. не знал, но вы не могли ссылаться на файл jquery.js дважды в проекте. У меня была ссылка на мой файл jquery.js в Мастер-файле, и у меня была такая же ссылка в моем файле Department.aspx. Избавился от дубликата ссылки jquery, и он просто отлично работал.

1 голос
/ 02 февраля 2012

Jquery не очень хорошо работает с updatePanels, если вы не выполните следующие действия: 

function pageLoad() {
  //Your Jquery code goes here...
}
1 голос
/ 02 февраля 2012

Вероятно, происходит тот же конфликт, что и между jquery и updatepanels (знаю, что вы не используете jquery, но я уверен, что это тот же тип проблемы)По сути, панель обновления не обновляет весь DOM, поэтому функции других библиотек js никогда не вызываются.Вот сообщение в блоге о том, как справиться с этим.

http://weblogs.asp.net/hajan/archive/2010/10/07/make-them-to-love-each-other-asp-net-ajax-updatepanels-amp-javascript-jquery-functions.aspx

...