web-dev-qa-db-fra.com

définition dynamique de l'attribut id d'un élément d'entrée dans IE: alternative à la méthode setAttribute

Je cherche à définir de manière dynamique l'attribut ID des éléments d'entrée HTML créés de manière dynamique dans mon application.

Mon implémentation fonctionne bien avec la méthode setAttribute dans Firefox. Toute idée ou solution sur une implémentation fonctionnelle dans IE serait appréciée.

 var hiddenInput = document.createElement("input");
    hiddenInput.setAttribute("id", "uniqueIdentifier");
    hiddenInput.setAttribute("type", "hidden");                     
    hiddenInput.setAttribute("value", ID);
    hiddenInput.setAttribute("class", "ListItem");

J'ai modifié un exemple de code provenant de blogs relatifs à ce problème suggérant la solution suivante. Là encore, le bit Firefox fonctionne bien, mais le bit IE ne le fait pas

var hiddenInput = null;

try { 
hiddenInput  = document.createElement('<input name=\''+"hiddenInputName"+'\'   />');
                    hiddenInput.id = "uniqueIdentifier";
                    //alert(document.getElementById("uniqueIdentifier")); 
                   hiddenInput.type = "hidden";
                } catch (e) { }            
                if (!hiddenInput || !hiddenInput.name) { // Not in IE, then
                     var hiddenInput = document.createElement("input");
    hiddenInput.setAttribute("id", "uniqueIdentifier");
    hiddenInput.setAttribute("type", "hidden");                     

            }

À votre santé.

javascripthtmldom
51
Terman

Ce code fonctionne dans IE7 et Chrome:

var hiddenInput = document.createElement("input");
    hiddenInput.setAttribute("id", "uniqueIdentifier");
    hiddenInput.setAttribute("type", "hidden");                     
    hiddenInput.setAttribute("value", 'ID');
    hiddenInput.setAttribute("class", "ListItem");

$('body').append(hiddenInput);

Peut-être un problème ailleurs?

74
gor

Oubliez setAttribute(): il est gravement endommagé et ne fait pas toujours ce que vous pouvez attendre de l'ancien IE (IE <= 8 et des modes de compatibilité dans les versions ultérieures). Utilisez l'élément Ceci est généralement une bonne idée, et pas seulement dans ce cas particulier. Remplacez votre code par le suivant, qui fonctionnera dans tous les principaux navigateurs:

var hiddenInput = document.createElement("input");
hiddenInput.id = "uniqueIdentifier";
hiddenInput.type = "hidden";                     
hiddenInput.value = ID;
hiddenInput.className = "ListItem";

Mettre à jour

Le bidouillage méchant dans le deuxième bloc de code de la question est inutile et le code ci-dessus fonctionne très bien dans tous les principaux navigateurs, y compris IE 6. Voir http: //www.jsfiddle .net/timdown/aEvUT / . La raison pour laquelle vous obtenez null dans votre alert() est que, lorsqu'elle est appelée, la nouvelle entrée ne figure pas encore dans le document, d'où document.getElementById() l'appel ne peut pas le trouver.

63
Tim Down

Utilisez la méthode jquery attr . Cela fonctionne dans tous les navigateurs.

var hiddenInput = document.createElement("input");
$(hiddenInput).attr({
    'id':'uniqueIdentifier',
    'type': 'hidden',
    'value': ID,
    'class': 'ListItem'
});

Ou vous pouvez utiliser le code suivant:

var e = $('<input id = "uniqueIdentifier" type="hidden" value="' + ID + '" class="ListItem" />');
6
gor

Je n'étais pas au courant d'un problème avec setAttribute dans IE? Cependant, vous pouvez définir directement la propriété expando sur le nœud lui-même:

hiddenInput.id = "uniqueIdentifier";
4
jAndy

Le documentation dit:

Lorsque vous devez définir des attributs qui sont également mappés à une propriété point JavaScript (telle que href, style, src ou gestionnaires d'événement), privilégiez plutôt ce mappage.

Donc, il suffit de changer id , valeur et vous devriez avoir terminé.

2
gor

J'ai eu le même problème! Je n'ai pas pu modifier/définir l'attribut ID des éléments. Cela a fonctionné dans tous les autres navigateurs, mais pas IE. Ce n'est probablement pas pertinent pour votre problème mais voici ce que j'ai fini par faire:

Fond

Je construisais un site MVC avec des onglets jquery. Je voulais créer des onglets de manière dynamique et faire un AJAX postback sur le serveur en sauvegardant l'onglet dans la base de données. Je souhaitais utiliser un identifiant unique, sous la forme d'un int, pour les onglets Si un utilisateur créait deux onglets portant le même nom, cela ne me posait pas de problème.

<ul>
<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove List</span></li>
<ul>

Lorsque j'ai ensuite implémenté les fonctions de suppression sur les onglets, le rappel utilise l'index, qui est basé sur 0. Ensuite, je n'avais aucun moyen de renvoyer l'ID unique au serveur pour supprimer l'entrée de base de données. Le rappel de l'événement tabremove donne l'événement jquery et les paramètres ui. Avec une ligne de code, je pouvais obtenir l'ID de la plage:

var dbIndex = event.currentTarget.id;

Le problème était que la balise span n'avait pas d'identifiant. Donc, dans le rappel de création, j'ai essayé de définir l'ID d'achat en extrayant l'identifiant du href comme ceci:

ui.tab.parentNode.id = ui.tab.href.substring(ui.tab.href.indexOf('#list-') + 6);

Cela a bien fonctionné dans FireFox mais pas dans IE. Alors j'ai essayé quelques autres:

//ui.tab.parentNode.setAttribute('id', ui.tab.href.substring(ui.tab.href.indexOf('#list-') + 6));
//$(ui.tab.parentNode).attr({'id':ui.tab.href.substring(ui.tab.href.indexOf('#list-') + 6)});
//ui.tab.parentNode.id.value = ui.tab.href.substring(ui.tab.href.indexOf('#list-') + 6);

Aucun d'entre eux n'a fonctionné! Ainsi, après quelques heures de test et de recherche sur Google, j’ai abandonné pour tirer la conclusion que IE ne peut pas définir l’attribut ID d’un élément de manière dynamique.

Comme je suis triste, cela n’est probablement pas pertinent pour votre question, mais j’ai pensé que je partagerais.

Solution

Et pour tous ceux qui ont trouvé cela grâce à Google dans le problème des onglets que j’ai eu ici, c’est ce que j’ai fini par faire dans le rappel de tabsremove pour résoudre le problème:

var dbIndex = event.currentTarget.offsetParent.childNodes[0].href.substring(event.currentTarget.offsetParent.childNodes[0].href.indexOf('#list-') + 6);

Probablement pas la solution la plus sexy, mais bon elle a résolu le problème. Si quelqu'un a des idées, merci de partager ...

2
Kristofer Källsbo