1

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.

  • You're missing a semi-colon after the SP.SOD.executeFunc closing }) right before your alert. Also, I always use the $(document).ready(function(){});. I think the JQuery needs the $(document).ready function to work. I would try that rather than the SP.SOD.executeFunc – Erin L Dec 4 '15 at 15:20
  • Hi Erin, Thank you for your reply. I've added the semi-colon and put the $(document).ready(function(){}); code back. Unfortunately no luck. I'm still wondering if loading the script goes well. The page loads the first part, then I get the 2 alerts. When I've clicked OK on both the rest of the page turns visible. Could it be the problem you think? – Luna08 Dec 4 '15 at 20:56
  • Let me type up an answer so I can include some debugging code for you – Erin L Dec 4 '15 at 21:21
  • Try adding the spcascadedropdowns script at the end of the page and check – ANUPAVAN MUDDANA Dec 4 '15 at 21:39
  • Post your update as an answer, not as an edit to the question body please – Robert Lindgren Dec 8 '15 at 10:20
3

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");
}
  • Thank you for your quick reply, however unfortunately it didn't work. When adding this code I don't even get the alerts anymore. Not sure what happens? – Luna08 Dec 4 '15 at 12:34
  • What version of SharePoint are you using? – Submits Dec 4 '15 at 14:20
  • Have you checked your browser's console to debug any errors? My original code had an additional ) in it (copy pasted from your code). I've updated my answer's code. Your original code also had errors, which I've fixed in my code. Try it again. – Submits Dec 4 '15 at 14:24
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.

  • Thank you for your quick reply, however unfortunately it didn't work. When adding this code I don't even get the alerts anymore. Not sure what happens? – Luna08 Dec 4 '15 at 12:35
  • can you update your question? need to see how did you try? – Atish Dipongkor - MVP Dec 4 '15 at 12:45
  • I've updated the question with the new code – Luna08 Dec 4 '15 at 13:01
  • parameters are correct? I mean { relationshipList: "List 1", relationshipListParentColumn: "List 2", relationshipListChildColumn: "Title", parentColumn: "List 2", childColumn: "List 1", debug: true } – Atish Dipongkor - MVP Dec 4 '15 at 13:09
  • I'm not sure what you mean with parameters? I guess they are correct as it does work in the NewForm.aspx for the custom list I've made (same code). – Luna08 Dec 4 '15 at 13:44
0
<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>
  • I missed the Jquery script on the first line and a semi-colon; I just edited it. – Erin L Dec 4 '15 at 21:28
  • Thank you for your input, I've copied the (updated) code and tested it. I get the first alert: "Before SPCascade" and a alert "undefined". I don't get the "After SPCascade" alert. Unfortunately I don't know what you mean with adding a Div on the page. I'm not sure if I even can add it. The page is a standard page, I can add items by adding colums? – Luna08 Dec 4 '15 at 21:54
  • You can add underneath your last </script> tag: <div id='debug'></div>. But don't worry about it right now. I have a demo on my site almost working. I know the script is loading because it's clearing out my child options, but it doesn't populate the children when I select a parent. Are you on a deadline? If not, I can look at it Monday. – Erin L Dec 4 '15 at 22:10
  • I just got it working and am editing my code. Since I'm unsure about your Lists and Columns, I did it with State and City, which should be pretty clear for you. I'm replacing my code above. (You may or may not need relationshipWebURL:. I needed it, but I think it's because I'm on a non-standard port. – Erin L Dec 4 '15 at 22:19
  • The biggest issue was that you're missing listName: "ListUsingDropdowns" – Erin L Dec 4 '15 at 22:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.