javascript - obtener - establecer el atributo id de un elemento de entrada dinámicamente en IE: alternativa para el método setAttribute

setattribute jquery

Question

Estoy buscando establecer dinámicamente el atributo ID de los elementos de entrada HTML que se crean dinámicamente en mi aplicación.

Mi implementación funciona bien con el método setAttribute en Firefox. Cualquier idea o solución sobre una implementación en funcionamiento en IE sería apreciada.

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

Modifiqué algunos ejemplos de código de blogs relacionados con este problema que sugieren el siguiente workround. De nuevo, el bit de Firefox funciona bien, pero el bit de IE no lo hace

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");                     

            }

Aclamaciones.

Answer 1

¡Tuve el mismo problema! No pude cambiar / establecer el atributo de ID de los elementos. Funcionó en todos los otros navegadores pero no en IE. Probablemente no sea relevante para su problema, pero esto es lo que terminé haciendo:

Fondo

Estaba construyendo un sitio MVC con pestañas jquery. Quería crear pestañas dinámicamente y hacer una devolución de datos de AJAX al servidor guardando la pestaña en la base de datos. Quería usar un identificador único, en forma de int, para las pestañas para no tener problemas si un usuario creara dos pestañas con el mismo nombre. Luego utilicé la identificación única para identificar las pestañas como:

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

Cuando implementé las funciones de eliminación en las pestañas, la devolución de llamada usa el índice, que está basado en 0. Entonces no tenía forma de devolver la identificación única al servidor para trash la entrada de la base de datos. La devolución de llamada para el evento tabremove proporciona el evento jquery y los parámetros de ui. Con una línea de código podría obtener la ID del tramo:

var dbIndex = event.currentTarget.id;

El problema era que la etiqueta span no tenía ninguna ID. Así que en la devolución de llamada de creación intenté configurar la compra de ID extrayendo la ID del href de esta manera:

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

Eso funcionó bien en Firefox pero no en IE. Así que intenté algunos otros:

//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);

¡Ninguno de ellos funcionó! Así que después de unas horas de prueba y Googeling me di por vencido y saqué la conclusión de que IE no puede establecer el atributo de ID de un elemento de forma dinámica.

Por triste que esto probablemente no sea relevante para su problema, pero pensé que lo compartiría.

Solución

Y para todos los que encontraron esto haciendo Google en el tema de las pestañas que tuve aquí, es lo que terminé haciendo en la devolución de llamada tabsremove para resolver el problema:

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

Probablemente no sea la solución más sexy pero hey resolvió el problema. Si alguien tiene alguna entrada, por favor comparte ...

Answer 2

Este code funciona en IE7 y 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);

Tal vez problema en otro lugar?

Answer 3

La documentation dice:

Cuando necesite establecer atributos que también estén asignados a una propiedad de puntos de JavaScript (como href, style, src o event-handlers), favorezca esa asignación en su lugar.

Entonces, simplemente cambie la identificación , la asignación de valores y debería haber terminado.

Answer 4

No estaba al tanto de un problema con setAttribute en IE? Sin embargo, puede establecer directamente la propiedad de expansión en el nodo en sí:

hiddenInput.id = "uniqueIdentifier";

Answer 5

Olvídese de setAttribute() : está muy roto y no siempre hace lo que cabría esperar en un IE antiguo (IE <= 8 y modos de compatibilidad en versiones posteriores). Use las propiedades del elemento en su lugar. En general, es una buena idea, no solo para este caso particular. Reemplace su código con lo siguiente, que funcionará en todos los principales navegadores:

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

Actualizar

El hack desagradable en el segundo bloque de código en la pregunta es innecesario, y el código anterior funciona bien en todos los navegadores principales, incluido IE 6. Consulte http://www.jsfiddle.net/timdown/aEvUT/ . La razón por la que obtiene null en su alert() es que cuando se invoca, la nueva entrada aún no está en el documento, por lo que la llamada a document.getElementById() no puede encontrarla.

Answer 6

Use el método jquery attr . Funciona en todos los navegadores.

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

O podrías usar el siguiente código:

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