PDA

View Full Version : Non-functioning select in FF in transformgrid



madmoravian
14 Sep 2012, 12:16 PM
I've got a table with a number of form elements in it that I've converting using Ext.ux.grid.TransformGrid. After correcting some issues IE found with extra commas in the call to Ext.create, the select boxes are working in Chrome and IE but not in Firefox. Below is the main guts of a simplified form with one select box that does no register an onChange event in Firefox. It is embedded in a jsp on the production system. If the below code snippet is not enough, I can provide a larger context. Does anyone have an idea as to why this would not work in FF? What might I have caught as far as the html coding is concerned?


<script type="text/javascript">

/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/


Ext.onReady(function(){

element4 = document.getElementById("addLeaveRequests").style;
element4.display = 'block';


var gridAdd = Ext.create('Ext.ux.grid.TransformGrid',
"addLeaveRequests", {
sortableColumns: false,
enableColumnHide: false,
enableColumnMove: false,
enableColumnResize: false,
autoHeight: true,
autoWidth: true,
padding: 10,
width:1100,
columns: [{flex:1, sortable:false}], //checkbox
autoScroll: false,
});

gridAdd.render();

});

</script>

<form>
<table id="addLeaveRequests" width="100%" border="0" cellspacing="0" cellpadding="4" align="center">
<thead>
<tr class="backBlue">
<th class="backBlue" align="center">
<div align="center"><b>Leave</b><font color="#FF0000">*</font></div>
</th>
</tr>
</thead>
<tbody>
<tr class="backGold">
<td align="center" valign="middle">
<select name="newLeave" class='rowColorOne' onChange="xxaa();">
<option value="0" selected>-Select Leave-</option>

<option value="73">holiday</option>

<option value="74">sick</option>

<option value="75">comp</option>

</select>
<input type="hidden" name="hiddenNewLeave" value="">
</td>
</tr>
</tbody>
</table>
</form>

madmoravian
17 Sep 2012, 6:47 AM
Here's a more complete code set that is not working for me in Firefox 11 but is working in Chrome and IE. The onChange event fires in Chrome and IE but it does not in Firefox. The selected value is recognized in Chrome and IE but is not in Firefox.

Any thoughts?




<html>
<head>
<title>Leave Requests</title>
<script language="javascript" type="text/javascript" src="http://-path-here-/common/extjs/ext.js"></script>
<script language="javascript" type="text/javascript" src="http://-path-here-/common/jscript/eems-extjs/extjs-grid-form.js"></script>
<script type="text/javascript">

/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.com
* http://www.extjs.com/license
*/

Ext.onReady(function(){

element4 = document.getElementById("addLeaveRequests").style;
element4.display = 'block';

var gridAdd = Ext.create('Ext.ux.grid.TransformGrid',
"addLeaveRequests", {
columns: [{flex:1, sortable:false}],
width:1100
}
);

gridAdd.render();

});


function xxaa () {
alert("xxxaaa");
}
</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0">
<!-- Page Start Here -->
<!-- start table for the add leave action information -->

<table id="addLeaveRequests" width="100%" border="0" cellspacing="0" cellpadding="4" align="center">
<thead>
<tr class="backBlue">
<th class="backBlue" align="center">
<div align="center"><b>Leave</b><font color="#FF0000">*</font></div>
</th>
</tr>
</thead>
<tbody>
<tr class="backGold">
<td align="center" valign="middle">
<form name="frm" method="POST" action="">
<select name="newLeave" class='rowColorOne' onChange="xxaa();">
<option value="0" selected>-Select Leave-</option>
<option value="1">Sick</option>
<option value="2">Holiday</option>
<option value="3">Comp</option>
</select>
</form>
</td>
</tr>
</tbody>
</table>
<!-- end of the table for add leave request actions -->
<!-- Page End Here -->
</body>
</html>