0

I created a dynamic horizontal navigation menu that gets its data from SharePoint lists. It renders and works great but I am dealing with a situation that is very abnormal. The items in the navigation are all links but link that's in the DOM and the link that I see when I hover over them are different. When I click the item, it always leads me to a broken page. See below for an example. enter image description here

Someone please explain why this is happening and how to fix. Here's the code:

var cacheNavData = [];
var cacheSubNavData = [];
var cacheMegaMenuData = [];
var cacheCategoryMenuData = [];

$(document).ready(function(){
    getData("Training Navigation").done(function(data1){
        cacheNavData = data1.d.results;
            console.log(cacheNavData);        
        getData("Sub Navigation").done(function(data2){
            cacheSubNavData = data2.d.results;
            console.log(cacheSubNavData);
            getData("Mega Menu Category").done(function(data3){
                cacheMegaMenuData = data3.d.results;
                getData("category menu").done(function(data4){
                    cacheCategoryMenuData = data4.d.results;
                    //alert(cacheCategoryMenuData)
                    createNavigation(cacheNavData);
                });
            });
        });
    });
})
function getData(lName){
    var endPointUrl=_spPageContextInfo.webAbsoluteUrl;
    if (lName != "Sub Navigation") {    
        endPointUrl+= "/_api/web/lists/getbyTitle('" + lName + "')/items";
    }else {
        endPointUrl+="/_api/web/lists/getbyTitle('" + lName + "')/items?$select=parentNav/URL, parentNav/URLNAME,subLink&$expand=parentNav";
    }
    
    return $.ajax({
        url: endPointUrl,
        type: "GET",
        headers: {
            "accept":"application/json;odata=verbose"
        }
    }); 
}
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

function createNavigation(navData) {
    var topNav = document.getElementById("myTopnav");
    for (var x = 0; x < navData.length; x++) {
        if (navData[x].dropDown === "no") {
            var aLink = _createEl("a");
            var aTextNode = document.createTextNode(navData[x].URLNAME);
            aLink.href = navData[x].URL;
            aLink.appendChild(aTextNode);
            topNav.appendChild(aLink);
        } else if (navData[x].dropDown === "yes") {
            var buildSubNavigation;
            buildSubNavigation = buildSubNavBar(navData[x]);
            topNav.appendChild(buildSubNavigation);
        } else {
            //build megamenu
            var buildSubNavigation;
            buildDirectorateNav = buildDirectorateMegaMenu(navData[x]);
        }
    }
}

function buildDirectorateMegaMenu(navDataID) {
    var buildNav;
    var topNav = document.getElementById("myTopnav");
    buildNav = buildSubNavBar(navDataID, "training");  //Build mega menu and attach in buildSubNavBar()
    topNav.appendChild(buildNav);
}

