Bug Tracker

#4728 closed bug (worksforme)

Opened June 04, 2009 06:22PM UTC

Closed June 11, 2010 02:34AM UTC

Last modified March 13, 2012 06:53PM UTC

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.

Attachments (0)
Change History (2)

Changed June 05, 2009 02:12AM UTC by dmethvin comment:1

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.

Changed June 11, 2010 02:34AM UTC by dmethvin comment:2

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.