Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions /

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

JQuery Cookie Plugin doesnt work in SS?


Go to End
Reply


17 Posts   3169 Views

Avatar
Hello_electro

Community Member, 80 Posts

19 February 2010 at 4:58pm

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?

Avatar
banal

Community Member, 901 Posts

19 February 2010 at 7:56pm

Edited: 19/02/2010 7:56pm

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?

Avatar
Hello_electro

Community Member, 80 Posts

20 February 2010 at 5:45am

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

Avatar
Hello_electro

Community Member, 80 Posts

21 February 2010 at 7:10am

Edited: 21/02/2010 7:14am

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();});

Avatar
banal

Community Member, 901 Posts

21 February 2010 at 9:56am

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

Avatar
Hello_electro

Community Member, 80 Posts

21 February 2010 at 10:28am

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!

Avatar
Hello_electro

Community Member, 80 Posts

21 February 2010 at 11:18am

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?

Avatar
banal

Community Member, 901 Posts

21 February 2010 at 11:34am

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.

Go to Top