script runs too soon

Question

I have a little trouble with running a script. It seems the script runs too soon and therefore doesn't work.

My goal is a cascading dropdown menu of which various examples can be found on the internet. In my case I used Jquery.SPCadcadeDropdowns to get it to work.

I've tried this for a list, adding new items works perfect.

Now I want to implement it also for uploading documents, therefore I've added the code to EditForm.aspx.

The problem I'm having is that the script already runs before the complete page is shown (at least, that's what I'm thinking). I've added 2 alerts at the beginning and end of the code to see if they pop up, which they do.

The code I'm having is this:

    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.min.js"></script>
    <script type="text/javascript">
    //$(document).ready(function(){
    $(window).load(function(){
        alert("Before SPCascade"),
        $().SPServices.SPCascadeDropdowns({
            relationshipList: "List 1",
            relationshipListParentColumn: "List 2", 
            relationshipListChildColumn: "Title",
            parentColumn: "List 2",
            childColumn: "List 1",
            debug: true
        })
        alert("After SPCascade");
    })
    </script>

I do get both alerts, however already before it shows the complete page (it's not really a page, more a popup in the page).

Are there functions to prevent this?

Thanks in advance.

14:00 edit as requested by Atish Dipongkor: New code:

    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.min.js"></script>
    <script type="text/javascript">
    SP.SOD.executeFunc('sp.js',function(){ 
    //$(document).ready(function(){
        alert("Before SPCascade"),
        $().SPServices.SPCascadeDropdowns({
            relationshipList: "List 1",
            relationshipListParentColumn: "List 2", 
            relationshipListChildColumn: "Title",
            parentColumn: "List 2",
            childColumn: "List 1",
            debug: true
        })
        alert("After SPCascade");
    })
    </script>

Update 08-12-2015: Finally got it to work (after defining the correct dropdown to ChildColumn):

    <script language="javascript" src="/Shared%20Documents/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script language="javascript" src="/Shared%20Documents/jquery.SPServices-0.6.2.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
    $(document).ready(function(){
        $().SPServices.SPCascadeDropdowns({
            relationshipList: "List 1",
            relationshipListParentColumn: "List 2", 
            relationshipListChildColumn: "Title",
            parentColumn: "Dropdown 1",
            childColumn: "Dropdown 2",
            debug: true
        });
    });
    </script>

Thank you all for the help, hopefully this code will be of good use for others as well.

Answer 1

Try this instead. I've also fixed some errors in your code.

_spBodyOnLoadFunctionNames.push("Init");

function Init(){
    alert("Before SPCascade");
    $().SPServices.SPCascadeDropdowns({
        relationshipList: "List 1",
        relationshipListParentColumn: "List 2", 
        relationshipListChildColumn: "Title",
        parentColumn: "List 2",
        childColumn: "List 1",
        debug: true
    });
    alert("After SPCascade");
}

Answer 2

You need to delay for sp.js I guess for using $().SPServices.

In SharePoint 2010

ExecuteOrDelayUntilScriptLoaded(functionTobeCalledNext, "sp.js");

In SharePoint 2013

SP.SOD.executeFunc('sp.js', function () { 
// code goes here
 });

Ignore jQuery document ready. It doesn't ensure that sp.js is loaded.

Answer 3

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.min.js"></script>
<script>
$(document).ready(function(){
    $().SPServices.SPCascadeDropdowns({
        relationshipWebURL: "http://myserver/mysite",
        listName: "Sales Opportunities", //added this script to the Sales Opportunities NewForm.aspx
        relationshipList: "Cities",//Cities and States defined here
        relationshipListParentColumn: "State",
        relationshipListChildColumn: "Title",
        relationshipListSortColumn: "Title",
        parentColumn: "State",//name of column in Sales Opportunities
        childColumn: "City"//name of column in Sales Opportunities
    });
});
</script>