This project has moved. For the latest updates, please go here.

Converting SPServices SOAP to use Promises

Jan 6 at 3:48 PM
Edited Jan 6 at 3:50 PM
I'm working through the Moving from SPServices to REST series and converting old, hardcoded dynamic navigation menus to SPServices SOAP, to SOAP with promises, and ultimately to REST. I've worked through converting SPServices to use promises successfully, however the top menu UL Id variables we built with these calls no longer render when the sub menu navigation element is clicked.

So instead of showing:
<h2>Commercial</h2> 
_>>>>>><li> button link </li> <li button link2 </li> etc.<<<<<<<<<
       <h3>Prime Contract</h3>
        <li> button link </li> <li button link2 </li> etc.
       <h3>Contract</h3>
       <li> button link </li> <li button link2 </li> etc.
It displays as:
<h2>Commercial</h2> 
       <h3>Prime Contract</h3>
        <li> button link </li> <li button link2 </li> etc.
       <h3>Contract</h3>
       <li> button link </li> <li button link2 </li> etc.
I've reached the limit of what I can teach myself and not sure what I should be focusing on to solve the problem. The purpose of this exercise is to increase my understanding of SOAP, REST, JS, and JQuery so I'd like to understand the why before moving on to REST. Any guidance would be appreciated. Please let me know if you require additional information.

Original SOAP Call:
$().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "Nav",
    CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='URL' /><FieldRef Name='Icon' /><FieldRef Name='Section' /><FieldRef Name='ID' /><FieldRef Name='Display Order' /></ViewFields>",
    CAMLQuery: "<Query><Where><Eq><FieldRef Name='Section'/><Value Type='Text'>Prime Contract</Value></Eq></Where><OrderBy><FieldRef Name='Display Order' Ascending='True' /></OrderBy></Query>",
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
        var liHtml4 = "<li><a href='" + $(this).attr("ows_URL") + "'><img alt='' src='" + $(this).attr("ows_Icon") + "' />" + $(this).attr("ows_Title") + "</a></li>";
        $("#tasksUL4").append(liHtml4);
      });
    }
  });
$().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "Nav",
    CAMLViewFields: "<ViewFields><FieldRef Name='Title' /><FieldRef Name='URL' /><FieldRef Name='Icon' /><FieldRef Name='Section' /><FieldRef Name='ID' /><FieldRef Name='Display Order' /></ViewFields>",
    CAMLQuery: "<Query><Where><Eq><FieldRef Name='Section'/><Value Type='Text'>Contract</Value></Eq></Where><OrderBy><FieldRef Name='Display Order' Ascending='True' /></OrderBy></Query>",
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
        var liHtml5 = "<li><a href='" + $(this).attr("ows_URL") + "'><img alt='' src='" + $(this).attr("ows_Icon") + "' />" + $(this).attr("ows_Title") + "</a></li>";
        $("#tasksUL5").append(liHtml5);
      });
    }
  });
