-4

Newbie question.

We are using JQuery Tabs in SharePont 2013 online based on http://jqueryui.com/accordion/#no-auto-height

Sometimes SharePoint appends the URL and when that happens the script doesn't work.

The Original URL looks like: /a/SitePages/Step1.aspx,

and the appended URL looks like: /a/_layouts/15/start.aspx#/SitePages/Step1.aspx

We found a script (on Hillbilly's blog) for JQuery Tabs implemented for SharePoint, and it works great, but it appends multiple web parts to the Content Editor web part.

We are only using one web part (Content Editor), and aren't appending additional web parts.

Hillbilly's script is here: http://www.sharepointhillbilly.com/Lists/Posts/Post.aspx?ID=42.

I think we need to add 'SetCookie' to the basic JQuery script to make it work, but what would that look like?

  <script>
    $(function() {
        $( "#accordion" ).accordion({
          heightStyle: "content"
    });
  </script>
Pranav Singh
  • 17,079
  • 30
  • 77
  • 104
  • Hi @mkaplanpmp. Welcome to StackOverflow. It is not quite clear what you are trying to do in your question. Are you trying to set a cookie through javascript when a tab is changed? – 3dgoo Jul 02 '14 at 00:21
  • 1
    Guys, rather than just down voting this question, leave a comment with some feedback for the OP so they know how improve the question. Or so they know what is wrong so they can improve on any future questions. – 3dgoo Jul 02 '14 at 00:31
  • Thank you @3dgoo, I appreciate the feedback and clarification! We are trying to set a cookie through javascript when the tab is changed, and also when the page initially loads. – mkaplanpmp Jul 02 '14 at 00:55

1 Answers1

0

There is an excellent StackOverflow answer on How do I set/unset cookie with jQuery?

There is a jQuery plug in that allows you to easily set cookies through javascript: https://github.com/carhartl/jquery-cookie

Here is how to set a cookie using the jquery-cookie plug in:

$.cookie('test', 1);

Here is how to add an event listener that will call a function each time a h3 in the accordion is clicked:

$('#accordion > h3').on('click', function() {
    $.cookie('test', 1);
});

Overall your javascript should look something like this:

(function ($) {
    $(document).ready(function() {

        $('#accordion').accordion({
            heightStyle: 'content'
        });

        // Initially set the cookie on page load
        $.cookie('test', 1);

        $('#accordion > h3').on('click', function() {
            // Set the cookie each time a tab is changed
            $.cookie('test', $(this).text());
        });

    });
})(jQuery);

Demo

Community
  • 1
  • 1
3dgoo
  • 15,716
  • 6
  • 46
  • 58
  • Thank you @3dgoo! Looks similar to the javascript used by Hillbilly, but still can't get it to work. I added expires and path information. $.cookie('test', 1, {expires: 7, path: '/' }); – mkaplanpmp Jul 02 '14 at 11:31
  • @mkaplanpmp Have you checked your console to make sure there are no javascript errors? The above code works for me. I've created a demo that shows the above code working: http://jsfiddle.net/422EU/ Have a play. – 3dgoo Jul 02 '14 at 22:38
  • Thank you @3dgoo! My apology for not being clear. I'm trying to get accordion and tabs to work in SharePoint and assumed adding cookies would do the trick, and it probably will... But how to implement it within SharePoint is the key, and the challenging part. – mkaplanpmp Jul 03 '14 at 16:26
  • Thank you @3dgoo! Microsoft implemented Minimal Download Strategy (MDS) in SharePoint 2013, and now they append each URL with "/a/_layouts/15/start.aspx#" which causes JQuery to fail. I disabled MDS and am using JQuery Accordion, and Tabs now, without issue. I would like to figure-out how to implement JQuery with MDS enabled, which is where Hillbilly's script might help in determining the right approach. I'm not a programmer, so dissecting/modifying it to work is over my head. – mkaplanpmp Jul 03 '14 at 16:35