#4728 closed bug (worksforme)
Internet Explorer not re-rendering on some ajax callbacks
| Reported by: | craigg75 | Owned by: | |
|---|---|---|---|
| Priority: | minor | Milestone: | 1.4 |
| Component: | ajax | Version: | 1.3.2 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
When making a jquery ajax call to auto fill a dropdown on page load the dropdown control is cut off by the containing table. I understand that if you set the table width to 100% it would fix this but this shouldn't have to be. This code works fine in Firefox. It's almost like IE won't "re-render" the page after the ajax call completes. Here's the example code --
<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> </head> <body> <table border="1">
<tr>
<td>
<select>
<option>Test 1</option> <option>Test 2</option> <option>Test 3</option>
</select>
</td>
</tr> <tr>
<td>
<select id="mySelect"> </select>
</td>
</tr>
</table>
<script type="text/javascript"> var mySelect = $( "#mySelect" );
fillListCombo = function( json ) {
if ( json ) {
mySelect.empty(); $( json ).each( function( i, obj ) {
var option = $( "<option></option>" ); option.val( obj.id ); option.text( obj.text ); option.appendTo( mySelect );
} );
} else {
mySelect.find( 'option' ).remove().end().append( '<option value="0">(none available)</option>' ).val( '0' );
}
}
updateListCombo = function() {
$.ajax( {
type: "GET", url: "http://localhost/Ajax/ListLookupPage.aspx", dataType: "json", data: {
listkindid: "1", userid: "17"
}, timeout: 2000, success: function( opts ) {
fillListCombo( opts );
}, error: function( xhr, status ) {
mySelect.find( 'option' ).remove().end().append( '<option value="0">(none selected)</option>' ).val( '0' );
}
} );
};
updateListCombo(); </script> </body> </html>
The way it looks in Firefox -- http://i39.tinypic.com/20sfuc3.jpg
The way it look in IE 7/8 -- http://i40.tinypic.com/24511rl.jpg
I found a hack that will fix this. Add this line as the final line in fillListCombo() function --
mySelect.css({margin: '0'});
For some reason, modifying a css attribute on the select control forces IE to re-render itself. Adding options does not do this. Not sure if this would be consider a bug with jquery or a bug in IE.
Change History (2)
comment:1 Changed 14 years ago by
comment:3 Changed 13 years ago by
| Resolution: | → worksforme |
|---|---|
| Status: | new → closed |
This appears to be a bug that only occurs in IE6. It's misfiled under ajax, it can occur any time a select is expanded on the fly. Since it has a simple workaround (mentioned above) but would be difficult to fix with a jQuery patch, I'll close it.
I have noticed the same thing with selects and used zoom:1 to jiggle it. I would call it an IE error. It seems like the controls like select won't re-render many times unless you change css attributes.