lundi 8 décembre 2014

jQuery accordion on Wiki page only works in edit mode?



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.)








1 commentaires: