Run javascript when modalpopupextender is shown

Question

This questions was already answered here - How to specify javascript to run when ModalPopupExtender is shown - but the accepted solution is not working for me.

The modalpopupextender is declared as below:

<ajaxtoolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlID="btn"
        PopupControlID="pnlModal" PopupDragHandleControlID="pnlModalDragHandle"   BackgroundCssClass="modalBackground"
    CancelControlID="btnModal" DropShadow="true"/>

The showing / hiding works fine. What does not work is linking a client script to the showing event of the modal popup extender. Based on the original question, I tried:

 <script type="text/javascript">
    function pageLoad() {
    var popup = $find('mpe');
    popup.add_shown(SetShowing);
    }

function SetShowing() {
    alert('showing');
  }

 </script>

Nothing happened. No alert, no errors. Reading further in the original post, I even added this line in the script: Sys.Application.add_load(pageLoad);

The additional line had no effect. Any ideas why the original answer is not working? Thanks, I have been trying for hours.

unfortunately that did not make it work. I tried adding an alert to the pageLoad() function and it never alerts, so I'm guessing pageLoad is never getting called. — James Dean, May 15 '14 at 18:47
try inside jquery document ready function $(document).ready(function(){}); — malkam, May 15 '14 at 18:48
Sorry it wouldn't let me edit that one. I added: function $(document).ready(function(){ alert('ready'); }); No alert was shown. — James Dean, May 15 '14 at 19:01

chrismillah · Answer 1 · 2014-05-15T19:30:45.007

0

I am not familiar with "modalpopupextender",

but why not just use some jquery?

$(document).ready(function(){
     if ($('#mpe').is(':visible')){     
         //code for when MPE is visible here

     }

});

jquery documentation

http://jsfiddle.net/N62g5/8/

edited May 15 '14 at 19:30

answered May 15 '14 at 19:05

chrismillah

3,704
2
14
20

That unfortunately did not work. When I added the code below, nothing occurred when the modelpopupextender was visible. $(document).ready(function(){ if $('#mpe').is(':visible')){ //code for when MPE is visible here alert('It is showing'); } }); – James Dean May 15 '14 at 19:15
sorry James, i missed a parentheses right after my "if" – chrismillah May 15 '14 at 19:31
I edited my original answer and linked a jsfiddle with working code, currently it just has two divs, one is not being displayed.. when the ID='mpe' being visible, the second div is displayed – chrismillah May 15 '14 at 19:32
Unfortunately, no joy. I tried add it to both the popupextender itself and outside of it, I tried adding a false alert and it did not fire at all. I guess the document.ready is never finding the document ready? $(document).ready(function () { if ($('#mpe').is(':visible')) { //code for when MPE is visible here alert('it is visible'); } else { alert('it is not visible'); } }); – James Dean May 15 '14 at 19:42
Im thinking that you have not imported `jquery` with whatever you are working with.. make sure you are dropping one of the versions in your html - right after your js script see here [jquery-install](http://stackoverflow.com/questions/1458349/installing-jquery) – chrismillah Aug 06 '14 at 00:39

score 0 · Accepted Answer · edited May 23 '17 at 10:25

I ended up having to attack this problem another way. None of the suggestions were able to successfully detect when the modalpopupextender was displayed. I instead changed my approach to handle user actions on the shown elements - like focusing on a textbox, etc. I could be confident the modalpopupextender was displayed if the user was interacting with it.

If you came here, I would direct you to the original post here - How to specify javascript to run when ModalPopupExtender is shown - and hope you were more successful than I was.

Thank you to everyone who commented, I sincerely appreciate your time.

Run javascript when modalpopupextender is shown

2 Answers2