function buildSubNavBar(subNavID, isDirectorate) {
    //create div and add dropdown class
    var ddDiv = _createEl("div");
    if(isDirectorate === "training"){
        ddDiv.classList.add("Mdropdown");
    }else{
        ddDiv.classList.add("dropdown");
    }
    //create button and add text
    var btn = _createEl("button");
    if(isDirectorate === "training"){
        btn.classList.add("Mdropbtn");
    }else{
        btn.classList.add("dropbtn");
    }
    var btnText = document.createTextNode(subNavID.URLNAME);
    
    var aLink = _createEl("a");
    var aTextNode = document.createTextNode(btnText.data);
    aLink.href = subNavID.URL;
    aLink.appendChild(aTextNode);
    
    //append the text to the button
    btn.appendChild(aLink);

    //create i tag and add "fa fa-caret-down" classes
    var itag = _createEl("i");
    itag.classList.add("fa");
    itag.classList.add("fa-caret-down");
    btn.appendChild(itag);
    ddDiv.appendChild(btn);

    var ddContent = _createEl("div");
    ddContent.classList.add("dropdown-content");
    for (var i = 0; i < cacheSubNavData.length; i++) {
        if (cacheSubNavData[i].parentNav.URLNAME=== subNavID.URLNAME  && cacheSubNavData[i].parentNav.URLNAME !== "Training") {
            var li = _createEl("li");
            var a = _createEl("a");
            var aTextNode = document.createTextNode(cacheSubNavData[i].subLink.Description);

            a.href = cacheSubNavData[i].subLink.Url;
            a.appendChild(aTextNode);
            ddContent.appendChild(a);  
        }
    }

    if(isDirectorate === "training"){
        //alert("I ");
        //create div and add dropdown class
        var megaDivDropDown = _createEl("div");
        megaDivDropDown.classList.add("dropdown");

        var megaBtn = _createEl("button");
        megaBtn.classList.add("dropbtn");

        megaDivDropDown.appendChild(megaBtn);
        var megaI = _createEl("i");
        megaI.classList.add("fa");
        megaI.classList.add("fa-caret-down");

        megaBtn.appendChild(megaI);

        var megaDDivContent = _createEl("div");
        megaDDivContent.classList.add("Mdropdown-content");

        var headerDiv = _createEl("div");
        headerDiv.classList.add("Mheader");

        var megaH2 = _createEl("h2");
        var h2Text = document.createTextNode("Team Sites");

        megaH2.appendChild(h2Text);
        headerDiv.appendChild(megaH2);
        megaDDivContent.appendChild(headerDiv);

        var megaDDivRow = _createEl("div");
        megaDDivRow.classList.add("Mrow");

        //Loop through categories & sub-categories items
        for (var i = 0; i < cacheMegaMenuData.length; i++) {
            var megaDivCol = _createEl("div");
            megaDivCol.classList.add("Mcolumn");
            var colHr = _createEl("h3");
            var colHrText = document.createTextNode(cacheMegaMenuData[i].category);
            colHr.appendChild(colHrText);
            megaDivCol.appendChild(colHr);
            for (var x = 0; x < cacheCategoryMenuData.length; x++) {
                if (cacheMegaMenuData[i].category === cacheCategoryMenuData[x].category) {
                    var colAnchor = _createEl("a");
                    colAnchor.href = cacheCategoryMenuData[x].menuUrl;
                    var menuColText = document.createTextNode(cacheCategoryMenuData[x].menuItem);
                    colAnchor.appendChild(menuColText);

                    megaDivCol.appendChild(colAnchor);
                    megaDDivRow.appendChild(megaDivCol);
                    megaDDivContent.appendChild(megaDDivRow);
                    ddDiv.appendChild(megaDDivContent);
                }
            }
            //create the other stuff
            //console.log(megaDivCol)
            console.log("megaDdivRow:");
            console.log(ddDiv);
        }
    }
    ddDiv.appendChild(ddContent);
    return ddDiv;
}    
function _createEl(el) {
    return document.createElement(el);
}

I created a mock-up, but it really does behave the same way because it come from an array of objects.

I hope someone can help me with this. It's mind boggling and I've been dealing with this for DAYS.

1 Answer 1

0

In SharePoint,if you want to visit external website,you need to add "http://" or "https://" to the url,otherwise it will find the page in SharePoint.

Demo:

Site url:https://contoso.sharepoint.com/sites/dev
Subsite url:https://contoso.sharepoint.com/sites/dev/subsite

url in a tag:/sites/dev/subsite

13
  • What about for internal links? such as to different subsites?
    – OLA
    Commented Aug 24, 2020 at 3:21
  • Check the update.
    – Amos
    Commented Aug 24, 2020 at 3:27
  • I'll give that a try
    – OLA
    Commented Aug 24, 2020 at 3:33
  • I gave it a try. It works great in one environment but doesn't in another environment. It always redirects to whatever page I'm currently on.
    – OLA
    Commented Aug 24, 2020 at 3:46
  • You can also use the full sunsite url directly.
    – Amos
    Commented Aug 24, 2020 at 4:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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