Internet Explorer ne développe pas la table après un appel ajax

Lorsque j'effectue un appel jquery ajax pour remplir automatiquement une liste déroulante au chargement de la page, le contrôle déroulant est coupé par la table conteneur. Je comprends que si la largeur de la table est fixée à 100%, cela sera corrigé, mais dans mon cas, je ne peux pas le faire. Ce code fonctionne bien dans FF. C'est presque comme IE ne "re-rendra" pas la page après la fin de l'appel ajax. Voici le code -Internet Explorer ne développe pas la table après un appel ajax

<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>

Je voudrais avoir une page publique Ajax je pourrais fournir afin qu'il puisse être copié et collé dans un éditeur de texte pour essayer sur votre propre, mais je ne le fais pas.

Comment ça apparaît dans Firefox:
alt text http://i39.tinypic.com/20sfuc3.jpg
Comment il apparaît dans IE7/8:
alt text http://i40.tinypic.com/24511rl.jpg

Toutes les idées sur la façon de forcer IE 7/8 à rendre correctement après le rappel ajax est terminée ?

Merci.

Source

2009-06-04 Craig

Un peu un hack, mais il semble que si vous modifiez une propriété css inutile du select, cela forcera une mise à jour.

$('#mySelect').css({margin: '0'}).append('<option value="0">(none available)</option>');

(exemple de la vôtre tronquées, mais le principe devrait être le même.)

Je l'ai testé cela avec IE7 sur XP.

Source

2009-06-04 16:48:17 user113716

Wow! Très impressionnant. Je n'ai jamais pensé à essayer cette approche. Oui, cela résout définitivement mon problème. Merci!! – Craig

Heureux que cela a fonctionné pour vous. Peut-être vaut-il la peine de soumettre un rapport de bogue à jQuery (s'il n'y en a pas déjà un) car cela ne concerne que ie. – user113716

J'ai ajouté un ticket à jquery. Je ne sais pas si c'est un bug jquery ou si c'est juste un problème d'IE. Merci encore. – Craig

Internet Explorer ne développe pas la table après un appel ajax

Répondre

Questions connexes