2009-12-14 5 views
4

J'ai un problème avec un script jQuery je l'ai écrit qui me conduisait une noix de bits. Comme d'habitude, il fonctionne parfaitement dans Firefox mais tombe dans toutes les versions d'IE.fonction jQuery clic ne fonctionne pas dans IE

J'ai le code HTML suivant. Il est généré à l'aide de vitesse il devrait donc faire partie du DOM:

<select name="groups" id="groups" type="select"> 
<option value="group1">group1</option> 
<option value="group2">group2</option> 
<option value="group3">group3</option> 
</select> 

Mon script jQuery ressemble à ceci:

jQuery(document).ready(function() { 
    jQuery("#groups option").click(function() { 
     alert(group); 
     var group = jQuery(this).attr("value"); 
     AJS.safe.ajax({ 
      url: "/plugins/userlookup/userlookup.action", 
      type: "POST", 
      dataType: "json", 
      data: { 
       group: group 
      }, 
      success: function(data) { 
       alert(data); 
       jQuery("#users").empty(); 
       for(var i=0; i < data.userList.length; i++) { 
        var userstr = "<option value=\""+data.userList[i]+"\">"+data.userList[i]+"</option>"; 
        jQuery("#users").append(userstr); 
       } 
      } 
     }); 
    }); 
}); 

Fondamentalement, il y a une liste déroulante des « groupes » et lors de la sélection d'un groupe un appel AJAX est fait pour récupérer les utilisateurs de ce groupe et remplir un autre champ. Dans IE, la sélection de groupes ne fait rien et ne génère aucune erreur Javascript. J'ai essayé de passer au travers mais il semble que la fonction "clic" ne lie pas du tout à aucun des éléments car aucune de ces alertes n'est appelée et les points d'arrêt ne sont jamais touchés dans le débogueur. J'ai essayé d'appeler l'URL AJAX directement dans le navigateur, mais contrairement à Firefox, je n'ai pas la sortie JSON, IE essaie de télécharger l'action et échoue.

J'étagé à travers tout le code dans Firefox et le code de back-end et qui est tout travail.

Quelqu'un peut-il voir ce qui pourrait être mal avec ce que je l'ai fait?

Répondre

4

Essayez d'utiliser l'événement change au lieu de l'événement click. Autrement dit, lorsque la sélection est modifiée, mettez à jour votre sélection de l'utilisateur avec les données connexes. Notez également que la modification pour obtenir l'option sélectionnée parmi les groupes sélectionnés (this sera la sélection au lieu de l'option).

jQuery(document).ready(function() { 
    jQuery("#groups").change(function() { 
     var group = jQuery(this).find(':selected').attr('value'); 
     AJS.safe.ajax({ 
       url: "/plugins/userlookup/userlookup.action", 
       type: "POST", 
       dataType: "json", 
       data: { 
         group: group 
       }, 
       success: function(data) { 
         alert(data); 
         jQuery("#users").empty(); 
         for(var i=0; i < data.userList.length; i++) { 
           var userstr = "<option value=\""+data.userList[i]+"\">"+data.userList[i]+"</option>"; 
           jQuery("#users").append(userstr); 
         } 
       } 
     }); 
    }); 
}); 

Je crois que l'événement click n'est pas réellement généré dans IE pour les éléments d'option, il est généré sur la sélection elle-même. Cela peut être différent, cependant, si vous utilisez un multiselect, même si cela ne semble pas être le cas.

+0

Merci beaucoup, cela a fonctionné un régal! – jenny

+0

'select-many' n'a pas d'option scriptable non plus. Les deux sélections sont des widgets indivisble dans IE, vous avez donc peu d'opportunités de les écrire. Dans tous les cas, les standards HTML et DOM ne disent rien des internes des champs de formulaire, il est donc déconseillé de s'y fier. – bobince

0

Soit dit en passant, en plus d'utiliser l'événement change ... si un nom d'utilisateur peut avoir un & ou < caractère, vous avez une erreur et le potentiel trou de sécurité inter-site scripting, d'où vous avez collé les chaînes avec HTML sans s'échapper correctement.

La méthode basée sur la chaîne est également plutôt inefficace, comme jQuery doit créer et jeter un emballage de sélection à chaque fois que vous l'appelez. Évitez de créer du HTML dynamique avec du contenu à partir de chaînes; utilisez les méthodes DOM ainsi que les méthodes jQuery, le cas échéant. Par exemple:

var options= $('#users')[0].options; 
options.length= 0; 
for(var i= 0; i<data.userList.length; i++) 
    options[i]= new Option(data.userList[i]); 

... est plus courte, plus rapide, plus facile à lire et plus sûr que la variante de chaîne-piratage.

0

En outre, comme dans mon cas, une cause possible est Internet Explorer Configuration de sécurité renforcée (ESC). Ce qui est activé par défaut sur un serveur Windows 2008. To disable, see this.