Populate navigation menu with ajax

Question

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.

Answer 1

Finally I managed to do it with this :

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

Answer 2

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"]) }