12

The problem I am facing is that when there is validation on a page and I am trying to display a model pop-up, the pop-up is not getting displayed. And by using fire-bug I have noticed that an error is being thrown.

The button that is used to display the pop-up has cause validation set to false so I am stuck as to what is causing the error.

I have created a sample page to isolate the problem that I am having, any help would be greatly appreciated.

The Error

function () {Array.remove(Page_ValidationSummaries, document.getElementById("ValidationSummary1"));}(function () {var fn = function () {AjaxControlToolkit.ModalPopupBehavior.invokeViaServer("mpeSelectClient", true);Sys.Application.remove_load(fn);};Sys.Application.add_load(fn);}) is not a function
http://localhost:1131/WebForm1.aspx
Line 136

ASP

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="CLIck10.WebForm1" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!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>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>
            <asp:Button ID="btnPush" runat="server" Text="Push" CausesValidation="false" onclick="btnPush_Click" />
            <asp:TextBox ID="txtVal" runat="server" />
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtVal" ErrorMessage="RequiredFieldValidator" />
            <asp:ValidationSummary ID="ValidationSummary1" runat="server" />



        <asp:Panel ID="pnlSelectClient" Style="display: none" CssClass="box" runat="server">
        <asp:UpdatePanel ID="upnlSelectClient" runat="server">
            <ContentTemplate>
                <asp:Button ID="btnOK" runat="server" UseSubmitBehavior="true" Text="OK" CausesValidation="false" OnClick="btnOK_Click" />
                <asp:Button ID="btnCancel" runat="server" Text="Cancel" CausesValidation="false" OnClick="btnCancel_Click" />
            </ContentTemplate>
        </asp:UpdatePanel>
        </asp:Panel>

        <input id="popupDummy" runat="server" style="display:none" />

        <ajaxToolkit:ModalPopupExtender ID="mpeSelectClient" runat="server" 
        TargetControlID="popupDummy"
        PopupControlID="pnlSelectClient" 
        OkControlID="popupDummy"
        BackgroundCssClass="modalBackground" 
        CancelControlID="btnCancel" 
        DropShadow="true"  />   
    </div>
</form>

Code Behind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

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

        }

        protected void btnOK_Click(object sender, EventArgs e)
        {
            mpeSelectClient.Hide();
        }

        protected void btnCancel_Click(object sender, EventArgs e)
        {
            mpeSelectClient.Hide();
        }

        protected void btnPush_Click(object sender, EventArgs e)
        {
            mpeSelectClient.Show();
        }
    }
}
2
  • Are those click handler stubs empty just because you haven't had to fill them yet or are you requiring a postback in order to hide the modal popup? If the postback is not necessary consider using the modal popup's client-side methods to open and close it. Commented Sep 23, 2009 at 13:40
  • I will be adding code to them, this was just to demonstrate the error I was having.
    – Malachi
    Commented Sep 23, 2009 at 15:57

7 Answers 7

6

This is an issue with using both ValidationSummary and ModalPopup.

see here: http://ajaxcontroltoolkit.codeplex.com/WorkItem/View.aspx?WorkItemId=12835

The problem is that there is a missing ";" between the two injected scripts.

Their solution is to create/use a custom server control that inherits from ValidationSummary, that injects a ";" into the page startup script to fix the bug:

[ToolboxData("")]
public class AjaxValidationSummary : ValidationSummary
{
  protected override void OnPreRender(EventArgs e)
  {
    base.OnPreRender(e);
    ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), this.ClientID, ";", true);
  }
}
0
4

Try setting your ValidationSummary "Enabled" property to false on this event : "btnPush_Click" ; and then setting it back to enabled = "true" on this events : "btnOK_Click" ,"btnCancel_Click".

I think this will work if you do not have the validation summary inside the Panel that you want to pop up.But it is not a solution if you need the validation summary inside the pop up panel,...witch is my case :(.

Best Regards.

3

I tried all the available answer online but didn't worked any. Then i tried to move my modal popup extender at very end of the HTML and it works fine for me. Me and my users are Happy :) I am not using FROM tag I am using Content place holder just like below:

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
 <table id="tblMessage" runat="server" width="100%" >
    <tr align="center">
        <td align="center">

main content and

<asp:Panel ID="pnlSelectClient" Style="display: none" CssClass="box" runat="server">

  <asp:ValidationSummary ID="ValidationSummary1" runat="server" />
    <asp:UpdatePanel ID="upnlSelectClient" runat="server">
        <ContentTemplate>
            <asp:Button ID="btnOK" runat="server" UseSubmitBehavior="true" Text="OK" CausesValidation="false" OnClick="btnOK_Click" />
            <asp:Button ID="btnCancel" runat="server" Text="Cancel" CausesValidation="false" OnClick="btnCancel_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>
    </asp:Panel>

If you notice i have validation summary inside the panel because i want error message inside the pop up(i have some additional control in pop up too). and

Some more HTML tag here as i have so many other things to do in one page. right before closing tag of TABLE

<ajaxToolkit:ModalPopupExtender ID="mpeSelectClient" runat="server" 
    TargetControlID="popupDummy"
    PopupControlID="pnlSelectClient" 
    OkControlID="popupDummy"
    BackgroundCssClass="modalBackground" 
    CancelControlID="btnCancel" 
    DropShadow="true"  />

</table>

Done.it's working. Hope that works for other too.

1
  • moving the modalpopupextender after the panel worked for me. Thank you Commented Sep 5, 2013 at 16:57
2

Are you using validation groups anywhere on the page? I've had problems with control events not firing when they are not part of a validation group and other controls on the page are part of a validation group.

1
  • Puting all controls in ValidationGroup worked for me. Before using this, even ModalPopup was not showing.
    – Zeeshanef
    Commented Feb 21, 2014 at 8:56
1

I'd try changing this:

<input id="popupDummy" runat="server" style="display:none" />

to something like this:

<asp:Button id="popupDummy" runat="server" CausesValidation="false" Visible="false" />

I bet the untyped input is requiring validation.

0

i had the same issue, adding ValidationGroup to the validation controls did the trick!

0

One other thing to try, if you don't need Client Script you can disable it in the markup. Doing that fixed our problem.

EnableClientScript="false"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.