3

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.

5
  • 1
    if you try with $(function(){ alert("hello world"); }); just like that with no "noConflict" or anything, does it work? Also are you sure your JSfile that contains the jquery code is loaded after the call to the jQuery file? Dec 24, 2016 at 0:13
  • yes. it works perfectly fine until i publish the page. so i'm wondering if there is some other sp js that interferes when i publish the page. Dec 24, 2016 at 11:20
  • 1
    This is very common issue with MDS in SP 2013...Vadim answered this question a while back here.. Have a look sharepoint.stackexchange.com/questions/104849/… Dec 24, 2016 at 14:16
  • Or disable the MDS feature, looks like its gone in the Modern Experiences anyway Dec 26, 2016 at 10:11
  • Thanks @RansherSingh. I attempted to utilize SP.SOD to load a simple alert("Working"); and that did not work either. Currently, I have my script loaded in the <head> portion of my custom html masterpage with just a normal script link. Would it be best to try it with the ScriptLink instead? Dec 27, 2016 at 1:17

3 Answers 3

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.

0

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");
6
  • Thanks so much! Unfortunately, this didn't work for me either but I appreciate your time all the same. Dec 27, 2016 at 1:18
  • never mind.. i'm an idiot; i realized the masterpage linked to the file of the same name in a different site collection. bangs head on desk. Dec 28, 2016 at 14:05
  • Waiting for the page to load using setTimeout isn't really the good approach to follow.. Dec 28, 2016 at 18:02
  • Thanks @MohamedDerhalli , i have just given an example, but instead of using setTimeout, we can use another thing also as i preferred to use getScript method. Dec 29, 2016 at 5:43
  • @user2004758 Please mark it as answer if it helped you :) Feb 15, 2017 at 11:05
0

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.

6
  • thanks - this does not work either. i get an error that says object does not support property or method 'ready'... which is weird as hell. Dec 29, 2016 at 3:12
  • In which browser are you having this error? Did you try different browsers? Dec 29, 2016 at 4:00
  • yes, i tested in both IE and Chrome. the script works in Edit mode, when I Check It In, and then it ceases to work when the page is published regardless of the browser. Dec 29, 2016 at 4:30
  • How are you referencing this script? How's jQuery referenced and where? Dec 29, 2016 at 5:14
  • jQuery is referenced in the master page with a ScriptLink with LoadAfterUI set to true. The above js is also referenced in the master page but via a normal html script tag. The script tag is placed after the jQuery and everything is in the head of the document. Dec 29, 2016 at 11:54

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.