Modal Popup not working inside UpdatePanel

Question

I have a gridview inside UpdatePanel. One of the column in gridview is link which when clicked should display modal (i am using zurb modal http://www.zurb.com/playground/reveal-modal-plugin). The problem is the modal only gets displayed only once when the link is clicked, the next time when the link is clicked it just refreshes the page. The modal should be displayed everytime when the link inside the gridview is clicked.

Modal Script:

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>

Code To Bind GridView and Register Modal PopUp

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

}

Edit: I tried to debug javascript and the code breaks in line where it reveals the popup

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

Since i am using zurb modal, it consists of jquery.reveal.js file which consists of reveal function. The function popupModal is in my separate js file employee.js. Since the error message is something like this 'Object doesn't support property or method 'reveal' in IE, i am assuming once the popup modal gets displayed for the first time, it can't find the reveal function from the jquery.reveal.js file.

Can anyone help me fix this issue?

Sanjeev

Answer 1

What's probably happening is the same conflict that happens between jquery and updatepanels ( know you're not using jquery, but i'm sure it's the same type of issue). Basically the updatepanel is not refreshing the entire DOM so the other js library's functions never get called. Here's a blog post on dealing with it.

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

Answer 2

ok finally found the solution. didn't know but you couldn't reference jquery.js file twice in the project. I had reference to my jquery.js file in Master file and i had same reference in my Department.aspx file. Got rid of duplicate jquery reference and it just worked fine.

Answer 3

Jquery doesn't play nice with updatePanels unless you do the following:

function pageLoad() {
  //Your Jquery code goes here...
}