Solved

AJAX Modal Extender does not always respond to ModalPopupExtender1.Show()

Posted on 2008-10-05
32
2,350 Views
Last Modified: 2008-10-21
The following line launches my panel modal dialog : ModalPopupExtender1.Show() when placed in the page load event.  However it does nothing when placed in a button click event.  Both are placed in a the page's associated codebind file.
0
Comment
Question by:hbash
  • 16
  • 16
32 Comments
 
LVL 18

Expert Comment

by:David Robitaille
ID: 22680048
does the code ModalPopupExtender1.Show()  is executed?
please place a break point on that line to make sure the event is raised button click event.
Tou could also use the TargetControlID="butonName"  of  the ModalPopupExtender to link the event to the popup.
0
 
LVL 18

Expert Comment

by:David Robitaille
ID: 22680056
Tou = You, sorry
0
 
LVL 1

Author Comment

by:hbash
ID: 22680178
I think that there is an issue with the button being contained within an tab control and it is not visible without referring to the tab id also.  I'm not too clear about how to achieve that at the moment though.
0
 
LVL 1

Author Comment

by:hbash
ID: 22680206
Btw,  the control as an ajaxcontroltoolkit tabcontainer.
0
 
LVL 18

Expert Comment

by:David Robitaille
ID: 22680213
did you set OnClick="Button_Click" in the buton s declaration?
could you send more code? (form the aspx file)
0
 
LVL 1

Author Comment

by:hbash
ID: 22692480
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1"
        runat="server"
        CancelControlID="cmdCancel"
        DropShadow="true"
        BackgroundCssClass="modalBackground"
        OnOkScript="onOk()"
        onCancelScript="onCancel()"
        OkControlID="cmdOk"
        PopupControlID="pnlWarning"
        TargetControlID="TabContainer1$TabPanel1$cmdDeleteEvent">                                  
    </ajaxToolkit:ModalPopupExtender>        

Note the targetcontrolid.  I obtained it viewing source and know that it should be returned via some function(s).  This works.  Although I wish the order of event handling could be changed from the launch of the extender followed by button click code behind.  Actually,  I would like to, based on some conditions not show the extender.  Say the button is delete,  and the modal popup says "Are you sure" setting a javascript variable for later based on yes or no (this all works but the order and lack of control of displaying or aborting the displaying are the final piece to this puzzle).

0
 
LVL 1

Author Comment

by:hbash
ID: 22708331
Here is all the code...

In the click event of a page's button:

 Dim o As Object = Page.FindControl("ModalPopupExtender2")
        If Not o Is Nothing Then
            o.show()
        End If

On the Page is the following:

    <asp:Panel ID="pnlEditRecord" runat="server" Style="display: none" CssClass="modalPopup">    
        <hr />    
        <center>Record Edit<br />
        <hr />
        Edit and Press OK to save or Cancel to exit no save.<br /> </center>
        <div align="center">
            <asp:Button ID="Button1" Text="OK" runat="server" />
            <asp:Button ID="Button2" Text="Cancel" runat="server" />      
        </div>
        <hr />
    </asp:Panel>


    <asp:LinkButton runat="server" ID="lnkDummy" Visible="false" />
 
    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender2"
        runat="server"
        DropShadow="true"
        BackgroundCssClass="modalBackground"
        OnOkScript="onOk()"
        PopupControlID="pnlEditRecord"
        TargetControlID="lnkDummy">                                  
    </ajaxToolkit:ModalPopupExtender>        


And the .show in the above click event is called (I have set breaks) and nothing appears.

0
 
LVL 18

Expert Comment

