3 Replies Latest reply on Apr 18, 2008 11:09 AM by nathan dennis

    richfaces jQuery plugin trouble

    nathan dennis Expert

      im trying to make the corner plugin from the jQuery site work with <rich:jQuery>

      <head><a:loadScript src="../js/jquery.corner.js"/></head>......
      
       <rich:jQuery selector="#mydivname" timing="onload" query="corner" />
      ....


      gives me "jQuery.fn has no properties" error message.

      plugin code
      jQuery.fn.corner = function(o) {
       function hex2(s) {
       var s = parseInt(s).toString(16);
       return ( s.length < 2 ) ? '0'+s : s;
       };
       function gpc(node) {
       for ( ; node && node.nodeName.toLowerCase() != 'html'; node = node.parentNode ) {
       var v = jQuery.css(node,'backgroundColor');
       if ( v.indexOf('rgb') >= 0 ) {
       rgb = v.match(/\d+/g);
       return '#'+ hex2(rgb[0]) + hex2(rgb[1]) + hex2(rgb[2]);
       }
       if ( v && v != 'transparent' )
       return v;
       }
       return '#ffffff';
       };
       function getW(i) {
       switch(fx) {
       case 'round': return Math.round(width*(1-Math.cos(Math.asin(i/width))));
       case 'cool': return Math.round(width*(1+Math.cos(Math.asin(i/width))));
       case 'sharp': return Math.round(width*(1-Math.cos(Math.acos(i/width))));
       case 'bite': return Math.round(width*(Math.cos(Math.asin((width-i-1)/width))));
       case 'slide': return Math.round(width*(Math.atan2(i,width/i)));
       case 'jut': return Math.round(width*(Math.atan2(width,(width-i-1))));
       case 'curl': return Math.round(width*(Math.atan(i)));
       case 'tear': return Math.round(width*(Math.cos(i)));
       case 'wicked': return Math.round(width*(Math.tan(i)));
       case 'long': return Math.round(width*(Math.sqrt(i)));
       case 'sculpt': return Math.round(width*(Math.log((width-i-1),width)));
       case 'dog': return (i&1) ? (i+1) : width;
       case 'dog2': return (i&2) ? (i+1) : width;
       case 'dog3': return (i&3) ? (i+1) : width;
       case 'fray': return (i%2)*width;
       case 'notch': return width;
       case 'bevel': return i+1;
       }
       };
       o = (o||"").toLowerCase();
       var keep = /keep/.test(o); // keep borders?
       var cc = ((o.match(/cc:(#[0-9a-f]+)/)||[])[1]); // corner color
       var sc = ((o.match(/sc:(#[0-9a-f]+)/)||[])[1]); // strip color
       var width = parseInt((o.match(/(\d+)px/)||[])[1]) || 10; // corner width
       var re = /round|bevel|notch|bite|cool|sharp|slide|jut|curl|tear|fray|wicked|sculpt|long|dog3|dog2|dog/;
       var fx = ((o.match(re)||['round'])[0]);
       var edges = { T:0, B:1 };
       var opts = {
       TL: /top|tl/.test(o), TR: /top|tr/.test(o),
       BL: /bottom|bl/.test(o), BR: /bottom|br/.test(o)
       };
       if ( !opts.TL && !opts.TR && !opts.BL && !opts.BR )
       opts = { TL:1, TR:1, BL:1, BR:1 };
       var strip = document.createElement('div');
       strip.style.overflow = 'hidden';
       strip.style.height = '1px';
       strip.style.backgroundColor = sc || 'transparent';
       strip.style.borderStyle = 'solid';
       return this.each(function(index){
       var pad = {
       T: parseInt(jQuery.css(this,'paddingTop'))||0, R: parseInt(jQuery.css(this,'paddingRight'))||0,
       B: parseInt(jQuery.css(this,'paddingBottom'))||0, L: parseInt(jQuery.css(this,'paddingLeft'))||0
       };
      
       if (jQuery.browser.msie) this.style.zoom = 1; // force 'hasLayout' in IE
       if (!keep) this.style.border = 'none';
       strip.style.borderColor = cc || gpc(this.parentNode);
       var cssHeight = jQuery.curCSS(this, 'height');
      
       for (var j in edges) {
       var bot = edges[j];
       strip.style.borderStyle = 'none '+(opts[j+'R']?'solid':'none')+' none '+(opts[j+'L']?'solid':'none');
       var d = document.createElement('div');
       var ds = d.style;
      
       bot ? this.appendChild(d) : this.insertBefore(d, this.firstChild);
      
       if (bot && cssHeight != 'auto') {
       if (jQuery.css(this,'position') == 'static')
       this.style.position = 'relative';
       ds.position = 'absolute';
       ds.bottom = ds.left = ds.padding = ds.margin = '0';
       if (jQuery.browser.msie)
       ds.setExpression('width', 'this.parentNode.offsetWidth');
       else
       ds.width = '100%';
       }
       else {
       ds.margin = !bot ? '-'+pad.T+'px -'+pad.R+'px '+(pad.T-width)+'px -'+pad.L+'px' :
       (pad.B-width)+'px -'+pad.R+'px -'+pad.B+'px -'+pad.L+'px';
       }
      
       for (var i=0; i < width; i++) {
       var w = Math.max(0,getW(i));
       var e = strip.cloneNode(false);
       e.style.borderWidth = '0 '+(opts[j+'R']?w:0)+'px 0 '+(opts[j+'L']?w:0)+'px';
       bot ? d.appendChild(e) : d.insertBefore(e, d.firstChild);
       }
       }
       });
      };


      where am i going wrong?
      any help would be greatly appreciated. the thing that is driving me crazy is if i load the lib manually,, and use

      $("div.rounded").corner()
      

      both jQuery and richfaces works.... just with a host of richfaces error message.. any clues?

        • 1. Re: richfaces jQuery plugin trouble
          nathan dennis Expert

          got this working using some info from another jquery post and info on the jquery site... just thought i would share..

          new plugin code:

          (function($){
           $.fn.corner = function(o) {
          
          
           function hex2(s) {
           var s = parseInt(s).toString(16);
           return ( s.length < 2 ) ? '0'+s : s;
           };
          
           function gpc(node) {
           for ( ; node && node.nodeName.toLowerCase() != 'html'; node = node.parentNode ) {
           var v = $.css(node,'backgroundColor');
           if ( v.indexOf('rgb') >= 0 ) {
           rgb = v.match(/\d+/g);
           return '#'+ hex2(rgb[0]) + hex2(rgb[1]) + hex2(rgb[2]);
           }
           if ( v && v != 'transparent' )
           return v;
           }
           return '#ffffff';
           };
          
           function getW(i) {
           switch(fx) {
           case 'round': return Math.round(width*(1-Math.cos(Math.asin(i/width))));
           case 'cool': return Math.round(width*(1+Math.cos(Math.asin(i/width))));
           case 'sharp': return Math.round(width*(1-Math.cos(Math.acos(i/width))));
           case 'bite': return Math.round(width*(Math.cos(Math.asin((width-i-1)/width))));
           case 'slide': return Math.round(width*(Math.atan2(i,width/i)));
           case 'jut': return Math.round(width*(Math.atan2(width,(width-i-1))));
           case 'curl': return Math.round(width*(Math.atan(i)));
           case 'tear': return Math.round(width*(Math.cos(i)));
           case 'wicked': return Math.round(width*(Math.tan(i)));
           case 'long': return Math.round(width*(Math.sqrt(i)));
           case 'sculpt': return Math.round(width*(Math.log((width-i-1),width)));
           case 'dog': return (i&1) ? (i+1) : width;
           case 'dog2': return (i&2) ? (i+1) : width;
           case 'dog3': return (i&3) ? (i+1) : width;
           case 'fray': return (i%2)*width;
           case 'notch': return width;
           case 'bevel': return i+1;
           }
           };
          
           o = (o||"").toLowerCase();
           var keep = /keep/.test(o); // keep borders?
           var cc = ((o.match(/cc:(#[0-9a-f]+)/)||[])[1]); // corner color
           var sc = ((o.match(/sc:(#[0-9a-f]+)/)||[])[1]); // strip color
           var width = parseInt((o.match(/(\d+)px/)||[])[1]) || 10; // corner width
           var re = /round|bevel|notch|bite|cool|sharp|slide|jut|curl|tear|fray|wicked|sculpt|long|dog3|dog2|dog/;
           var fx = ((o.match(re)||['round'])[0]);
           var edges = { T:0, B:1 };
           var opts = {
           TL: /top|tl/.test(o), TR: /top|tr/.test(o),
           BL: /bottom|bl/.test(o), BR: /bottom|br/.test(o)
           };
          
           if ( !opts.TL && !opts.TR && !opts.BL && !opts.BR )
           opts = { TL:1, TR:1, BL:1, BR:1 };
           var strip = document.createElement('div');
           strip.style.overflow = 'hidden';
           strip.style.height = '1px';
           strip.style.backgroundColor = sc || 'transparent';
           strip.style.borderStyle = 'solid';
          
           return this.each(function(index){
           var pad = {
           T: parseInt($.css(this,'paddingTop'))||0, R: parseInt($.css(this,'paddingRight'))||0,
           B: parseInt($.css(this,'paddingBottom'))||0, L: parseInt($.css(this,'paddingLeft'))||0
           };
          
           if ($.browser.msie) this.style.zoom = 1; // force 'hasLayout' in IE
           if (!keep) this.style.border = 'none';
           strip.style.borderColor = cc || gpc(this.parentNode);
           var cssHeight = $.curCSS(this, 'height');
          
           for (var j in edges) {
           var bot = edges[j];
           strip.style.borderStyle = 'none '+(opts[j+'R']?'solid':'none')+' none '+(opts[j+'L']?'solid':'none');
           var d = document.createElement('div');
           var ds = d.style;
          
           bot ? this.appendChild(d) : this.insertBefore(d, this.firstChild);
          
           if (bot && cssHeight != 'auto') {
           if ($.css(this,'position') == 'static')
           this.style.position = 'relative';
           ds.position = 'absolute';
           ds.bottom = ds.left = ds.padding = ds.margin = '0';
           if ($.browser.msie)
           ds.setExpression('width', 'this.parentNode.offsetWidth');
           else
           ds.width = '100%';
           }
           else {
           ds.margin = !bot ? '-'+pad.T+'px -'+pad.R+'px '+(pad.T-width)+'px -'+pad.L+'px' :
           (pad.B-width)+'px -'+pad.R+'px -'+pad.B+'px -'+pad.L+'px';
           }
          
           for (var i=0; i < width; i++) {
           var w = Math.max(0,getW(i));
           var e = strip.cloneNode(false);
           e.style.borderWidth = '0 '+(opts[j+'R']?w:0)+'px 0 '+(opts[j+'L']?w:0)+'px';
           bot ? d.appendChild(e) : d.insertBefore(e, d.firstChild);
           }
           }
           });
          };
          })(oldJQuery);
          


          call with
          <rich:jQuery selector="myselector" timing="onload" query="corner('round')" />
          
          or the like.

          • 2. Re: richfaces jQuery plugin trouble
            henry katz Newbie

            Nathan,

            This did not solve the similar issue I have.
            I tweaked the jQuery in the 3.1.4.GA - demo war for tomcat 6.0.
            The examples/zebra.xhtml has the following jquery at the end:

            <rich:jQuery selector="#carList" timing="onload" query="tableHover({colClass:'lightblue', cellClass: 'lightblue2', clickClass: 'lightblue3'})" />



            The plugin is straight from this web site:

            http://p.sohei.org/stuff/jquery/tablehover/demo/demo.html


            and two errors are seen in firebug under FF 2.0:

            $.fn has no properties
            [Break on this error] {


            jQuery(selector).tableHover is not a function
            [Break on this error] jQuery(selector).tableHover({colClass:'lightblue', cellClass: 'lightblue2', cli...


            Sadly, this works perfectly against either 3.2.0 releases though my current client's project can't go to jsf 1.2.

            Any other jQuery leads?

            Thanks,
            Henry

            • 3. Re: richfaces jQuery plugin trouble
              nathan dennis Expert

              well i cant see a lot without your plugin code. post and ill take a look. the example above had several alteration to it... not just the beginning and the end.

              i was using 3.1.4 when i implemented this so you should be able to get it working.

              if you rewrote this correctly... you should be using the

              $
              
              instead of
              
              jQuery(selector).
              


              so any reference in your plugin code should reflect that.

              make sure you change the declaration at the end to
              (oldJQuery);



              the best tip i can actually give you is to look at what the richfaces tag is actually generating and manipulate the code accordingly