Shared Navigation Code:
$(document).ready(function() {
$("#Commercial-PrimeContract").prepend($("#Commercial").html());
});
Convert SOAP with promises:
var p2 = $().SPServices({
    operation: "GetListItems",
    listName: "Nav",
    CAMLQuery: "<Query><Where><Eq><FieldRef Name='Section'/><Value Type='Text'>Public Relations</Value></Eq></Where>" + "<OrderBy>" + "<FieldRef Name='Display Order' Ascending='True' />" + "</OrderBy>" + "</Query>",
    CAMLViewFields: "<ViewFields>" + "<FieldRef Name='Title' />" + "<FieldRef Name='URL' />" + "<FieldRef Name='Icon' />" + "<FieldRef Name='Section' />" + "<FieldRef Name='Display Order' />" + "<FieldRef Name='ID' />" + "</ViewFields>"
});
p2.done(function() {
    $(p2.responseXML).SPFilterNode("z:row").each(function() {
        var liHtml2 = "<li><a href='" + $(this).attr("ows_URL") + "'><img alt='' src='" + $(this).attr("ows_Icon") + "' />" + $(this).attr("ows_Title") + "</a></li>";
        $("#tasksUL2").append(liHtml2);
      });
});
var p3 = $().SPServices({
    operation: "GetListItems",
    listName: "Nav",
    CAMLQuery: "<Query><Where><Eq><FieldRef Name='Section'/><Value Type='Text'>Commercial</Value></Eq></Where>" + "<OrderBy>" + "<FieldRef Name='Display Order' Ascending='True' />" + "</OrderBy>" + "</Query>",
    CAMLViewFields: "<ViewFields>" + "<FieldRef Name='Title' />" + "<FieldRef Name='URL' />" + "<FieldRef Name='Icon' />" + "<FieldRef Name='Section' />" + "<FieldRef Name='Display Order' />" + "<FieldRef Name='ID' />" + "</ViewFields>"
});
p3.done(function() {
    $(p3.responseXML).SPFilterNode("z:row").each(function() {
        var liHtml3 = "<li><a href='" + $(this).attr("ows_URL") + "'><img alt='' src='" + $(this).attr("ows_Icon") + "' />" + $(this).attr("ows_Title") + "</a></li>";
        $("#tasksUL3").append(liHtml3);
      });
});
var p4 = $().SPServices({
    operation: "GetListItems",
    listName: "Nav",
    CAMLQuery: "<Query><Where><Eq><FieldRef Name='Section'/><Value Type='Text'>Prime Contract</Value></Eq></Where>" + "<OrderBy>" + "<FieldRef Name='Display Order' Ascending='True' />" + "</OrderBy>" + "</Query>",
    CAMLViewFields: "<ViewFields>" + "<FieldRef Name='Title' />" + "<FieldRef Name='URL' />" + "<FieldRef Name='Icon' />" + "<FieldRef Name='Section' />" + "<FieldRef Name='Display Order' />" + "<FieldRef Name='ID' />" + "</ViewFields>"
});
HTML used by both:
<div id="preload-01"></div>
<div id="tabletui">
    <div id="leftcontainer">
        <ul>
            <li id="logo"><a href="#Default"><img alt=""  src/SiteAssets/TabletUI/_images/Logo.png" width=175px /></a></li>
            <li><a href="#Commercial">Commercial</a>
                <ul id="CommercialSubMenu" class="submenu">
                    <li><a href="#Commercial-PrimeContract">Prime Contract</a></li>
                    <li><a href="#Commercial-Procurement">Procurement</a></li>
                    <li><a href="#Commercial-Business">Business</a></li>
                    <li><a href="#Commercial-ProjectControls">Project Controls</a></li>
                </ul>
            </li>
        </ul>
<!-- -->        
        <div id="Commercial" class="section">
            <h2>Commercial</h2>
                <ul class="icons" > 
                    <ul id="tasksUL3">  
                </ul>
        </div>
<!-- -->
<div id="rightcontainer">
        <div id="Commercial-PrimeContract" class="section">
            <h3>Prime Contract</h3>
            <ul class="icons">
                    <ul id="tasksUL4"> 
            </ul>
            <h3>Contract</h3>
            <ul class="icons">
                    <ul id="tasksUL5"> 
            </ul>
        </div>
    </div>
JavaScript Code snippets:
$(document).ready(function(){
    //Assign onclick Event
    $(document).on("click","#leftcontainer a",function() {
        return DoMenuAction(this);
    });

    //Load specific content window if specified
    if (window.location.hash.indexOf("Calendar") == -1){
        if (window.location.hash != ""){
            DoMenuAction(window.location.hash);
        }else{
            DoMenuAction("#Default");
        }
    }else{
        DoMenuAction("#Default");
    }
});
function DoMenuAction(sLink){

    //Is sLink a Hyperlink Object or just a straight link?  
    if (sLink.href !== undefined){
        var sHashtag = sLink.href.substring(sLink.href.indexOf("#"));
    }else{
        var sHashtag = sLink.substring(sLink.indexOf("#"));
    }
    
    //Clear selected style
    $("#leftcontainer a").removeClass("selected");
    $("#rightcontainer").removeClass("background");
    
    //Set clicked link style to selected link (not if the logo was clicked)
    if (sHashtag.toUpperCase() != "#DEFAULT"){
        $("a[href='" + sHashtag + "']").addClass("selected");
    }
    
    //Loop through all visible Submenu's
    $(".submenu:visible").each(function(){
        //Check if the Hashtag exists soemwhere in this submenu
        if ($(this).parent().find("a[href='" + sHashtag + "']").length == 0){
            //Hashtag belongs to a different submenu parent
            $(this).slideUp("500");
        }
    });
    
    //Expand submenu based on link hashtag ID
    if ($("a[href='" + sHashtag + "']").parent().children(".submenu").length != 0){ 
        //Selected submenu Parent
        $("a[href='" + sHashtag + "']").parent().children(".submenu").slideDown("500"); 
    }else if ($("a[href='" + sHashtag + "']").parent().parent(".submenu").length != 0){
        //Selected submenu Child
        $("a[href='" + sHashtag + "']").parent().parent(".submenu").slideDown("500");
    }

    /*********************************************************************************/

    //Check to see if Element exists, hide background
    if ($(sHashtag).length == 0){
        $("#rightcontainer").addClass("background");
        $(".section").slideUp("100");
    }else{
        $(".section").hide();
    }
    $(sHashtag).slideDown("100");
    
    
    return false;
}