XSLT and Jquery.cookie help

Topics: General, Troubleshooting, XSLT
Jun 24, 2011 at 1:49 AM
Edited Jun 24, 2011 at 6:17 AM

I need a little help.  I am using a jquery menu that uses jquery.cookie to keep the menu state.  This works perfect outside the CMS, but inside the cms it creates multiple cookies instead of changing the existing cookie and the wrong menu ends up opening.

The navigation menu is in an XSLT Function.  This function includes the html for the menu and calls in jquery-min.js, jquery.cookie.js, and menu.js.  The XSLT function is called into the template.  The menus open and close, but the save state gets confused and the wrong menu drops open after you click on another menu item.  My code are below.

Hope someone can point me in the right direction,
-Rob

 

MENU XSLT FUNCTION:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:in="http://www.composite.net/ns/transformation/input/1.0" xmlns:lang="http://www.composite.net/ns/localization/1.0" xmlns:f="http://www.composite.net/ns/function/1.0" xmlns="http://www.w3.org/1999/xhtml" exclude-result-prefixes="xsl in lang f">
  <xsl:template match="/">
    <html>
      <head>
        <script src="~/frontend/js/jquery-min.js" type="text/javascript"></script>
       <script src="~/frontend/js/jquery.cookie.js" type="text/javascript"></script>
      <script src="~/frontend/js/menu.js" type="text/javascript"></script>
  
      </head>
      <body>
        <ul id="menu1" class="menu expandfirst">
          <li><a class="m1" href="#">HOME</a></li>
          <li>
            <a class="m2" href="#">SERVICES</a>
            <ul>
              <li><a href="LINK-TO-PAGE">Sub Link 1</a></li>
            </ul>
          </li>
          <li><a class="m3" href="#">NEWS</a></li>
          <li>
            <a class="m4" href="#">LEARNING CENTER</a>
            <ul>
              <li><a href="LINK-TO-PAGE">Sub Link 2</a></li>
            </ul>
          </li>
          <li>
            <a class="m5" href="#">EVENTS</a>
            <ul>
              <li><a href="LINK-TO-PAGE">Sub Link 3</a></li>
            </ul>
          </li>
          <li><a class="m6" href="LINK-TO-PAGE">CONTACT US</a></li>
        
        </ul>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

 

MENU.JS

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().slideToggle('normal');
    }    
   }
   if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    if($('#' + parent).hasClass('collapsible')) {
     $('#' + parent + ' ul:visible').slideUp('normal');
    }
    return false;
   }
   if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('#' + parent + ' ul:visible').slideUp('normal');
    if((String(parent).length > 0) && (String(this.className).length > 0)) {
     $.cookie(parent, this.className);
    }
    checkElement.slideDown('normal');
    return false;
   }
  }
 );
}
$(document).ready(function() {initMenus();});

 

JQUERY.COOKIE.JS

jQuery.cookie = function(name, value, options) {
    if (typeof value != 'undefined') { // name and value given, set cookie
        options = options || {};
        if (value === null) {
            value = '';
            options.expires = -1;
        }
        var expires = '';
        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
            var date;
            if (typeof options.expires == 'number') {
                date = new Date();
                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
            } else {
                date = options.expires;
            }
            expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
        }
        // CAUTION: Needed to parenthesize options.path and options.domain
        // in the following expressions, otherwise they evaluate to undefined
        // in the packed version for some reason...
        var path = options.path ? '; path=' + (options.path) : '';
        var domain = options.domain ? '; domain=' + (options.domain) : '';
        var secure = options.secure ? '; secure' : '';
        document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
    } else { // only name given, get cookie
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
};

Jun 24, 2011 at 6:12 AM
Edited Jun 24, 2011 at 6:13 AM

An update:  Thanks for any help you could provide in advance.

It seems if you click on the main menu links the drop down slide open and only 1 cookie is created and updated.  Once you click on one of the links in a slide down and then try to click on another main menu item - another cookie with the same name is created and the page changes but the drop down that was previously opened is reopened instead of the new section drop down.  If you click the new section again - that section drop down will then stay open.  It seems like the cookie is not changing once you go down a level in the menu.  I know I must be missing something as the code work great when I add it to a site that is not in the CMS.

Cookie examples:

FIRST COOKIE (created when clicking through the Main Items and not the links within a main section.

Name: menu1
Content: m2
Domain: mydomain.com
Path: /
Send For: Any kind of connection
Accessible to Script: Yes
Created: Friday, June 24, 2011 2:00:11 AM
Expires: When I close my browser

ADDITIONAL COOKIES (created once you click a link within a Menu Main Section and then Trying to change Sections).

Name: menu1
Content: m4
Domain: mydomain.com
Path: /learning-center
Send For: Any kind of connection
Accessible to Script: Yes
Created: Friday, June 24, 2011 2:00:25 AM
Expires: When I close my browser
Coordinator
Jul 8, 2011 at 9:01 AM

Hello,

Do you still have problems with this? I was trying to reproduce your example, it seems to be working. You can try to debug javascript code by using FireFox FireBug plugin and try to locate the problem, also check in different browsers.