by:David Robitaille
ID: 22710911
What are you trying to do, client script or server script?
For the TargetControlID="TabContainer1$TabPanel1$cmdDeleteEvent"
You should use the cmdDeleteEvent instead. That one is use only by javascript. if you realy need this in the future. (in a java script) use cmdDeleteEvent.clientid. but since the TargetControlID is run  on the server, TargetControlID should be ok.  
Add a BehaviorID="ModalPopupBehavior" to your <ajaxToolkit:ModalPopupExtender after you could use this in java script.
var modalPopupBehavior = $find(ModalPopupBehavior);
modalPopupBehavior.show() ;
 the on ok script "force" the ModalPopupExtender to use javascript. instead, remove the OnOkScript="onOk()" and OkControlID="cmdOk"
and do a server script on the Button1 click event. that do your things.
 
 Dim o As Object = Page.FindControl("ModalPopupExtender2")

 Why object?

Dim o As AjaxControlToolkit.ModalPopupExtender = ctype(Page.FindControl("ModalPopupExtender2"), AjaxControlToolkit.ModalPopupExtender)

 
 
0
 
LVL 18

Expert Comment

by:David Robitaille
ID: 22710920
a typo on the last message "but since the TargetControlID is run  on the server, cmdDeleteEvent should be ok. "
0
 
LVL 1

Author Comment

by:hbash
ID: 22717567
Changing TabContainer1$TabPanel1$cmdDelete event to cmdDelete event causes the following exception in the ExtenderControlBase.cs within OnPreRender.  Here is the exception:
System.InvalidOperationException was unhandled by user code
  Message="The TargetControlID of 'ModalPopupExtender1' is not valid. A control with ID 'cmdDeleteEvent' could not be found."
  Source="System.Web.Extensions"
  StackTrace:
       at System.Web.UI.ExtenderControl.RegisterWithScriptManager()
       at System.Web.UI.ExtenderControl.OnPreRender(EventArgs e)
       at AjaxControlToolkit.ExtenderControlBase.OnPreRender(EventArgs e) in D:\ajaxcontroltoolkit_install\AjaxControlToolkit\ExtenderBase\ExtenderControlBase.cs:line 367
       at AjaxControlToolkit.ModalPopupExtender.OnPreRender(EventArgs e) in D:\ajaxcontroltoolkit_install\AjaxControlToolkit\ModalPopup\ModalPopupExtender.cs:line 212
       at System.Web.UI.Control.PreRenderRecursiveInternal()
       at System.Web.UI.Control.PreRenderRecursiveInternal()
       at System.Web.UI.Control.PreRenderRecursiveInternal()
       at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint)
0
 
LVL 1

Author Comment

by:hbash
ID: 22717902
I tried adding the BehaviorID property,  searched for it and again tried the .Show method to no avail...
0
 
LVL 18

Expert Comment

by:David Robitaille
ID: 22720798
BehaviorID property is for client script (java script). the folowing snippet work fine for me in Javascript
var modalPopupBehavior = $find(ModalPopupBehavior);
modalPopupBehavior.show() ;
-----------------
the The TargetControlID is ID of the element that activates the modal popup. if you set something to it, you dont need to "show" it with the show method because TargetControlID auto "generate" scripts to show the popup. If you need to show it manually, set it to the same id than the PopupControlID  (TargetControlID="pnlWarning").

 
 
 
 
0
 
LVL 18

Expert Comment

by:David Robitaille
ID: 22720840
the correct javascript Snippet is htere, the commant box remove the Quotation mark.
var modalPopupBehavior = $find('ModalPopupBehavior'); 

modalPopupBehavior.show() ; 

Open in new window

0
 
LVL 1

Author Comment

by:hbash
ID: 22721312
I need to be able to launch the popup from a button click event (vb.net).  So,  my assumption was that from the vb.net event handler something like the following would work:
Dim o As AjaxControlToolkit.ModalPopupExtender = ctype(Page.FindControl("ModalPopupExtender2"), AjaxControlToolkit.ModalPopupExtender)
if not o is nothing then
  o.Show   <---the code breaks here so I know that the control was found, but does not display
end if


 
0
 
LVL 1

Author Comment

by:hbash
ID: 22721324
The above code has the same non affect regardless of searching for the ModalPopupExtender2 or for ModalPopupBehavior.
0
 
