6

I'm currently configuring a SharePoint Online (Office 365) site where I need to use jQuery. A very common scenario where I do as I usually do. So I activate

  • Site Collection Feature SharePoint Server Publishing Infrastructure and
  • Site Feature SharePoint Server Publishing

I Upload and publish the new masterpage, based on seattle.master, including the familiar script

<head>
...
    <script type="text/javascript" src="https://bouvetsverige.sharepoint.com/teams/customer/_catalogs/masterpage/script/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="https://bouvetsverige.sharepoint.com/teams/customer/_catalogs/masterpage/script/customer.js"></script>
...
</head>

In my customer.js file, this is all the content, for starters

jQuery.noConflict();
jQuery(document).ready(function() {
    alert("jQuery ready!");
});

Reloading the start page - nothing happens. No alert box and no jQuery reference in the source. This effect is the same on all eight subsites as well. All but one, which by coincidence don't have the site feature SharePoint Server Publishing switched on.

Upon deactivation of SharePoint Server Publishing, the alert box shows every time.

enter image description here

Still, no visible jQuery file in the source.

Moving on to the Network tab of Chrome DevTools F12, I find a small file called mjquery.js, which is much smaller than my jQuery.min file of 94kB. This file is not from my original source, but from somewhere else. It's both strange and interesting to see this behavior from SharePoint Online.

enter image description here

However, the question remains:

  • Why can't I use site feature SharePoint Server Publishing with jQuery?
  • As a bonus question from this event: What happened to my original jQuery.min file? Was it replaced by the mysterious mjquery.js?

Edit

I found another mystery, which may be of importance. When the SharePoint Server Publishing feature isn’t enabled the links from the site icon and top navigation bar both use the following URL https://bouvetsverige.sharepoint.com/teams/Customer/_layouts/15/start.aspx#//teams/Customer/SitePages/Home.aspx, which redirects to https://bouvetsverige.sharepoint.com/teams/Customer/SitePages/Home.aspx. Adding an image to the Master Page, it is the only thing visible at first (and nothing else), before the actual start page is loaded. It doesn’t exist on the start page though. Looking at the design manager preview option – this is what I see.

enter image description here

The smiley is placed inside the h1 tag here, but as I move it around in the markup, the behavior is the same. When the feature is enabled, this redirect doesn’t exist, and the smiley doesn’t show. I guess that's why the javascript works when the feature is turned off...

The site is a team site template, and I’ll try to do the same in a publishing portal.

  • Is there any errors in the log files? – Amal Hashim Oct 20 '14 at 13:38
  • @AmalHashim I'll try in my SPO tenant using Get-SPOAppErrors technet.microsoft.com/en-us/library/fp161379.aspx – Benny Skogberg Oct 20 '14 at 13:42
  • mquery is not related to this. It is a smaller version of jQuery implemented and mantained by Microsoft (hence the m). It is loaded by default in some pages in SharePoint. – Robert Lindgren Oct 20 '14 at 13:45
  • jQuery and publishing works fine for me...You're sure the sites are using the correct master page? Try putting a visual element on the master just as a sanity check. – Derek Gusoff Oct 20 '14 at 19:19
  • @DerekGusoff I'm confident, but I'll do just that. Problem is, if i switch Sharepoint server publishing off, it works. Switching it on disables jQuery. No master page change in between. – Benny Skogberg Oct 20 '14 at 19:28
2

You can absolutely add a reference to jQuery in the master page and have it work on sites with publishing enabled. I do it all the time.

I think a lot of your investigation is red herrings. Probably the most important thing to check is where in the you're adding the references to your scripts. I always add mine at the bottom of the head so I know that SharePoint is done loading all its stuff.

Also, I'd remove the protocol and host and make the links relative:

<script type="text/javascript" src="/teams/customer/_catalogs/masterpage/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/teams/customer/_catalogs/masterpage/script/customer.js"></script>

Finally, I always use Firebug to check this, but if you look on the Net tab, you can see if there are any errors loading the files. It could be as simple as a bad path to them. Also, you may need to check them in. If you look on the Net tab and you're getting 404s, then one of those two things should fix it.

That ought to get you past the loading issues. With MDS enabled, $(document).ready() may not work for you because a lot of pieces of the page are AJAXed in. That doesn't mean that you should turn MDS off, but you'll need to understand what part of the page you want to work with and how to detect if it's loaded or not. As SharePoint (especially SharePoint Online in Office365) becomes more AJAX-y, we're all going to have to get good at this.

  • Thank you Marc! I started with a new SC with template Publishing Portal, and followed your example above. I don't know what is wrong with my original site, but still I got it to work using firebug in Firefox. Probably it's best to start with a publishing portal that doesn't make funny redirects and who I don't get to work. – Benny Skogberg Oct 27 '14 at 14:08
-1

Well, Publishing feature has got nothing to do with JQuery file. The possible reason for this behavior could be - Publishing feature will usually have additional/different tags in masterpage which could interfere with rendering of the page making it faster, I believe this is the case for you. This is the Lazy loading mechanism in which not all SharePoint Javascript libraries, Images and CSS files are loaded when the page is ready.

To make this work, use

_spBodyOnLoadFunctionNames.push("CallMe");

function CallMe() { alert("jQuery ready!"); }

instead of --

jQuery.noConflict(); jQuery(document).ready(function() { alert("jQuery ready!"); });

  • The problem is jQuery files are not getting loaded – Amal Hashim Oct 20 '14 at 18:18
  • so you are saying that you did not see your jquery-1.11.1.min.js and Customer.js in the IE developer toolbar Scripts tab after you turn the publishing feature on? If yes, then the problem is your masterpage. let me know if you checked it. – ssdar Oct 20 '14 at 18:21
  • Yes. Instead of jQuery a new file with the name mjquery is appearing – Amal Hashim Oct 20 '14 at 18:22
  • use SharePoint:ScriptLink instead of script with Defer="true". This line would load the page and then load the script file. Using Defer=”False” is basically the same as loading the script with this method. – ssdar Oct 20 '14 at 18:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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