1

I have a Sharepoint Online site with about 100 subsites. I want to populate the navigation menu with only the top 5 subsites and 2 static subsites.

I created an empty navigation column named NavigationTest.

I made an ajax request to build the menu and it works perfectly when I execute it from the Chrome and Firefox javascript console. But when I add the code in the master page, it doesnt work. It load without any errors and it doesnt populate the navigation menu. I think the ajax request get executed before the menu/page gets loaded.

Here the code I wrote. I also tried with (document).ready and I get the same behavior :

    $(window).load(function() {
            $.ajax({
                url: "/sites/_api/web/webs/?$select=title,ServerRelativeUrl,effectivebasepermissions&$filter=(effectivebasepermissions/high%20gt%2032)&$top=5",
                type: "GET",
                headers: {
                    "accept": "application/json;odata=verbose"
                },
            }).success(function(data) {

                var dataResult = data.d.results;
                var navHTML = "";
                if (dataResult.length == 0) {

                }
                else{
                    navHTML += "<ul class='dynamic' style='z-index: 1100;'>";
                    $(data.d.results).each(function(){
                        navHTML += "<li class='dynamic'><a class='dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode' title='"+this.Title+"' href='"+this.ServerRelativeUrl+"'><span class='additional-background ms-navedit-flyoutArrow'><span class='menu-item-text'>"+this.Title+"</span></span></a></li>";
                    });

                    navHTML += "<li class='dynamic'><a class='dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode' title='Your Sites' href='https://csaffluents.sharepoint.com/sites/SitePages/YourSites.aspx'><span class='additional-background ms-navedit-flyoutArrow'><span class='menu-item-text'>Your Sites</span></span></a></li>";
                    navHTML += "<li class='dynamic'><a class='dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode' title='All Sites' href='https://csaffluents.sharepoint.com/sites/SitePages/AllSites.aspx'><span class='additional-background ms-navedit-flyoutArrow'><span class='menu-item-text'>All Sites</span></span></a></li>";
                    navHTML += "</ul>";
                }
                $(navHTML ).insertAfter($("[title='NavigationTest']"));
            });
        });

I can see in the debugger that the query happend, didnt fail and returned something, but for some reason it does not create the HTML.

Is there a way to include JQuery(ajax) code in the master page to populate this menu after everything is loaded ?

I also tried different ways to load the ajax code, I tried loading the code directly in the master page (seatle.html) and I aslo tried with the code in a .js file.

  • 1
    Did you try placing the code in the bottom of master page? – Dhruv Jain Feb 20 '16 at 2:06
  • @DhruvJain Yes I did try, and it doesnt work either. – metraon Feb 20 '16 at 3:49
  • have you tried to call your script in additionalpagehead section of master page?also pls use document.ready method as suggested. – user13408 Feb 20 '16 at 9:40
2

Finally I managed to do it with this :

Sys.Application.add_load(MyLoad);
        function MyLoad()
        {...}
0

First thing:

  1. use $(document).ready(function{}); instead of $(window).load()

  2. use this syntax to retrieve values:

    for (i = 0; i < dataResults.length; i++) { var _id = dataResults[i]["ID"]) }

  • I already tried with $(document).ready and I get the same behavior. I doupt the "for loop" will change anything as I execute the script in the browser, it works perfectly with the each loop. I can see the data from the rest request in the console. – metraon Feb 20 '16 at 14:56

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.