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.

Improve this question
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? Commented 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. Commented 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/… Commented Dec 24, 2016 at 14:16
  • Or disable the MDS feature, looks like its gone in the Modern Experiences anyway Commented 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? Commented Dec 27, 2016 at 1:17

3 Answers 3

Reset to default
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.

Improve this answer
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");
Improve this answer
6
  • Thanks so much! Unfortunately, this didn't work for me either but I appreciate your time all the same. Commented 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. Commented Dec 28, 2016 at 14:05
  • Waiting for the page to load using setTimeout isn't really the good approach to follow.. Commented 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. Commented Dec 29, 2016 at 5:43
  • @user2004758 Please mark it as answer if it helped you :) Commented 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.

Improve this answer
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. Commented Dec 29, 2016 at 3:12
  • In which browser are you having this error? Did you try different browsers? Commented 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. Commented Dec 29, 2016 at 4:30
  • How are you referencing this script? How's jQuery referenced and where? Commented 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. Commented 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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.