LVL 18

Expert Comment

by:David Robitaille
ID: 22721418
the problem is the "findcontrol" part, you modal popup extender is in a container. you have to do
 ctype(mycontainer.FindControl("ModalPopupExtender2"), AjaxControlToolkit.ModalPopupExtender)
 
remplace mycontainer with the container of the ModalPopupExtender2 (a formview, a gridview, a panel, or whatever...)
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 18

Expert Comment

by:David Robitaille
ID: 22721435
i just saw the problem is (o.Show), did you try to replace the targetcontrolid (TargetControlID="pnlWarning")?
0
 
LVL 18

Accepted Solution

by:
David Robitaille earned 500 total points
ID: 22722874
I just thought about that and the solution i suggess i had some doubts. I just check my code and TargetControlID="pnlWarning" it<s not the solution i used in my code (!!!). I used that solution with the (non modal) PopupExtender.
so, if the delete button is inside a tab TabContainer, then the ModalPopupExtender2 cant see it. The error you got is an error on th initialization of the ModalPopupExtender.  
For ModalPopupExtende, I put a dummy button just beside the ModalPopupExtender and linked it to the ModalPopupExtender`s TargetControlID.
<asp:Button ID="DummyControl" runat="server" Width="0" Height="0" />
my code to show the popup was clientside code, since i had multiple TargetControls, i had to do that trick to manualy call the show(). But I think it should work with server side code.
0
 
LVL 1

Author Comment

by:hbash
ID: 22732335
I also created a dummy targetControl, but my button click of the found ID (either ID or BehaviorID) did not launch the popup.
0
 
LVL 18

Expert Comment

by:David Robitaille
ID: 22732384
the found ID? witch found id?
0
 
LVL 1

Author Comment

by:hbash
ID: 22732700
This code in the click event, regardless of wheither or not I use the ID or the BehaviorID:

Dim o As AjaxControlToolkit.ModalPopupExtender = ctype(Page.FindControl("ModalPopupExtender2"), AjaxControlToolkit.ModalPopupExtender)
if not o is nothing then
  o.Show   <---the code breaks here so I know that the control was found, but does not display
end if

0
 
LVL 18

Expert Comment

by:David Robitaille
ID: 22732724
what is the actual definition of the ModalPopupExtender and what is it relative to the control it dosent find. BehaviorID is only for javascript, so it`s useless in that case.
0
 
LVL 1

Author Comment

by:hbash
ID: 22734051
The find method does find the extender or the set breakpoint would not have been executed.  

I will paste the definition of the extender tonite as I am at work and do not have that bit of code.

Thanks,
Howard

0
 
LVL 18

Expert Comment

by:David Robitaille
ID: 22734100
ok, but what i m saying is the ModalPopupExtender execute it<s own findcontrol method to find the control and  fail. so that why i<m asking where the control is relatively to the ModalPopupExtender.
0
 
LVL 1

Author Comment

by:hbash
ID: 22734228
The panel and the popup and the dummy link are in the same place section with no containers or any other intervening structures.
0
 
LVL 1

Author Comment

by:hbash
ID: 22737653
Here is the frag of the command click:
        'Show ModalPopup
        Dim o As AjaxControlToolkit.ModalPopupExtender = CType(Page.FindControl("ModalPopupExtender2"), AjaxControlToolkit.ModalPopupExtender)
        If Not o Is Nothing Then
            o.Show()
        End If

and here is the codepage:
    <asp:Panel ID="pnlEditRecord" runat="server" Style="display: none" CssClass="modalPopup">    
        <hr />    
        <center>Record Edit<br />
        <hr />
        Edit and Press OK to save or Cancel to exit no save.<br /> </center>
        <div align="center">
            <asp:Button ID="Button1" Text="OK" runat="server" />
            <asp:Button ID="Button2" Text="Cancel" runat="server" />      
        </div>
        <hr />
    </asp:Panel>

    <asp:LinkButton runat="server" ID="lnkDummy" Style="display: none" Visible="false" />
    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender2"
        runat="server"
        DropShadow="true"
        BackgroundCssClass="modalBackground"
        BehaviorID ="ModalPopupBehavior"
        PopupControlID="pnlEditRecord"
        TargetControlID="lnkDummy">                                  
    </ajaxToolkit:ModalPopupExtender>        

