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?

Answer 1

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?

Answer 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.

Answer 3

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

Answer 4

On the money! Thanks lomaxx. It even appears to work when triggered server side.

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.

This did the trick!

Answer 5

slolife, I have exactly the same problem you wer having, could you show me how you got it to work? Thanks

Answer 6

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

Answer 7

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";
}