Jump to:

23364 Posts in 18125 Topics by 2862 members

General Questions

SilverStripe Forums » General Questions » JQuery Cookie Plugin doesnt work in SS?

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1 2 3
Go to End
Author Topic: 2949 Views
  • Hello_electro
    Avatar
    Community Member
    80 Posts

    JQuery Cookie Plugin doesnt work in SS? Link to this post

    Has anyone tried using the JQuery Cookie Plug in?

    I am trying to get a basic accordion to work using Unordered lists (I.e. sidebar). Unfortunately when you click on any item and go to the next page the accordian that was expanded does not stay that way.

    Anything I should be doing to tell SS to pay attention to Cookies?

  • banal
    Avatar
    Community Member
    901 Posts

    Re: JQuery Cookie Plugin doesnt work in SS? Link to this post

    Hi

    Yes, I already used jQuery Cookie in a SilverStripe Site. Didn't encounter any problems.
    Do you mind sharing your JS code, so we can try to spot the issue?

  • Hello_electro
    Avatar
    Community Member
    80 Posts

    Re: JQuery Cookie Plugin doesnt work in SS? Link to this post

    Not at all! I will drop an update to this topic tonight once I get home from work. Thanks !!!!

  • Hello_electro
    Avatar
    Community Member
    80 Posts

    Re: JQuery Cookie Plugin doesnt work in SS? Link to this post

    Banal et al:

    here is the accordion I am trying to accomplish (noaccordion or collapsible):

    http://www.i-marco.nl/weblog/jquery-accordion-menu-redux2/

    I am using the jQuery 1.2.1 - New Wave Javascript
    and also the jquery cookie plugin

    I have not altered either of the above files.

    Here is the sidebar.ss snippet:

    You will notice I added $ID intosome of the classes. I did this because it seemed per the scripting there needed to be a unique identifier, i figured the $ID would give me this since there shouldn't be repetition of the page id's.

    one last thing. The <% if ApplyAccordian %> is simply a Boolean checkbox I added so that I could remove the hyperlink from the link making it a clickable item (activating the accordian) without SS applying that page hyperlink. Not sure if that was clear haha!

    Thanks for taking a peek.

    <ul id="Menu2" class="menu collapsible" >
              <% control Menu(2) %>
              <% if Children %>
                
                <% if ApplyAccordian %>
                
                  <li class="$LinkingMode $ID" id="moreLinks"><a href="#" class="$LinkingMode levela $ID">$MenuTitle.XML</a>
                <% else %>   
                
                  <li class="$LinkingMode $ID"><a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode levela $ID">$MenuTitle.XML</a>
                <% end_if %>
                   
               <% else %>
                    <li><a href="$Link $ID" title="Go to the $Title.XML page" class="$LinkingMode levela $ID">$MenuTitle.XML</a>
                <% end_if %>   
              
                 
                    <% if Children %>
                      <ul class="sub">
                         
                               <% control Children %>
                                  <li class="$ID"><a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode levelb $ID">&raquo; $MenuTitle.XML</a></li>
                               <% end_control %>
                            
                      </ul>
                    
                <% end_if %>
             </li>
             <% end_control %>
          </ul>

    This is the menu.js file:

    function initMenus() {
       $('ul.menu ul').hide();
       $.each($('ul.menu'), function(){
          var cookie = $.cookie(this.id);
          if(cookie === null || String(cookie).length < 1) {
             $('#' + this.id + '.expandfirst ul:first').show();
          }
          else {         
             $('#' + this.id + ' .' + cookie).next().show();
          }
       });
       $('ul.menu li a').click(
          function() {

             var checkElement = $(this).next();
             var parent = this.parentNode.parentNode.id;

             if($('#' + parent).hasClass('noaccordion')) {
                if((String(parent).length > 0) && (String(this.className).length > 0)) {
                   if($(this).next().is(':visible')) {
                      $.cookie(parent, null);
                   }
                   else {
                      $.cookie(parent, this.className);
                   }
                   $(this).next().toggleoggle();
                }            
             }
             if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
                if($('#' + parent).hasClass('collapsible')) {
                   $('#' + parent + ' ul:visible').toggle();
                }
                return false;
             }
             if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
                $('#' + parent + ' ul:visible').toggle();
                if((String(parent).length > 0) && (String(this.className).length > 0)) {
                   $.cookie(parent, this.className);
                }
                checkElement.toggle();
                return false;
             }
          }
       );
    }
    $(document).ready(function() {initMenus();});

  • banal
    Avatar
    Community Member
    901 Posts

    Re: JQuery Cookie Plugin doesnt work in SS? Link to this post

    Hi

    I didn't check all of your code, but it seems like the script is using the ID as identifier, whereas you put the $ID in the class of the element.
    Instead of this

    <li class="$LinkingMode $ID" id="moreLinks"><a href="#" class="$LinkingMode levela $ID">$MenuTitle.XML</a></li>

    Try something like this:

    <li class="$LinkingMode" id="menu$ID"><a href="#" class="$LinkingMode levela" id="link$ID">$MenuTitle.XML</a>

    for your menu items.

    I also wondered about this bit in your code:

    $(this).next().toggleoggle();

    This doesn't appear in the original source and will probably cause a JavaScript error.
    Do you really have a jquery cookie problem? It seems like your script wouldn't work at all ;)

  • Hello_electro
    Avatar
    Community Member
    80 Posts

    Re: JQuery Cookie Plugin doesnt work in SS? Link to this post

    Second set of eyes always helps! I actually switched that part of the code as it originally was a slideToggle. i changed it to just plain toggle. looks like i typo's pretty badly there!

    I fixed that portion so now it reads:

    $(this).next().toggle();

    I also did your suggestion about changing the way i am using unique identifiers (link$ID and menu$ID). That was much cleaner than what I was doing.

    Unfortunately those two changes still are not allowing the accordion to stay open.

    just to make sure I also inserted the orginal menu.js file to test that and still no luck.

    Anything I need to in terms of calling the cookie script aside from making it a requirement? should I hardcode it into the head? I am wondering too maybe about the doctype? Just throwing ideas out there!

  • Hello_electro
    Avatar
    Community Member
    80 Posts

    Re: JQuery Cookie Plugin doesnt work in SS? Link to this post

    So, the more I am thinking about this code, i am wondering if it even does what I want it to.

    I included a screen shot of the sidebar navigation.

    What i want to happen is that if the person expands the accordion, and chooses one of the sub links, when he gets to that page, the accordian remains expanded.

    Is this what is supposed to occur with this? IF not, is there something different I should be using?

  • banal
    Avatar
    Community Member
    901 Posts

    Re: JQuery Cookie Plugin doesnt work in SS? Link to this post

    So you're saying that the accordion works, it just doesn't stay open?
    The page you took the accordion from keeps it open even if I refresh the page, so it should work. Although when I have a look at their markup, they only set the id on the menu (<ul>) itself.
    I suggest you use the same script as on their site and try to structure the menu exactly like they do. After that, you can still add custom markup.

    Do you use firebug (http://getfirebug.com)? It can really help in debugging such things.

    2949 Views
Page: 1 2 3
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.