Databases
StackOverflow2013
Postsdbo
POError when switching jQuery 1.3.2 → 1.4.4
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POError when switching jQuery 1.3.2 → 1.4.4
    primarykey
    data
    text
    <p>I am using JavaScript to make a custom select/custom drop-down that perfectly worked using jQuery 1.3.2, but I get one error in 1.4.4. I want to use it if some one can give some idea on that would be really help full.</p> <blockquote> <p>Error <code>(this.change[x].call)</code> is not function.</p> </blockquote> <pre><code>// JavaScript Document jQuery( document ).ready( function() { jQuery( 'select.jsDropdown' ).each( function() { var dropdown = this; setTimeout( function() { new GenericDropdown( dropdown ) }, 1 ) } ); } ); // GENERIC DROPDOWNS GenericDropdown = function( element ) { var _self = this; this.element = this.element ? this.element : element; this.field; this.ddelement = null; this.options = this.options ? this.options : []; this.selectedIndex = 0; this.width = 0; this.position = []; this.change = []; this.attributes = {}; this.className = this.className ? this.className : 'jsDropdown'; this.value = null; this.keySelected = 0; this.eventOpen = this.eventOpen ? this.eventOpen : function(e) { _self.open(e) }; this.eventSelect = this.eventSelect ? this.eventSelect : function(e) { _self.select(e) }; this.eventKeydown = this.eventKeydown ? this.eventKeydown : function(e) { _self.keydown(e) }; this.eventClose = this.eventClose ? this.eventClose : function(e) { _self.close(e) }; this.eventCancel = this.eventCancel ? this.eventCancel : function(e) { _self.cancel(e) }; if ( this.element ) { // save options data jQuery( this.element ).find( 'option' ).each( function(i) { if ( !_self.options[i] ) _self.options[i] = []; _self.options[i][0] = jQuery( this ).val(); _self.options[i][1] = jQuery( this ).text(); _self.options[i][2] = jQuery( this ).attr( 'class' ) if ( this.selected ) _self.selectedIndex = i; } ); // get name var name = jQuery( this.element ).attr( 'name' ); // save attributes var attributes = this.element.attributes; for ( var x = 0; x &lt; attributes.length; x++ ) this.attributes[ attributes[x].nodeName ] = attributes[x].nodeValue; // save class names this.className = this.className + ' ' + this.element.className.replace( this.className, '' ); // copy over events var events = jQuery.data( this.element, 'events' ) ? jQuery.data( this.element, 'events' )[ 'change' ] : null; if ( events ) for ( var handler in events ) this.change.push( events[handler] ); // calculate max width var tmp = jQuery( '&lt;div class="jsDropdownMenu" style="position:static"&gt;&lt;ul&gt;&lt;li style="display:inline; padding:0"&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;' ); jQuery( 'body' ).append( tmp ); for ( var x = 0; x &lt; this.options.length; x++ ) { tmp.find( 'li' ).text( this.options[x][1] ); if ( tmp.find( 'li' )[0].offsetWidth &gt; this.width ) this.width = tmp.find( 'li' )[0].offsetWidth; } tmp.remove(); // draw styled dropdown this.draw(); // save reference to object in jQuery this.element.data( 'jDropdown', _self ); // create hidden field with data this.field = jQuery( '&lt;input type="hidden" name="' + name + '" value="' + this.options[this.selectedIndex][0] + '" /&gt;' ); this.element.after( this.field ); // save data into jQuery this.element.data( 'name', name ); this.element.data( 'value', this.options[this.selectedIndex][0] ); this.element.val( this.options[this.selectedIndex][0] ); // save selected value this.value = this.options[this.selectedIndex][0]; // bind window close event to replace normal selects for server data // jQuery( window ).bind( 'beforeunload', unload ); } } GenericDropdown.prototype.draw = function() { var self = this; // get id if there is one var id = ( this.element.id ) ? this.element.id : null; var widthFactor = jQuery('#selectCatFAQ').length ? 0 : 27; // build up dropdown var width = ( jQuery( this.element ).css( 'width' ) != 'auto' ) ? ( parseInt( jQuery( this.element ).css( 'width' ) ) &gt; this.width ) ? parseInt( jQuery( this.element ).css( 'width' ) ) - widthFactor : this.width + 5 : this.width + 5; // setting max width for the dropdowns width = width &gt; 340 ? 340 : width; var dropdown = jQuery( '&lt;a href="#" class="' + this.className + '"&gt;&lt;span&gt;' + this.options[this.selectedIndex][1] + '&lt;/span&gt;&lt;/a&gt;' ); // bind events dropdown.width( width ); dropdown.bind( 'click', self.eventOpen ); dropdown.bind( 'keydown', self.eventKeydown ); spanwidth=width-17; dropdown.find( 'span' ).css( { width:spanwidth+'px' } ); if ( id ) dropdown.attr( 'id', id ); // replace existing dropdown with styled one var select = jQuery( this.element ); this.element = jQuery( dropdown ); select.replaceWith( this.element ); // custom width set for accordion } GenericDropdown.prototype.unload = function() { var select = jQuery( '&lt;select&gt;&lt;/select&gt;' ).css( { visibility:'hidden' } ); // copy back attributes jQuery.each( this.attributes, function(key, value) { select[0].setAttribute( key, value ) } ); // add in options jQuery.each( this.options, function() { select.append( jQuery( '&lt;option value="' + this[0] + '"&gt;' + this[1] + '&lt;/option&gt;' ) ) } ); // set selected option select.find( 'option' )[ this.selectedIndex ].selected = 'selected'; // replace jsDropdown this.element.replaceWith( select.removeClass( 'jsDropdown' ) ); this.element = select; } GenericDropdown.prototype.open = function(e) { var self = this; if ( this.element.attr( 'disabled' ) != 'disabled' ) { // get position for dropdown var in_popup = this.element.parents( '#Popup' ).length ? true : false; // This line is not working with jquery 1.4 so removing border and padding paramaters //var jquery_offset = this.element.offset( { border:true, padding:true } ); var jquery_offset = this.element.offset(); this.position = [ jquery_offset.left+2, jquery_offset.top + this.element.outerHeight()-3 ]; var width = ( this.element.innerWidth() &gt; this.width ) ? this.element.innerWidth() : this.width; var top = this.position[1]; if ( in_popup &amp;&amp; !( jQuery.browser.msie &amp;&amp; jQuery.browser.version &lt; 7 ) ) top = top - jQuery( document ).scrollTop(); // create dropdown this.ddelement = jQuery( '&lt;div class="jsDropdownMenu"&gt;&lt;div class="top-content"&gt;&lt;ul class="content"&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;' ).css({ width:width-6 }); this.ddelement.css( { top:top, left:this.position[0]+0+'px' } ); if ( in_popup &amp;&amp; !( jQuery.browser.msie &amp;&amp; jQuery.browser.version &lt; 7 ) ) this.ddelement.css( { position:'fixed' } ); if ( jQuery.browser.msie &amp;&amp; jQuery.browser.version &lt; 7 &amp;&amp; in_popup ) { var dd = this.ddelement; jQuery( window ).bind( 'scroll', function() { dd.css( { top:top + jQuery( document ).scrollTop() } ) } ) }; for ( var x = 0; x &lt; this.options.length; x++ ) { var item = jQuery( '&lt;li&gt;&lt;span&gt;' + this.options[x][1] + '&lt;/span&gt;&lt;/li&gt;' ); if ( x == this.selectedIndex ) item.addClass( 'selected' ); if (this.options[x][2]) item.addClass( this.options[x][2] ) item.bind( 'click', self.eventSelect ); item.bind( 'mouseover', function(e) { self.ddelement.find( 'li.selected' ).removeClass( 'selected' ); jQuery( this ).addClass( 'selected' ); self.keySelected = self.ddelement.find( 'li' ).index( this ); } ); this.ddelement.find( 'ul.content' ).append( item ); } // append dropdown to container jQuery( 'body' ).append( this.ddelement ); // remove open event and add cancel event this.element.unbind( 'click', self.eventOpen ); this.element.bind( 'click', self.eventCancel ); // add close event setTimeout( function() { jQuery( 'body' ).bind( 'click', self.eventClose ) }, 1); //jQuery('.jsDropdownMenu .first span').append(this.options[this.selectedIndex][1]) } // e.stopPropagation(); e.preventDefault(); } GenericDropdown.prototype.keydown = function(e) { if ( e.keyCode == 32 ) // space { if ( !this.ddelement ) { this.keySelected = this.selectedIndex; this.open(e); } else { this.ddelement.find( 'li.selected' ).click(); e.preventDefault(); } } else if ( e.keyCode == 40 ) // down { if ( ++this.keySelected &gt; this.options.length - 1 ) this.keySelected = 0; if ( this.ddelement ) { this.ddelement.find( 'li.selected' ).removeClass( 'selected' ); this.ddelement.find( 'li:eq(' + this.keySelected + ')' ).addClass( 'selected' ); } else { this.selectedIndex = this.keySelected; // set text dropdown this.element.find( 'span' ).text( this.options[this.selectedIndex][1] ); // save value in jQuery this.element.data( 'value', this.options[this.selectedIndex][0] ); // save selected value this.value = this.options[this.selectedIndex][0]; this.element.val( this.options[this.selectedIndex][0] ); this.field.val( this.options[this.selectedIndex][0] ); // perform custom event listeners if they exist e.target = this.element[0]; if ( this.change.length ) for ( var x = 0; x &lt; this.change.length; x++ ) this.change[x].call( this, e); } e.preventDefault(); } else if ( e.keyCode == 38 ) // up { if ( --this.keySelected &lt; 0 ) this.keySelected = this.options.length - 1; if ( this.ddelement ) { this.ddelement.find( 'li.selected' ).removeClass( 'selected' ); this.ddelement.find( 'li:eq(' + this.keySelected + ')' ).addClass( 'selected' ); } else { this.selectedIndex = this.keySelected; // set text dropdown this.element.find( 'span' ).text( this.options[this.selectedIndex][1] ); // save value in jQuery this.element.data( 'value', this.options[this.selectedIndex][0] ); // save selected value this.value = this.options[this.selectedIndex][0]; this.element.val( this.options[this.selectedIndex][0] ); this.field.val( this.options[this.selectedIndex][0] ); // perform custom event listeners if they exist e.target = this.element[0]; if ( this.change.length ) for ( var x = 0; x &lt; this.change.length; x++ ) this.change[x].call( this, e); } e.preventDefault(); } else if ( e.keyCode == 13 ) // return { this.ddelement.find( 'li:eq(' + this.keySelected + ')' ).click(); e.preventDefault(); } else if ( e.keyCode == 9 &amp;&amp; this.ddelement ) // tab { this.ddelement.find( 'li:eq(' + this.keySelected + ')' ).click(); } } GenericDropdown.prototype.select = function(e) { // get index of selected item var new_selection = -1; var target_li = e.target; if ( target_li.nodeName != 'LI' ) target_li = jQuery( target_li ).parents( 'li' )[0]; var list_items = this.ddelement.find( 'li' ); for ( var x = 0; x &lt; list_items.length; x++ ) if ( list_items[x] == target_li ) { new_selection = x; break } if ( new_selection != this.selectedIndex ) { this.selectedIndex = new_selection; // set text dropdown this.element.find( 'span' ).html( this.options[this.selectedIndex][1] ); // save value in jQuery this.element.data( 'value', this.options[this.selectedIndex][0] ); // save selected value this.value = this.options[this.selectedIndex][0]; this.element.val( this.options[this.selectedIndex][0] ); this.field.val( this.options[this.selectedIndex][0] ); // perform custom event listeners if they exist e.target = this.element[0]; if ( this.change.length ); for ( var x = 0; x &lt; this.change.length; x++ ) this.change[x].call(this, e); } this.eventClose(e); e.stopPropagation(); e.preventDefault(); } GenericDropdown.prototype.close = function(e) { var self = this; this.ddelement.remove(); delete this.ddelement; // remove close event jQuery( 'body' ).unbind( 'click', self.eventClose ); // add open event and remove cancel event setTimeout( function() { self.element.bind( 'click', self.eventOpen ) }, 1 ); this.element.unbind( 'click', self.eventCancel ); if (e) e.preventDefault(); } GenericDropdown.prototype.cancel = function(e) { this.eventClose(e); e.stopPropagation(); } GenericDropdown.prototype.reset = function( dropdown ) { var select = jQuery( '&lt;select&gt;&lt;/select&gt;' ); // copy back attributes jQuery.each( this.attributes, function(key, value) { select[0].setAttribute( key, value ) } ); if ( dropdown.id ) select[0].id = dropdown.id; // add in options jQuery.each( this.options, function() { select.append( jQuery( '&lt;option value="' + this[0] + '"&gt;' + this[1] + '&lt;/option&gt;' ) ) } ); // set selected option select.find( 'option' )[ this.selectedIndex ].selected = 'selected'; // replace jsDropdown jQuery( dropdown ).replaceWith( select.removeClass( 'jsDropdown' ) ); // remove adjacent hidden field select.next( 'input[type=hidden]' ).remove(); return select[0]; } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USNick Craver
    1. USRajiv Aggarwal
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POError when switching jQuery 1.3.2 → 1.4.4
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POError when switching jQuery 1.3.2 → 1.4.4
      1. USDave Markle
      1. VTFavorite
    3. VO
      singulars
      1. POError when switching jQuery 1.3.2 → 1.4.4
      1. This table or related slice is empty.
      1. VTUpMod
    1. COIf youre using jQuery ui as well you might want to take a look at the `selectmenu` widget. This link might have been more helpful when you started this project :-) https://github.com/fnagel/jquery-ui
      singulars
      1. POError when switching jQuery 1.3.2 → 1.4.4
      1. USprodigitalson
    2. COHave you done any debugging at all, say with Firebug and the non-minified version of the jQuery library?
      singulars
      1. POError when switching jQuery 1.3.2 → 1.4.4
      1. USPointy
    3. COHi, Yes I have tried some debugging not successed. You can download my non-minified version of javascript from here. http://www.educationuk.org/js/genericDropdown.js.
      singulars
      1. POError when switching jQuery 1.3.2 → 1.4.4
      1. USRajiv Aggarwal
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload