Bug Tracker

Opened 11 years ago

Closed 9 years ago

Last modified 8 years ago

#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 11 years ago by dmethvin

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.

comment:3 Changed 9 years ago by dmethvin

Resolution: worksforme
Status: newclosed

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.

Note: See TracTickets for help on using tickets.