Page Won't Load jQuery Script After being Published

Question

I'm experiencing an issue where I cannot get my jQuery script to work once a page is published. Based on the answers below, all I need to do is simply run

SP.SOD.executeFunc("sp.js", "SP.ClientContext", function(){
jQuery(document).ready(function ($){    
        var parent = $("#zz12_V4QuickLaunchMenu > ul > li:has('ul')");
        parent.find("span.menu-item-text:first").append("&nbsp; &nbsp;<i class='fa fa-angle-down' aria-hidden='true'></i>");
        parent.closest("li").find("> ul").hide();

        parent.click(function(){
        var childUL = $(this).closest("li").find("> ul");
        var isVisible = childUL.is(":visible");

    if (isVisible) {

  childUL.slideUp();
  }
  else {
  childUL.slideDown();

  }

  });
});
});

except this does not work at all. I am familiar with jQuery, less so with javascript. So I do not know how to call my jQuery inside this javascript function. It looks to me that '$' is being used by another library, how do I ensure it is used inside of this function? Thanks.

Answer 1

Just in case anyone comes across this, the issue was that SharePoint uses two different IDs for Display and Edit modes in the topNav module. Changing the selector worked for me.

Answer 2

you can try something like below code:

    // wait until jquery load is complete
    function waituntilJqueryLoad() {
       if (window.$)
          isLoaded();
       else
          setTimeout(function () { waituntilJqueryLoad() }, 50);
   }

  // Execute Script when DOM is ready
  function isLoaded() {

$(document).ready(function () {
    //write your code here
});


   _spBodyOnLoadFunctionNames.push("waituntilJqueryLoad");

Answer 3

You should do it this way:

$(document).ready(function () {
    SP.SOD.executeOrDelayUntilScriptLoaded(yourFunction, "SP.js");
    function yourFunction() {
        var context = SP.ClientContext.get_current();
        //now you have the context, you can do anything here.
    }
});

This will wait for the jQuery to be loaded, then it will execute everything else, you should not load SharePoint files first, then wait for document to load using jQuery.