How to specify javascript to run when ModalPopupExtender is shown

Question

The ASP.NET AJAX ModalPopupExtender has OnCancelScript and OnOkScript properties, but it doesn't seem to have an OnShowScript property. I'd like to specify a javascript function to run each time the popup is shown.

In past situations, I set the TargetControlID to a dummy control and provide my own control that first does some JS code and then uses the JS methods to show the popup. But in this case, I am showing the popup from both client and server side code.

Anyone know of a way to do this?

BTW, I needed this because I have a textbox in the modal that I want to make a TinyMCE editor. But the TinyMCE init script doesn't work on invisible textboxes, so I had to find a way to run it at the time the modal was shown

They show you how to RAISE an event manually, not not how to attach to it: http://www.asp.net/ajaxlibrary/act_modalpopup.ashx ...priceless — rdmptn, May 14 '14 at 14:33

score 30 · Accepted Answer · answered Aug 08 '08 at 00:03

30

hmmm... I'm pretty sure that there's a shown event for the MPE... this is off the top of my head, but I think you can add an event handler to the shown event on page_load

function pageLoad()
{
    var popup = $find('ModalPopupClientID');
    popup.add_shown(SetFocus);
}

function SetFocus()
{
    $get('TriggerClientId').focus();
}

i'm not sure tho if this will help you with calling it from the server side tho

answered Aug 08 '08 at 00:03

lomaxx

113,627
57
144
179

add_shown() just saved me a bunch of effort and worked perfectly!! – Chris Porter Apr 05 '11 at 20:03
6

Awesome! I also had to add `Sys.Application.add_load(pageLoad);` to my page to get it to fire the `pageLoad()` – Jorin Oct 25 '11 at 22:20
Just to add to @Jorin: I added my javascript via runtime, and the add_shown would work when a partial postback was done (using an update panel) however, it would NOT when a full postback was done (due to dynamic controls triggering the MPE to be shown). Adding the Sys.Application.add_load(pageLoad); line just before my javascript made it work even on full page postback. – yougotiger Nov 29 '11 at 22:47
You may also need some timeout in the shown handler, it seems some initialization in the popup extender itself takes place in a timeout. I needed that for some proper size calculations. – rdmptn May 14 '14 at 14:35

score 16 · Answer 2 · edited Apr 24 '21 at 14:05

16

Here's a simple way to do it in markup:

<ajaxToolkit:ModalPopupExtender 
    ID="ModalPopupExtender2" runat="server" 
    TargetControlID="lnk_OpenGame" 
    PopupControlID="Panel1" 
    BehaviorID="SilverPracticeBehaviorID"  >
    <Animations>
        <OnShown>
             <ScriptAction Script="InitializeGame();" />  
        </OnShown>
    </Animations>                
</ajaxToolkit:ModalPopupExtender>

edited Apr 24 '21 at 14:05

biberman

5,606
4
11
35

answered Mar 02 '12 at 07:24

John Ward

910
2
10
21

2

I get the following error: "Animation on TargetControlID="hiddenButtonPopup1" uses property AjaxControlToolkit.ModalPopupExtender.OnShown that does not exist or cannot be set". hiddenButtonPopup1 is a hidden button that is assigned to TargetControlID. – Captain Sensible Jun 28 '12 at 08:26
Works great for me, and I like the markup-only solution seeing as how my JS is also in the markup – dlchambers Jul 13 '18 at 12:28

score 11 · Answer 3 · edited Apr 05 '18 at 17:37

11

You should use the BehaviorID value mpeBID of your ModalPopupExtender.

function pageLoad() {
    $find('mpeBID').add_shown(HideMediaPlayer);
}

function HideMediaPlayer() {
    var divMovie = $get('<%=divMovie.ClientID%>');
    divMovie.style.display = "none";
}

edited Apr 05 '18 at 17:37

Aliaksandr Sushkevich

11,550
7
37
44

answered Mar 02 '10 at 18:11

Mircea Dunka

1
1
3

score 2 · Answer 4 · edited Feb 07 '16 at 17:53

2

var launch = false;

function launchModal() {
    launch = true;
}

function pageLoad() {
    if (launch) {
          var ModalPedimento = $find('ModalPopupExtender_Pedimento');
          ModalPedimento.show();
          ModalPedimento.add_shown(SetFocus);
    }
}

function SetFocus() {
    $get('TriggerClientId').focus();
}

edited Feb 07 '16 at 17:53

Markus Safar

6,324
5
28
44

answered Apr 10 '13 at 00:50

Mormon SUD

41
4

How is this better than the previously accepted answer above? – jszobody Apr 10 '13 at 01:17

score 2 · Answer 5 · edited Feb 07 '16 at 17:52

For two modal forms:

var launch = false;
var NameObject = '';

function launchModal(ModalPopupExtender) {
    launch = true;
    NameObject = ModalPopupExtender;
}

function pageLoad() {
    if (launch) {
        var ModalObject = $find(NameObject);
        ModalObject.show();
        ModalObject.add_shown(SetFocus);
                }
} 

function SetFocus() {
    $get('TriggerClientId').focus();
}

Server side: behand

protected void btnNuevo_Click(object sender, EventArgs e)
{
    //Para recuperar el formulario modal desde el lado del sercidor
    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", "<script>launchModal('" + ModalPopupExtender_Factura.ID.ToString() + "');</script>", false);
}

score 2 · Answer 6 · answered Jan 27 '10 at 00:34

2

TinyMCE work on invisible textbox if you hide it with css (display:none;) You make an "onclick" event on TargetControlID, for init TinyMCE, if you use also an updatepanel

answered Jan 27 '10 at 00:34

Brunz

21
1

score 2 · Answer 7 · answered Aug 07 '08 at 23:44

2

If you are using a button or hyperlink or something to trigger the popup to show, could you also add an additional handler to the onClick event of the trigger which should still fire the modal popup and run the javascript at the same time?

answered Aug 07 '08 at 23:44

lomaxx

113,627
57
144
179

You can show the popup from client-side JS code, so without requiring a postback. I guess you could run additional JS code that way. – Captain Sensible Jun 28 '12 at 08:23

slolife · Answer 8 · 2008-08-07T23:53:48.697

2

The ModalPopupExtender modifies the button/hyperlink that you tell it to be the "trigger" element. The onclick script I add triggers before the popup is shown. I want script to fire after the popup is shown.

Also, still leaves me with the problem of when I show the modal from server side.

edited Aug 07 '08 at 23:53

answered Aug 07 '08 at 23:50

slolife

19,520
20
78
121

How to specify javascript to run when ModalPopupExtender is shown

8 Answers8

Linked