My CSS looks like this :
/*Modal Popup*/
.modalBackground {
      background-color:Gray;
      filter:alpha(opacity=70);
      opacity:0.7;
}

.modalPopup {
      background-color:#ffffdd;
      border-width:3px;
      border-style:solid;
      border-color:Gray;
      padding:3px;
      width:250px;
}

Finally, on the click the code " o.Show() " executes but the panel does not show.


0
 
LVL 18

Expert Comment

by:David Robitaille
ID: 22739845
i replaced the lnkDummy
<asp:LinkButton runat="server" ID="lnkDummy" width="0" Height="0" />
like i write before.
I forgot to mention it (it`s my fault) but it dont work when the target control is not "visible"
Here the full working code i tested:
i linked the boton 3 to the
Protected Sub Button3_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button3.Click
'Show ModalPopup
Dim o As AjaxControlToolkit.ModalPopupExtender = CType(Page.FindControl("ModalPopupExtender2"), AjaxControlToolkit.ModalPopupExtender)
If Not o Is Nothing Then
o.Show()
End If
End Sub

<%@ Page Language="VB" AutoEventWireup="false" Debug="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
 

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
 

<!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>Untitled Page</title>

</head>

<body>

    

    <form id="form1" runat="server">

    <asp:ScriptManager ID="ScriptManager1" runat="server">

    </asp:ScriptManager>

    <asp:Button ID="Button3" Text="edit" runat="server" />

    <asp:Panel ID="pnlEditRecord" runat="server" Style="display: none" CssClass="modalPopup">     

        <hr />    

        <center>Record Edit<br />

        <hr />

        Edit and Press OK to save or Cancel to exit no save.<br /> </center>

        <div align="center">

            <asp:Button ID="Button1" Text="OK" runat="server" />

            <asp:Button ID="Button2" Text="Cancel" runat="server" />      

        </div>

        <hr />

    </asp:Panel>
 

    <asp:LinkButton runat="server" ID="lnkDummy" width="0" Height="0" />

    <cc1:ModalPopupExtender ID="ModalPopupExtender2" 

        runat="server" 

        DropShadow="true"

        BackgroundCssClass="modalBackground"

        PopupControlID="pnlEditRecord" 

        TargetControlID="lnkDummy">                                  

    </cc1:ModalPopupExtender>        

   

    </form>

   

</body>

</html>

Open in new window

0
 
LVL 1

Author Comment

by:hbash
ID: 22743226
I will try this when I get home and let you know how it goes.  However,  I don't really want to show a dummy linkbutton...
0
 
LVL 18

Expert Comment

by:David Robitaille
ID: 22743321
I hide mine sucefully using the width="0" Height="0".
 
0
 
LVL 1

Author Comment

by:hbash
ID: 22743423
I know there is another option to hide the linkbutton.  It is something like style="display:hidden".

I will first try without caring about the linkbutton visibility and then your change with sizing it and finally I will try the display:hidden value for the style attribute.

0
 
LVL 18

Expert Comment

by:David Robitaille
ID: 22771185
So how it that going?
I was taking that one personal....
0
 
LVL 1

Author Comment

by:hbash
ID: 22773118
It is working.  I think that it is a bit too delicate a control...  but I really appreciate your energy and wisdom on this.
Thanks.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Parsing a CSV file is a task that we are confronted with regularly, and although there are a vast number of means to do this, as a newbie, the field can be confusing and the tools can seem complex. A simple solution to parsing a customized CSV fi…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
This video gives you a great overview about bandwidth monitoring with SNMP and WMI with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're looking for how to monitor bandwidth using netflow or packet s…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now