3 Replies Latest reply on Oct 3, 2008 8:00 PM by Sam Witty

    dtree.js Calendar button doesnt work

    Ralf Newbie

      Hello,

      I'm using a Java Script tree menu called dtree. When I use it on a page and I do a rerender of a rich:calendar, the Calendar Button doesnt open the calender popup.

      <rich:calendar value="#{academy.toDate}" datePattern="#msg.global_datePattern}" enableManualInput="true" popup="true" locale="de" required="true" id="Datum_bis" rendered="#{academy.wish}"/>

      This is the js that makes the button not to work. If I remove the line, everything is fine.



      Any idea what happens?


      /*--------------------------------------------------|

      | dTree 2.05 | www.destroydrop.com/javascript/tree/ |

      |---------------------------------------------------|

      | Copyright (c) 2002-2003 Geir Landrö |

      | |

      | This script can be used freely as long as all |

      | copyright messages are intact. |

      | |

      | Updated: 17.04.2003

      | Updated: 21.12.2007 SH Anpassung an OpenCms |
      | Als Path in setCookie wird immer |
      | /opencms/opencms/ angegeben. Ansonsten |
      | wird für jeden Ordner ein Cookie angelegt|
      | und die Navi fängt an zu spinnen. |
      |

      |--------------------------------------------------*/



      // Node object

      function Node(id, pid, name, url, title, target, icon, iconOpen, open) {

      this.id = id;

      this.pid = pid;

      this.name = name;

      this.url = url;

      this.title = title;

      this.target = target;

      this.icon = icon;

      this.iconOpen = iconOpen;

      this._io = open || false;

      this._is = false;

      this._ls = false;

      this._hc = false;

      this._ai = 0;

      this._p;

      };



      // Tree object

      function dTree(objName) {

      this.config = {

      target : null,

      folderLinks : true,

      useSelection : true,

      useCookies : true,

      useLines : true,

      useIcons : true,

      useStatusText : false,

      closeSameLevel : false,

      inOrder : false

      }

      this.icon = {

      root : '/opencms/opencms/system/modules/de.scania.intranet/images/dTree/base.gif',

      folder : '/opencms/opencms/system/modules/de.scania.intranet/images/dTree/folder.gif',

      folderOpen : '/opencms/opencms/system/modules/de.scania.intranet/images/dTree/folderopen.gif',

      node : '/opencms/opencms/system/modules/de.scania.intranet/images/dTree/page.gif',

      empty : '/opencms/opencms/system/modules/de.scania.intranet/images/dTree/empty.gif',

      line : '/opencms/opencms/system/modules/de.scania.intranet/images/dTree/line.gif',

      join : '/opencms/opencms/system/modules/de.scania.intranet/images/dTree/join.gif',

      joinBottom : '/opencms/opencms/system/modules/de.scania.intranet/images/dTree/joinbottom.gif',

      plus : '/opencms/opencms/system/modules/de.scania.intranet/images/dTree/plus.gif',

      plusBottom : '/opencms/opencms/system/modules/de.scania.intranet/images/dTree/plusbottom.gif',

      minus : '/opencms/opencms/system/modules/de.scania.intranet/images/dTree/minus.gif',

      minusBottom : '/opencms/opencms/system/modules/de.scania.intranet/images/dTree/minusbottom.gif',

      nlPlus : '/opencms/opencms/system/modules/de.scania.intranet/images/dTree/nolines_plus.gif',

      nlMinus : '/opencms/opencms/system/modules/de.scania.intranet/images/dTree/nolines_minus.gif'

      };

      this.obj = objName;

      this.aNodes = [];

      this.aIndent = [];

      this.root = new Node(-1);

      this.selectedNode = null;

      this.selectedFound = false;

      this.completed = false;

      };



      // Adds a new node to the node array

      dTree.prototype.add = function(id, pid, name, url, title, target, icon, iconOpen, open) {

      this.aNodes[this.aNodes.length] = new Node(id, pid, name, url, title, target, icon, iconOpen, open);

      };



      // Open/close all nodes

      dTree.prototype.openAll = function() {

      this.oAll(true);

      };

      dTree.prototype.closeAll = function() {

      this.oAll(false);

      };



      // Outputs the tree to the page

      dTree.prototype.toString = function() {

      var str = '\n';

      if (document.getElementById) {

      if (this.config.useCookies) this.selectedNode = this.getSelected();

      str += this.addNode(this.root);

      } else str += 'Browser not supported.';

      str += '';

      if (!this.selectedFound) this.selectedNode = null;

      this.completed = true;

      return str;

      };



      // Creates the tree structure

      dTree.prototype.addNode = function(pNode) {

      var str = '';

      var n=0;

      if (this.config.inOrder) n = pNode._ai;

      for (n; n<this.aNodes.length; n++) {

      if (this.aNodes[n].pid == pNode.id) {

      var cn = this.aNodes[n];

      cn._p = pNode;

      cn._ai = n;

      this.setCS(cn);

      if (!cn.target && this.config.target) cn.target = this.config.target;

      if (cn._hc && !cn._io && this.config.useCookies) cn._io = this.isOpen(cn.id);

      if (!this.config.folderLinks && cn._hc) cn.url = null;

      if (this.config.useSelection && cn.id == this.selectedNode && !this.selectedFound) {

      cn._is = true;

      this.selectedNode = n;

      this.selectedFound = true;

      }

      str += this.node(cn, n);

      if (cn._ls) break;

      }

      }

      return str;

      };



      // Creates the node icon, url and text

      dTree.prototype.node = function(node, nodeId) {

      var str = '' + this.indent(node, nodeId);

      if (this.config.useIcons) {

      if (!node.icon) node.icon = (this.root.id == node.pid) ? this.icon.root : ((node._hc) ? this.icon.folder : this.icon.node);

      if (!node.iconOpen) node.iconOpen = (node._hc) ? this.icon.folderOpen : this.icon.node;

      if (this.root.id == node.pid) {

      node.icon = this.icon.root;

      node.iconOpen = this.icon.root;

      }

      str += '<img id="i' + this.obj + nodeId + '" src="' + ((node._io) ? node.iconOpen : node.icon) + '" alt="" />';

      }

      if (node.url) {

      str += '<a id="s' + this.obj + nodeId + '" class="' + ((this.config.useSelection) ? ((node._is ? 'nodeSel' : 'node')) : 'node') + '" href="' + node.url + '"';

      if (node.title) str += ' title="' + node.title + '"';

      if (node.target) str += ' target="' + node.target + '"';

      if (this.config.useStatusText) str += ' onmouseover="window.status=\'' + node.name + '\';return true;" onmouseout="window.status=\'\';return true;" ';

      if (this.config.useSelection && ((node._hc && this.config.folderLinks) || !node._hc))

      str += ' onclick="javascript: ' + this.obj + '.s(' + nodeId + ');"';

      str += '>';

      }

      else if ((!this.config.folderLinks || !node.url) && node._hc && node.pid != this.root.id)

      str += '<a href="javascript: ' + this.obj + '.o(' + nodeId + ');" class="node">';

      str += node.name;

      if (node.url || ((!this.config.folderLinks || !node.url) && node._hc)) str += '';

      str += '';

      if (node._hc) {

      str += '<div id="d' + this.obj + nodeId + '" class="clip" style="display:' + ((this.root.id == node.pid || node._io) ? 'block' : 'none') + ';">';

      str += this.addNode(node);

      str += '';

      }

      this.aIndent.pop();

      return str;

      };



      // Adds the empty and line icons

      dTree.prototype.indent = function(node, nodeId) {

      var str = '';

      if (this.root.id != node.pid) {

      for (var n=0; n<this.aIndent.length; n++)

      str += '<img src="' + ( (this.aIndent[n] == 1 && this.config.useLines) ? this.icon.line : this.icon.empty ) + '" alt="" />';

      (node._ls) ? this.aIndent.push(0) : this.aIndent.push(1);

      if (node._hc) {

      str += '<a href="javascript: ' + this.obj + '.o(' + nodeId + ');"><img id="j' + this.obj + nodeId + '" src="';

      if (!this.config.useLines) str += (node._io) ? this.icon.nlMinus : this.icon.nlPlus;

      else str += ( (node._io) ? ((node._ls && this.config.useLines) ? this.icon.minusBottom : this.icon.minus) : ((node._ls && this.config.useLines) ? this.icon.plusBottom : this.icon.plus ) );

      str += '" alt="" />';

      } else str += '<img src="' + ( (this.config.useLines) ? ((node._ls) ? this.icon.joinBottom : this.icon.join ) : this.icon.empty) + '" alt="" />';

      }

      return str;

      };



      // Checks if a node has any children and if it is the last sibling

      dTree.prototype.setCS = function(node) {

      var lastId;

      for (var n=0; n<this.aNodes.length; n++) {

      if (this.aNodes[n].pid == node.id) node._hc = true;

      if (this.aNodes[n].pid == node.pid) lastId = this.aNodes[n].id;

      }

      if (lastId==node.id) node._ls = true;

      };



      // Returns the selected node

      dTree.prototype.getSelected = function() {

      var sn = this.getCookie('cs' + this.obj);

      return (sn) ? sn : null;

      };



      // Highlights the selected node

      dTree.prototype.s = function(id) {

      if (!this.config.useSelection) return;

      var cn = this.aNodes[id];

      if (cn._hc && !this.config.folderLinks) return;

      if (this.selectedNode != id) {

      if (this.selectedNode || this.selectedNode==0) {

      eOld = document.getElementById("s" + this.obj + this.selectedNode);

      eOld.className = "node";

      }

      eNew = document.getElementById("s" + this.obj + id);

      eNew.className = "nodeSel";

      this.selectedNode = id;

      if (this.config.useCookies) this.setCookie('cs' + this.obj, cn.id);

      }

      };



      // Toggle Open or close

      dTree.prototype.o = function(id) {

      var cn = this.aNodes[id];

      this.nodeStatus(!cn._io, id, cn._ls);

      cn._io = !cn._io;

      if (this.config.closeSameLevel) this.closeLevel(cn);

      if (this.config.useCookies) this.updateCookie();

      };



      // Open or close all nodes

      dTree.prototype.oAll = function(status) {

      for (var n=0; n<this.aNodes.length; n++) {

      if (this.aNodes[n]._hc && this.aNodes[n].pid != this.root.id) {

      this.nodeStatus(status, n, this.aNodes[n]._ls)

      this.aNodes[n]._io = status;

      }

      }

      if (this.config.useCookies) this.updateCookie();

      };



      // Opens the tree to a specific node

      dTree.prototype.openTo = function(nId, bSelect, bFirst) {

      if (!bFirst) {

      for (var n=0; n<this.aNodes.length; n++) {

      if (this.aNodes[n].id == nId) {

      nId=n;

      break;

      }

      }

      }

      var cn=this.aNodes[nId];

      if (cn.pid==this.root.id || !cn._p) return;

      cn._io = true;

      cn._is = bSelect;

      if (this.completed && cn._hc) this.nodeStatus(true, cn._ai, cn._ls);

      if (this.completed && bSelect) this.s(cn._ai);

      else if (bSelect) this._sn=cn._ai;

      this.openTo(cn._p._ai, false, true);

      };



      // Closes all nodes on the same level as certain node

      dTree.prototype.closeLevel = function(node) {

      for (var n=0; n<this.aNodes.length; n++) {

      if (this.aNodes[n].pid == node.pid && this.aNodes[n].id != node.id && this.aNodes[n]._hc) {

      this.nodeStatus(false, n, this.aNodes[n]._ls);

      this.aNodes[n]._io = false;

      this.closeAllChildren(this.aNodes[n]);

      }

      }

      }



      // Closes all children of a node

      dTree.prototype.closeAllChildren = function(node) {

      for (var n=0; n<this.aNodes.length; n++) {

      if (this.aNodes[n].pid == node.id && this.aNodes[n]._hc) {

      if (this.aNodes[n]._io) this.nodeStatus(false, n, this.aNodes[n]._ls);

      this.aNodes[n]._io = false;

      this.closeAllChildren(this.aNodes[n]);

      }

      }

      }



      // Change the status of a node(open or closed)

      dTree.prototype.nodeStatus = function(status, id, bottom) {

      eDiv = document.getElementById('d' + this.obj + id);

      eJoin = document.getElementById('j' + this.obj + id);

      if (this.config.useIcons) {

      eIcon = document.getElementById('i' + this.obj + id);

      eIcon.src = (status) ? this.aNodes[id].iconOpen : this.aNodes[id].icon;

      }

      eJoin.src = (this.config.useLines)?

      ((status)?((bottom)?this.icon.minusBottom:this.icon.minus):((bottom)?this.icon.plusBottom:this.icon.plus)):

      ((status)?this.icon.nlMinus:this.icon.nlPlus);

      eDiv.style.display = (status) ? 'block': 'none';

      };





      // [Cookie] Clears a cookie

      dTree.prototype.clearCookie = function() {

      var now = new Date();

      var yesterday = new Date(now.getTime() - 1000 * 60 * 60 * 24);

      this.setCookie('co'+this.obj, 'cookieValue', yesterday);

      this.setCookie('cs'+this.obj, 'cookieValue', yesterday);

      };



      // [Cookie] Sets value in a cookie

      dTree.prototype.setCookie = function(cookieName, cookieValue, expires, path, domain, secure) {

      // Anpassung für Opencms
      path = '/opencms';

      document.cookie =

      escape(cookieName) + '=' + escape(cookieValue)

      + (expires ? '; expires=' + expires.toGMTString() : '')

      + (path ? '; path=' + path : '')

      + (domain ? '; domain=' + domain : '')

      + (secure ? '; secure' : '');

      };



      // [Cookie] Gets a value from a cookie

      dTree.prototype.getCookie = function(cookieName) {

      var cookieValue = '';

      var posName = document.cookie.indexOf(escape(cookieName) + '=');

      if (posName != -1) {

      var posValue = posName + (escape(cookieName) + '=').length;

      var endPos = document.cookie.indexOf(';', posValue);

      if (endPos != -1) cookieValue = unescape(document.cookie.substring(posValue, endPos));

      else cookieValue = unescape(document.cookie.substring(posValue));

      }

      return (cookieValue);

      };



      // [Cookie] Returns ids of open nodes as a string

      dTree.prototype.updateCookie = function() {

      var str = '';

      for (var n=0; n<this.aNodes.length; n++) {

      if (this.aNodes[n]._io && this.aNodes[n].pid != this.root.id) {

      if (str) str += '.';

      str += this.aNodes[n].id;

      }

      }

      this.setCookie('co' + this.obj, str);

      };



      // [Cookie] Checks if a node id is in a cookie

      dTree.prototype.isOpen = function(id) {

      var aOpen = this.getCookie('co' + this.obj).split('.');

      for (var n=0; n<aOpen.length; n++)

      if (aOpen[n] == id) return true;

      return false;

      };



      // If Push and pop is not implemented by the browser

      if (!Array.prototype.push) {

      Array.prototype.push = function array_push() {

      for(var i=0;i<arguments.length;i++)

      this[this.length]=arguments;

      return this.length;

      }

      };

      if (!Array.prototype.pop) {

      Array.prototype.pop = function array_pop() {

      lastElement = this[this.length-1];

      this.length = Math.max(this.length-1,0);

      return lastElement;

      }

      };

        • 1. Re: dtree.js Calendar button doesnt work
          Niels Frydenholm Newbie

          I have a very similar problem. But instead of the dtree.js I have the problem when I include Object.js (which is a internal js file in my company).

          But it's only in IE the calendar button for popup doesn't work when Object.js is included. Firefox works fine, and so does IE when I remove Object.js (but thats not a useful solution because I need Object.js for other reasons).

          IE doesn't give much information about the error. I only get "Object doesn't support this property or method".

          But I can't figure out what method or property is needed to popup the calendar!?

          • 2. Re: dtree.js Calendar button doesnt work
            Ralf Newbie

            I realized now that this problem isnt just for the calendar button. Its every control like the slider for an input number. No idea how to figure this out.

            • 3. Re: dtree.js Calendar button doesnt work
              Sam Witty Newbie

              Same issue here...

              Seems to be a problem in calendar.js line 19

              which is...
              var parentOffset=element.getOffsetParent().viewportOffset();

              it seems getOffsetParent() is the the missing property...
              Also element is of class "rich-calendar-exterior rich-calendar-popup"

              anyone has any ideas?