2

I have an SP2013 wiki page that I want to use a jQuery accordion on. Just with some static content, not pulling any information from anywhere in SharePoint. I created the page, inserted a script editor web part at the top, and inserted this snippet:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
    $(function () {
        $("#accordion").accordion({collapsible: true, active: false, icons:false });
    });
</script>

Then, I put the cursor under the script editor web part, and clicked on "Edit Source". Then underneath the HTML that represents the script editor, I put this HTML (basically the jQuery accordion demo HTML):

<div id="accordion">
   <h3>
      Section 1
   </h3>
   <div>
      <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
   </div>
   <h3>
      Section 2
   </h3>
   <div>
      <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.</p>
   </div>
   <h3>
      Section 3
   </h3>
   <div>
      <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.</p>
   </div>
   <h3>
      Section 4
   </h3>
   <div>
      <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.</p>
      <p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
   </div>
</div>

After I saved the page, the accordion collapsed initially (as it is supposed to), but clicking on any of the headers does not expand the section. If I go back into edit mode for the page, it works as expected - clicking a header expands the section. Save it again, and it stops working.

What am I missing? I don't think what I'm trying to do is all that complicated...

EDIT 12/8: Ok, so I put the jQuery and jQuery UI scripts in the site's Site Assets folder, and the behavior is the same -- the scripts do not get loaded in IE or Firefox unless the page is in Edit mode. Incidentally I think the other script snippet, where I hook up the accordion, is also not getting loaded unless the page is in edit mode. The reason I think this is that I changed the way I referenced the main jQuery script (to something that didn't work), and the debugger halted on $(function () { ...., saying $ was undefined.

So if jQuery is not loaded, and the debugger thinks $ is undefined, at least it's hitting that section of code. Which makes me think that in non-edit mode, not only is jQuery not getting loaded, but that section of script is not getting loaded either, because the debugger is not choking on $.

Can anyone provide any insight as to why the Script Editor web part seems to be not working in IE and Firefox? (Because apparently in Chrome it works fine.)

  • Can you see any javascript errors? – Amal Hashim Dec 5 '14 at 21:42
  • Nope. Interesting though -- it now is working in Chrome (after closing the tab and opening a new one to the page). But still not working in IE 11 or Firefox. I'm not used to the dev tools of IE and Firefox as much as the ones in Chrome, but it really doesn't look like there are any errors. – Dylan Cristy Dec 5 '14 at 21:53
  • 1
    Is the jQuery library not getting loaded for some reason when you save the page? Throw this in your dev tools and if it comes back true it's not coming through. typeof jQuery == 'undefined' – Jordan Dec 5 '14 at 22:04
  • It could be some CSS issue, which may be blocking the jQuery selectors(in accordion plugin) to grab the right DOM object...You have to use the developer tools to identify the exact cause. – Amit Tyagi Dec 5 '14 at 22:13
  • @Jordan you were correct. jQuery is undefined for Firefox and IE, but is defined (evaluated to false) for Chrome. So now... why would jQuery only load in edit mode? Because it does work in all three browsers in edit mode. Anyway, Monday I am going to try moving the scripts into the Site Assets, so they're not getting pulled from jQuery.com. We'll see if that changes anything. – Dylan Cristy Dec 5 '14 at 22:16
7

Ok, solved it. The script links to the jQuery and jQuery UI files needed to have the language and type attributes set.

This did not work:

<script src='/sites/mysite/SiteAssets/Scripts/jquery-1.11.1.min.js' ></script>
<script src='/sites/mysite/SiteAssets/Scripts/jquery-ui.min.js' ></script>
<script>
    $(function () {
        $("#accordion").accordion({collapsible: true, active: false, icons:false });
    });
</script>

This works:

<script language='javascript' type='text/javascript' src='/sites/mysite/SiteAssets/Scripts/jquery-1.11.1.min.js' ></script>
<script language='javascript' type='text/javascript' src='/sites/mysite/SiteAssets/Scripts/jquery-ui.min.js' ></script>
<script>
    $(function () {
        $("#accordion").accordion({collapsible: true, active: false, icons:false });
    });
</script>
  • +1 - Setting the type attribute worked for me. When editing the page through SharePoint Designer, I received an error that the type attribute was required in XHTML 1.0 Strict Mode. This makes sense as to why it wouldn't work without it. – Howard Renollet Jun 12 '15 at 20:10
0

I wrestled w/ this same problem when we upgraded to SP2013. I was attempting it on the client side in a content editor, and thus loading the ui libraries outside of the DOM Header, and I did not have success w/ the answer above (fully referencing the script library).

The problem I discovered was a conflict with the jQuery "$" call method, as jQuery-ui also leverages "$" to invoke its functions.

I solved by using the jQuery "$.noConflict();" setup method inside of my function, which releases the "$" assignment from jQuery, and allows jQuery-ui to leverage it instead.

IMPORTANT: I did this INSIDE of my jQuery-ui function, because doing it outside lead the DOM to attempt to use jquery-ui for all remaining scripts that invoked the "$" call.

<!--CDN for CSS of DPMG OL-->
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

<!--CDN for js of DPMG OL-->
<script language="javascript" type="text/javascript" src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<script>
function accordian() {
    $.noConflict();
    $("#accordion").accordion(
        {collapsible: "true", 
        heightStyle: "content", 
        active:"false"});
    };

ExecuteOrDelayUntilScriptLoaded(accordian, "sp.js");
</script>

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.