Modal Popup在UpdatePanel中无法正常工作

时间:2012-02-01 19:48:29

标签: javascript asp.net updatepanel modal-dialog scriptmanager

我在UpdatePanel中有一个gridview。 gridview中的一列是链接,点击时应该显示模态(我正在使用zurb模态http://www.zurb.com/playground/reveal-modal-plugin)。问题是模式仅在单击链接时才显示一次,下次单击链接时它只刷新页面。每次点击gridview中的链接时,都应显示模态。

模态脚本:

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并注册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);

}
  

编辑:我试图调试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中的属性或方法'揭示',i   我假设一旦弹出模式第一次显示,它   无法从jquery.reveal.js文件中找到reveal函数。

任何人都可以帮我解决这个问题吗?

Sanjeev

3 个答案:

答案 0 :(得分:2)

好吧终于找到了解决方案。不知道,但你不能在项目中两次引用jquery.js文件。我在Master文件中引用了我的jquery.js文件,我在Department.aspx文件中有相同的引用。摆脱了重复的jquery引用,它运行正常。

答案 1 :(得分:1)

可能发生的是jquery和updatepanel之间发生的相同冲突(知道你没有使用jquery,但我确定它是同一类型的问题)。基本上,updatepanel不刷新整个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

答案 2 :(得分:1)

除非您执行以下操作,否则Jquery对updatePanel不起作用:

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