none
Executing JavaScript after a Modal Dialog has opened RRS feed

  • Question

  • I am trying to run a script that needs to look at elements inside of a modal dialog. What I am running into is the script is loaded BEFORE the modal dialog is opened and when I click my button to open it, the modal page isn't displayed correctly. What do I do to load JavaScript AFTER the modal has been opened?

    Thanks!

    Tuesday, November 24, 2015 11:54 PM

Answers

  • Hi,

    As a workaround, we can create a new HTML page or aspx page with in the fields and add the JavaScript code in the page. Like bind color picker plugin. Then Open the page using SP.UI.ModalDialog.showModalDialog in SharePoint.

    Best Regards,

    Dennis


    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.

    Thursday, November 26, 2015 7:09 AM
    Moderator

All replies

  • As I understand you are trying to look inside a modal dialog! I assume that you mean a modal popup message box that displays a message to the user. If so these message box's suspend the execution of your code while it waits for the users response, then continues afterward. If its the button that you want to know then use

    var response = confirm("you really want to do it"); if (response) { //then do it. }

    else{

    //don't do it

    }

    By all means research in MSDN library for more info.

    Wednesday, November 25, 2015 12:35 AM
  • Thanks for the response Michael. I'm actually looking to do more complex things in the modal and having a message box isn't an option. More specifically, I'm looking to add a color picker plugin to fields in a modal. The way I'm implementing the modal is a custom html page (not connected to SharePoint) that is passing in HTML markup containing input fields. What happens is the color picker plugin gets executed on page load, so it works on fields directly on the parent page. However, when I open the modal, the controls for the color picker do not work because the color picker plugin script has already been loaded before the html was passed into the modal, thus the controls don't get the plugin applied.

    If only I could execute the color picker plugin script after the modal dialog has been opened, this would solve the issue.

    I hope that makes sense :)

    Wednesday, November 25, 2015 12:48 AM
  • The only way I believe you could do this is by using AJAX. Creating a custom form with a blanket object behind to capture any click events. This way you display what you want, process it and then when user has had enough, dispose it.
    Wednesday, November 25, 2015 1:08 AM
  • Hi Man, 

    You may consider using window.setTimeout to loop and check your dialog content. 

    Attached is a sample code that works for simple Site Setting page and get the DOM within it.

    OpenPopUpPageWithDialogOptions({url:'/_layouts/15/settings.aspx'});
    
    window["Loop"] = function(){
    var dialog = SP.UI.ModalDialog.get_childDialog();
    if(dialog !=null && dialog.$e_0 != null)
    {
    	var dom = dialog.$e_0.getElementById("ctl00_PlaceHolderMain_Customization_RptControls_DesignEditor");
    	alert(dom);
    }
    else{
     window.setTimeout(Loop,300);
    }
    };
    
    EnsureScript("SP.UI.Dialog.js", "undefined", Loop);

    Hope it can be used and for your to do more sophisticated logic.


    Cheng

    Wednesday, November 25, 2015 3:18 AM
  • Hi,

    As a workaround, we can create a new HTML page or aspx page with in the fields and add the JavaScript code in the page. Like bind color picker plugin. Then Open the page using SP.UI.ModalDialog.showModalDialog in SharePoint.

    Best Regards,

    Dennis


    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact tnmff@microsoft.com.

    Thursday, November 26, 2015 7:09 AM
    Moderator
  • When my enterprise shifted to SharePoint2016, my use of this following code (as used above) no longer detected that the modal was fully loaded:

    if(dialog !=null && dialog.$e_0 != null)

    My debugger seems to say that dialog.$e_0  is undefined. Is there an equivalent working code for the SharePoint 2016 on premise environment that allows me to detect that the modal is fully loaded and available for modification through JS? 

    Monday, October 21, 2019 3:09 PM