Databases
StackOverflow2013
Postsdbo
POWhy does my JQuery plugin work perfectly in Firefox but not in IE?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy does my JQuery plugin work perfectly in Firefox but not in IE?
    primarykey
    data
    text
    <p>I'm using JQuery 1.4.2, and trying to build a plugin that essentially shows a pick list from a table. I am using Jquery UI css classes for formatting the container that the pick list appears in, and <a href="http://www.datatables.net/" rel="nofollow">DataTables</a> plugin for formatting the table, retrieving the data and filtering the table. The pick list works perfectly in FireFox 3.6 but in IE 7 the list never appears. I am not sure if this is due to positioning -- I can't seem to figure out what the problem is. </p> <pre><code>(function($) { // Shell for the plugin code $.fn.tablePicker = function(options) { // Plugin code var tbl = null; var options= options = $.extend({},$.fn.tablePicker.defaults, options); return this.each(function() { // for each item in selector tbl= $('#'+options.tblName); $(tbl).wrap(options.container); if(options.header != null){ var headerHtml= '&lt;div align="center"&gt;' + options.header + '&lt;/div&gt;'; $(this).find("#tp-container").prepend(headerHtml); } $(this).addClass("ui-hidden-on-load").addClass("ui-tablepicker"); $(this).addClass("ui-widget").addClass("ui-widget-content"); $(this).addClass("ui-helper-clearfix").addClass("ui-corner-all"); $(this).addClass("ui-helper-hidden-accessible"); $(this).css("position", options.position); var offsetFromObject= null; var offset= {top:null, left:null}; try { if(options.forinput){ offsetFromObject= options.forinput; }else if(options.forAnchor) { offsetFromObject= options.forAnchor; }else{ alert("Warning: Tablepicker plugin did not find any control to bind to."); } // Use the specified parameter first if(options.top != null){ offset.top= options.top; }else{ var t= $("#"+offsetFromObject).offset(); offset.top= t.top; } if(options.left != null){ offset.left= options.left; }else{ var l= $("#"+offsetFromObject).offset(); offset.left= l.left; } $(this).offset(offset); $(this).css("z-index", "1"); } catch (e) { alert('Tablepicker problem' + e); } tbl= _setUpDataTable(tbl); _performBindings(tbl, this); }); function _setUpDataTable(tbl){ tbl= $(tbl).dataTable( { "aoColumns" : options.aoColumns, "bFilter" : options.bFilter, "bPaginate" : options.bPaginate, "bLengthChange" : options.bLengthChange, "bAutoWidth" : options.bAutoWidth, "sScrollY" : options.sScrollY, "sPaginationType" : options.sPaginationType, "bProcessing" : options.bProcessing, "sAjaxSource" : options.sAjaxSource }); return tbl; }; function _performBindings(dataTable, picker){ var tableName= options.tblName; // Bind hide list to all inputs var tableFilter= tableName + '_filter'; $('input, select').live('focus', function(event) { if ($(event.target).parent().attr('id') != tableFilter) { _hideList(picker); // Don't hide the list on the datatable filter input focus. } }); // Don't bind hide list to the field we want to show the list for if(options.forinput != null){ var inputToBind=$('#'+options.forinput); $(inputToBind).unbind('focus'); // Bind to the field to show the list on. $(inputToBind).focus(function() { if (!$(picker).is(':visible')) { $(picker).slideToggle(); } }); } // Allow binding to an anchor if(options.forAnchor != null){ $("#"+options.forAnchor).click(function() { if (!$(picker).is(':visible')) { $(picker).slideToggle(); } }); } // Bindings for mouse over on table var tbl= $('#'+tableName); $(tbl).find('tbody tr').live('mouseover mouseout', function(event) { if (event.type == 'mouseover') { $(this).addClass('hover'); } else { $(this).removeClass('hover'); } }); // handle the click event of the table $(tbl).find('tbody tr').live('click', function(event, ui) { var aData = dataTable.fnGetData(this); if (aData != null) { $.isFunction(options.onClick) &amp;&amp; options.onClick.call(this, aData); } _hideList(picker); dataTable.fnFilter(""); // clear the datatable filter on select. $("#"+tableFilter).find("input").val(""); }); // Hide list on esc. $(document).keyup(function(e) { if (e.keyCode == 27) { // esc _hideList(picker); } }); } function _hideList(picker) { if ($(picker).is(':visible')) { $(picker).slideToggle(); } } } $.fn.tablePicker.defaults = { header : null, container : '&lt;div id="tp-container" class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all"/&gt;', position : 'absolute', top : null, left : null, tblName : 'list_table', forinput : null, forAnchor : null, aoColumns : null, bFilter : true, bPaginate : true, bLengthChange : false, bAutoWidth : true, sScrollY : "200px", sPaginationType : "full_numbers", bProcessing : true, sAjaxSource : null, onClick : null }; })(jQuery); </code></pre> <p>I'm invoking the plugin as such:</p> <pre><code>$("#engine-picker").tablePicker( {forinput: "engineFamily", header: "Pick an Engine Family from this list. Use Search to narrow list.", onClick: function(data){ var id = data[0]; var family = data[1]; var vendor = data[2]; var year = data[3]; var source = data[4]; var usesOdometer= data[5]; $("#engineId").val(id); $("#engineFamily").val(family); $("#engineMfg").val(vendor); $("#engineYear").val(year); $("#odometer").val(usesOdometer); }, aoColumns: [ {"bVisible" : false}, null, null, null, null, {"bVisible" : false}], sAjaxSource: './enginelist-data.do', top: 296, left:602 }); </code></pre> <p>CSS Classes:</p> <pre><code>.ui-hidden-on-load{display: none;} .ui-tablepicker { width: 35em; padding: .25em .25em 0; z-index: 1} .ui-tablepicker .ui-tablepicker-header { position:relative; padding:.2em 0; } .ui-widget-header div{ width: 100%} </code></pre> <p>Thanks in advance for any/all replies! </p> <hr> <p>OK, so the pick list table is not appearing on the page, because somehow the top attribute of the div is getting set to a negative value.</p> <pre><code>Z-INDEX: 1; LEFT: 404px; POSITION: absolute; TOP: -736px </code></pre> <p>Even though when I step through the code, I am explicitly setting the top and left via the offset object to:</p> <pre><code>- offset {...} Object top 296 Long left 602 Long </code></pre> <p>Does anyone see what I am missing here?</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USGriff
    1. USGriff
    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. This table or related slice is empty.
    1. This table or related slice is empty.
 

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