SP.UI.ModalDialog works only in Edit mode

Question

I have a custom list in SharePoint 2013 with cascading drop downs for City and State fields. Due to the size of the lookup list, it takes a few seconds to fully load. During this time, it shows some of the elements that are supposed to be hidden until they are eventually hidden. Ew.

I'd like to use the SP.UI.ModalDialog while the custom list is loading to improve the overall look and user experience. It works great while loading the page to edit the CEWP. However, when actually adding/editing an item to the list, nothing is displayed and even the cascading drop downs aren't functioning.

I'm trying to get it working on a test list before implementing it on the actual list. Here is the CEWP from the test list:

<script 
    src="https://code.jquery.com/jquery-3.3.1.js" 
    type="text/javascript"
    language="javascript">
</script>

<script 
    type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"
    language="javascript">
</script>

<script 
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.js"
    type="text/javascript"
    language="javascript">
</script> 

<script type="text/javascript" language="javascript">

//Display dialogue box
oLoader = SP.UI.ModalDialog.showWaitScreenWithNoClose(SP.Res.dialogLoading15);

$(document).ready(function(){

    //Cascading drop downs for State and City fields
    $().SPServices.SPCascadeDropdowns(  
        {  
        relationshipList: "CitiesLookUp",  
        relationshipListParentColumn: "State",  
        relationshipListChildColumn: "Title",  
        parentColumn: "State",  
        childColumn: "City",  
        debug: true
    });  

//Close dialogue box
oLoader.close();

});

</script>

A common solution I found was specifying title and/or language attributes in the script tags - but I did this for all of them and unfortunately that hasn't worked for me.

I'm not a SP Developer and have never done web development before this request. However, I understand the basic concepts and do have programming experience. Any help is very greatly appreciated! :)

Answer 1

Not sure if this will totally solve your problem, but here's a couple of ideas:

• You're loading jQuery twice, first you are loading the uncompressed 3.3.1 version directly from jQuery.com, and then you are loading the minified 1.6 version from Google. You don't need both, so I would recommend going for the minified version of the newer one (3.3.1), so you can take out that second script link to Google.
• The modal dialog might not be working because the SharePoint script file that has the modal dialog code in it might not be loaded yet. SharePoint does give you ways to wait for scripts to load before trying to do stuff.

Here's what I would try first:

<!-- load the minified version of the latest jQuery -->
<script 
    src="https://code.jquery.com/jquery-3.3.1.min.js" 
    type="text/javascript"
    language="javascript">
</script>

<script 
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.js"
    type="text/javascript"
    language="javascript">
</script> 

<script type="text/javascript" language="javascript">

// declare the variable here so its available in multiple scopes
var oLoader = null;

// wait for the script to load that has the modal dialog code
SP.SOD.executeOrDelayUntilScriptLoaded(showModal, 'sp.js');

function showModal() {
    //Display dialogue box
    oLoader = SP.UI.ModalDialog.showWaitScreenWithNoClose(SP.Res.dialogLoading15);
}

$(document).ready(function(){

    //Cascading drop downs for State and City fields
    $().SPServices.SPCascadeDropdowns(  
        {  
        relationshipList: "CitiesLookUp",  
        relationshipListParentColumn: "State",  
        relationshipListChildColumn: "Title",  
        parentColumn: "State",  
        childColumn: "City",  
        debug: true
    });  

    //Close dialogue box
    oLoader.close();

});

</script>

Now, I still see a potential problem here, and that is that the SPCascadeDropDowns function is likely to be initiating an asynchronous request to SharePoint to get the data from the lookup lists to build the dropdowns from. That means that it is not really blocking code execution, and where you have oLoader.close(), even though it's after the SPCascadeDropdowns, it's not guaranteed to wait for SPCascadeDropdowns to finish before it executes. So the modal dialog may in fact be opening, but then immediately closing, happening so fast that you don't even see it.

The ideal way to deal with it would be if SPCascadeDropdowns had a way to attach a callback function to execute once it was done getting the data and setting up the dropdowns, but it doesn't. If you look at the documentation, it does have something called completeFunc, but that says:

If specified, the completefunc will be called each time there is a change to parentColumn. Potential uses for the completefunc: consistent default formatting overrides, additional lookup customizations, image manipulations, etc.

So that doesn't really sound like a true callback to me.

Without a callback to use, you could kind of fake it by using setTimeout to delay the closing of the modal for a couple seconds:

$(document).ready(function(){

    //Cascading drop downs for State and City fields
    $().SPServices.SPCascadeDropdowns(  
        {  
        relationshipList: "CitiesLookUp",  
        relationshipListParentColumn: "State",  
        relationshipListChildColumn: "Title",  
        parentColumn: "State",  
        childColumn: "City",  
        debug: true
    });  

    // setTimeout takes the delay in milliseconds, so 2000 is really 2 seconds
    setTimeout(function() {
        if (oLoader !== null) {
            //Close dialogue box
            oLoader.close();
        }
    }, 2000);

});

Answer 2

I tried the suggestions above but unfortunately had no luck. Rather than the SP.UI.ModalDialog, I ended up hiding the overlay of the page, then showing it once it fully loaded. It's a workaround but I was okay with it since the delay was only a second or two so it doesn't really leave the user wondering what's happening - but it does give it a much cleaner look while everything is being rendered to the page.

CAUTION: If storing code in CEWP rather than site assets, use 'opacity', .5 in the window load function until you know it works properly or else the page could remain hidden and it can be tricky to remove the CEWP.

For example:

<script 
src="https://code.jquery.com/jquery-3.3.1.js" 
type=text/javascript>
</script>

<script type=text/javascript>

// Hide overlay of page immediately
$('#s4-workspace').css('opacity', 0);

$( window ).on('load', function() {
//Show overlay of page after everything is fully loaded
$('#s4-workspace').css('opacity', 1);
});

</script>