Problema con createElement(tag)

[starmark]

Hola amigos un problemita a mi entender bien raro ..
Estoy creando un elemento TR dentro de un TBODY de la siguiente manera ..

Usando prototype ..

Código:

var table = $('mi_tabla');
var tbody = document.createElement('tbody');
var tr = document.createElement('tr');
tr.id = "tr_name";        // Le asigno un ID

tbody.appendChild(tr);

tr.innerHTML = "<td>Ejemplo de createElement </td>";

Y me lo crea perfectamente ..

pero creo otra funcion para eliminar el TR en caso que exista, y me dice que
no existe y aqui mi problema =S .. la funcion es algo asi;

Código:

function borrar ()  {
     if ($('tr_name')) {
        tbody.removeChild($('tr_name'));
    }
         else {
               alert ('No existe el tag');
          }
}

Siempre me devuelve que no existe =S ::..

Sin embargo en el primer trozo de codigo que apunte si en la linea siguiente
luego de asignarle el ID hago un alert, que quede asi;

Código:

var table = $('mi_tabla');
var tbody = document.createElement('tbody');
var tr = document.createElement('tr');
tr.id = "tr_name";        // Le asigno un ID
alert ($('tr_name').tagName);

tbody.appendChild(tr);

tr.innerHTML = "<td>Ejemplo de createElement </td>";

Me devuelve TR :.. No entiendo =S .. Espero me puedan ayudar ..

Y una cosa curiosa .. en el navegador IE, Firefox que son los que uso ,
Pulso sobre ver codigo fuente .. Y el TR que creo nom aparece .. Eso es normal ?

Espero este en el foro correcto .. Saludos

[caricatos]

Iniciado por starmark

... la funcion es algo asi;

Código:

function borrar ()  {
     if ($('tr_name')) {
        tbody.removeChild($('tr_name'));
    }
         else {
               alert ('No existe el tag');
          }
}

Siempre me devuelve que no existe =S ::..

La verdad es que no uso prototype, pero parece que está bien usas $(), pero ese "algo así", puede que sea el problema, ya que en la línea siguiente usas un "tbody" que no creo que funcione porque está declarado de forma local... y dentro de las funciones suelen ser "inaccesibles" las variables creadas localmente en otras partes.

¿Te has fijado si existía algún error?

Saludos

[starmark]

Iniciado por caricatos

La verdad es que no uso prototype, pero parece que está bien usas $(), pero ese "algo así", puede que sea el problema, ya que en la línea siguiente usas un "tbody" que no creo que funcione porque está declarado de forma local... y dentro de las funciones suelen ser "inaccesibles" las variables creadas localmente en otras partes.

¿Te has fijado si existía algún error?

Saludos

Bueno lo que pasa es que en IE, si intento crear un TR sin tener un Tbody
me lanza un error porque la jerarquia dic que debe ser;

Código:

<table>
   <tbody>
      <tr> 
         <td>
         </td>
      </tr>
   </tbody>
</table>

desde alli fue que comenc a usar el Tbody .. para poder crear SUb-elementos TR

Con respecto a lo de las variables locales inaccesibles pregunto;

al crear un nuevo elemento sea cual sea, estoy modificando el DOM
Este elemento es inaccesible en ora funcion ? .. no entiendo esto ya
que el elemento esta en el DOM ..

[caricatos]

Iniciado por starmark

...al crear un nuevo elemento sea cual sea, estoy modificando el DOM
Este elemento es inaccesible en ora funcion ? .. no entiendo esto ya
que el elemento esta en el DOM ..

Hola:

DOM es un sistema accesible desde la raiz del documento o de la ventana (document o window)... pero esa variable tbody es una variable local (bueno, en este caso lo he supuesto, pero he pensado que lo has hecho desde algún evento, haciendo una llamada... pero, si no pones todo el código (aunque es preferible simplificarlo, tal como lo veo, debo adivinar de lo que se trata)... Pues eso, si dentro de una función pones:

function mi_funcion() {
var tbody = document.createElement("tbody");
//...
el_tag_que_sea.appendChild(tbody);
//...
}

... ese tbody solo es accesible dentro de su contexto... sería visible para todo el documento si tuviera un id y lo hubieras referenciado con document.getElementById()...

Saludos

[starmark]

Iniciado por caricatos

Hola:

DOM es un sistema accesible desde la raiz del documento o de la ventana (document o window)... pero esa variable tbody es una variable local (bueno, en este caso lo he supuesto, pero he pensado que lo has hecho desde algún evento, haciendo una llamada... pero, si no pones todo el código (aunque es preferible simplificarlo, tal como lo veo, debo adivinar de lo que se trata)... Pues eso, si dentro de una función pones:

function mi_funcion() {
var tbody = document.createElement("tbody");
//...
el_tag_que_sea.appendChild(tbody);
//...
}

... ese tbody solo es accesible dentro de su contexto... sería visible para todo el documento si tuviera un id y lo hubieras referenciado con document.getElementById()...

Saludos

Ok .. mira .. lo pondre de una forma resumida
Yo tngo mi form por ejemplo con el campo nombre en
su tabla; de la siguiente forma;

Código:

<form name="form_contact" id="form_contact">
   <table id="table_submit" width="100%" height="1" cellpadding="0" cellspacing="0" border="0">
          <tbody id="tbody_contact_submit">
          	<tr id="tr_name">
                    <td valign="top" width="76%">
                             <input onchange="validar('uname','tr_name')" type="text"  id="uname"/>
                    </td>
                </tr>
          </tbody>
  </table>
</form>

Una cosa, el Tr que contiene el input le asigno un ID que le paso a la funcion
validar por parametros para insertar el TR que mostrara el error encima de el;
y la funcion validar seria;

Código javascript:

function validar (id,tr_error_id) {
   var refer = $('tbody_contact_submit');
   var newTr = createElement ('tr');
   newTr.id = 'tr_name_error'; // Asigno un ID para hacer referencia a el luego
      patron = /^[\D]$/
          if (!patron.test ($(id)) {
                     // Si no cumple el patron inserto el TR cn el error encima del
                    // input nombre
              refer.insertBefore(newTr,$(tr_error_id));
              newTr.innerHTML = "<td>El mensaje de error </td>";           
          }
                else {
                        if ($('tr_name_error')) { // Si existe el tr error lo elimino
                             refer.removeChild($('tr_name_error'));
                        }
                 }
 
}
 

Cuando el campo cumple con el patron perfecto elimina el Tag TR ..

Pero si me creo otra funcion como lo explique antes y hago un;

Código javascript:

if ($('tr_name_error')) {
     alert ('Existe');
}
      else {
         alert ('No existe');
      }
 

Aunq el TR existe y esta visible el error en el navegador me arroja que
no existe u.u

Que estare haciendo mal ? =[

[monoswim]

Hola, te moví el mensaje desde el foro de XML hacia el de javascript, ya que creo que en este recibirás una mejor ayuda...Cualquier cosa me dices...

Saludos

[marcopoloaz06]

hola, ps en ningun momento veo el :
js:

Código javascript:

document.appendChild(tbody);
 

que va hací:
js:

Código javascript:

var table = $('mi_tabla');
var tbody = document.createElement('tbody');
var tr = document.createElement('tr');
tr.id = "tr_name";        // Le asigno un ID
tr.innerHTML = "<td>Ejemplo de createElement </td>";
tbody.appendChild(tr);
 
document.appendChild(tbody);
 

creo que ese es el error
saluddoss
:]

[starmark]

Iniciado por marcopoloaz06

hola, ps en ningun momento veo el :
js:

Código javascript:

document.appendChild(tbody);
 

que va hací:
js:

Código javascript:

var table = $('mi_tabla');
var tbody = document.createElement('tbody');
var tr = document.createElement('tr');
tr.id = "tr_name";        // Le asigno un ID
tr.innerHTML = "<td>Ejemplo de createElement </td>";
tbody.appendChild(tr);
 
document.appendChild(tbody);
 

creo que ese es el error
saluddoss
:]

Hola marcopoloaz06 .. El Tbody que creo aca con createElement('tbody')
ya existe dentro de una tabla. .. pero aca hago como si lo creara y dentro de
el el TR y asi respectivamente, por eso no inserto el Tbody en ningun lado;

repito, no tengo problemas con crear el nuevo elemento TR,
el problema es cuando de otra funcion intento eliminarlo me dic
que dicho elemento no existe aunq veo en el navegador que si esta presente con la informacion
que le e asignado que es un mensaje de error ..

Aun no soluciono mi problema u.u

Si no estoy siendo explicito diganlo .. Saludos

[starmark]

Iniciado por monoswim

Hola, te moví el mensaje desde el foro de XML hacia el de javascript, ya que creo que en este recibirás una mejor ayuda...Cualquier cosa me dices...

Saludos

Gracias .. espero solucionar mi problema u.u

[starmark]

Iniciado por marcopoloaz06

hola, ps en ningun momento veo el :
js:

Código javascript:

document.appendChild(tbody);
 

que va hací:
js:

Código javascript:

var table = $('mi_tabla');
var tbody = document.createElement('tbody');
var tr = document.createElement('tr');
tr.id = "tr_name";        // Le asigno un ID
tr.innerHTML = "<td>Ejemplo de createElement </td>";
tbody.appendChild(tr);
 
document.appendChild(tbody);
 

:]

mira .. lo pondre de una forma resumida
Yo tngo mi form por ejemplo con el campo nombre en
su tabla; de la siguiente forma;

Código:

<form name="form_contact" id="form_contact">
   <table id="table_submit" width="100%" height="1" cellpadding="0" cellspacing="0" border="0">
          <tbody id="tbody_contact_submit">
          	<tr id="tr_name">
                    <td valign="top" width="76%">
                             <input onchange="validar('uname','tr_name')" type="text"  id="uname"/>
                    </td>
                </tr>
          </tbody>
  </table>
</form>

Una cosa, el Tr que contiene el input le asigno un ID que le paso a la funcion
validar por parametros para insertar el TR que mostrara el error encima de el;
y la funcion validar seria;

Código javascript:

function validar (id,tr_error_id) {
   var refer = $('tbody_contact_submit');
   var newTr = createElement ('tr');
   newTr.id = 'tr_name_error'; // Asigno un ID para hacer referencia a el luego
      patron = /^[\D]$/
          if (!patron.test ($(id)) {
                     // Si no cumple el patron inserto el TR cn el error encima del
                    // input nombre
              refer.insertBefore(newTr,$(tr_error_id));
              newTr.innerHTML = "<td>El mensaje de error </td>";           
          }
                else {
                        if ($('tr_name_error')) { // Si existe el tr error lo elimino
                             refer.removeChild($('tr_name_error'));
                        }
                 }
 
}
 

Cuando el campo cumple con el patron perfecto elimina el Tag TR ..

Pero si me creo otra funcion como lo explique antes y hago un;

Código javascript:

if ($('tr_name_error')) {
     alert ('Existe');
}
      else {
         alert ('No existe');
      }
 

Aunq el TR existe y esta visible el error en el navegador me arroja que
no existe u.u

Que estare haciendo mal ? =[

[marcopoloaz06]

mmmm ps ya me hice mas bolas,no seria mas fácil si le haces display="none" y le cambias la vicivilidad?????
ya no habría tantos problemas
:)

[starmark]

Iniciado por marcopoloaz06

mmmm ps ya me hice mas bolas,no seria mas fácil si le haces display="none" y le cambias la vicivilidad?????
ya no habría tantos problemas
:)

jejeje si lo que pasa es que ahora es que estoy trabajando con el DOM, modificando agregando kitando etiketas etc .. y pues kisiera solucionar eso u.u

[starmark]

Amigo gracias por su ayuda .. ya solucione el problema ..

Era una cosa muy tonta .. loq pasa es que tengo un formulario que envia un mail
y al momento de enviar me elimina el formulario completo y sale un SWF Mostrando
al usuario que esta enviando, si el mensaje es enviado o no enviado muestro
un boton para enviar otro mensaje o reintentar, al pulsar sobre enviar otro
es que empiezo a jugar con el DOM, Creo nuevamente todo el form,

Y EL PROBLEMA ERA, que al crear la botonera de enviar y no enviar, no les estaba asignando las funciones correspondiente bueno es algo complicado de
entender me parec, pero lo importante es que esta solucionado,

Esto de trabajar cn el DOM es si se quiere medio enrredado, pero que UTIL es ..
Mis saludos y gracias

Me gustaria saber como coloco este tema como Ya solucioando .. xq trato de editar el primer mensaje y nom permite modificar el titulo =S

[starmark]

Tema solucionado gracias a los que respondieron en este tema

[sweetlydark]

No se como lo solucionaste pero para aquellos que lleguen aquí en este:

Iniciado por starmark

Hola amigos un problemita a mi entender bien raro ..
Estoy creando un elemento TR dentro de un TBODY de la siguiente manera ..

Usando prototype ..

Código:

var table = $('mi_tabla');
var tbody = document.createElement('tbody');
var tr = document.createElement('tr');
tr.id = "tr_name";        // Le asigno un ID

tbody.appendChild(tr);

tr.innerHTML = "<td>Ejemplo de createElement </td>";

Y me lo crea perfectamente ..

pero creo otra funcion para eliminar el TR en caso que exista, y me dice que
no existe y aqui mi problema =S .. la funcion es algo asi;

Código:

function borrar ()  {
     if ($('tr_name')) {
        tbody.removeChild($('tr_name'));
    }
         else {
               alert ('No existe el tag');
          }
}

Siempre me devuelve que no existe =S ::..

Sin embargo en el primer trozo de codigo que apunte si en la linea siguiente
luego de asignarle el ID hago un alert, que quede asi;

Código:

var table = $('mi_tabla');
var tbody = document.createElement('tbody');
var tr = document.createElement('tr');
tr.id = "tr_name";        // Le asigno un ID
alert ($('tr_name').tagName);

tbody.appendChild(tr);

tr.innerHTML = "<td>Ejemplo de createElement </td>";

Me devuelve TR :.. No entiendo =S .. Espero me puedan ayudar ..

Y una cosa curiosa .. en el navegador IE, Firefox que son los que uso ,
Pulso sobre ver codigo fuente .. Y el TR que creo nom aparece .. Eso es normal ?

Espero este en el foro correcto .. Saludos

Necesitas apegar a tbody al documento antes de poder encontrar al tr por su id. Aquí usarías esto:

table.appendChild(tbody);


En este segundo:

Iniciado por starmark

mira .. lo pondre de una forma resumida
Yo tngo mi form por ejemplo con el campo nombre en
su tabla; de la siguiente forma;

Código:

<form name="form_contact" id="form_contact">
   <table id="table_submit" width="100%" height="1" cellpadding="0" cellspacing="0" border="0">
          <tbody id="tbody_contact_submit">
          	<tr id="tr_name">
                    <td valign="top" width="76%">
                             <input onchange="validar('uname','tr_name')" type="text"  id="uname"/>
                    </td>
                </tr>
          </tbody>
  </table>
</form>

Una cosa, el Tr que contiene el input le asigno un ID que le paso a la funcion
validar por parametros para insertar el TR que mostrara el error encima de el;
y la funcion validar seria;

Código javascript:

function validar (id,tr_error_id) {
   var refer = $('tbody_contact_submit');
   var newTr = createElement ('tr');
   newTr.id = 'tr_name_error'; // Asigno un ID para hacer referencia a el luego
      patron = /^[\D]$/
          if (!patron.test ($(id)) {
                     // Si no cumple el patron inserto el TR cn el error encima del
                    // input nombre
              refer.insertBefore(newTr,$(tr_error_id));
              newTr.innerHTML = "<td>El mensaje de error </td>";           
          }
                else {
                        if ($('tr_name_error')) { // Si existe el tr error lo elimino
                             refer.removeChild($('tr_name_error'));
                        }
                 }
 
}
 

Cuando el campo cumple con el patron perfecto elimina el Tag TR ..

Pero si me creo otra funcion como lo explique antes y hago un;

Código javascript:

if ($('tr_name_error')) {
     alert ('Existe');
}
      else {
         alert ('No existe');
      }
 

Aunq el TR existe y esta visible el error en el navegador me arroja que
no existe u.u

Que estare haciendo mal ? =[

tienes un pequeño error:

refer.insertBefore(newTr,$(tr_error_id));

usa:

refer.insertBefore(newTr,$('tr_error_id'));

En si los dos tiene que ver con los mismo. No puedes acceder a un elemento creado con createElement con getElementById sin haberlo insertado al documento.

[starmark]

Iniciado por sweetlydark

No se como lo solucionaste pero para aquellos que lleguen aquí en este:



Necesitas apegar a tbody al documento antes de poder encontrar al tr por su id. Aquí usarías esto:

table.appendChild(tbody);


En este segundo:



tienes un pequeño error:

refer.insertBefore(newTr,$(tr_error_id));

usa:

refer.insertBefore(newTr,$('tr_error_id'));

En si los dos tiene que ver con los mismo. No puedes acceder a un elemento creado con createElement con getElementById sin haberlo insertado al documento.

Mucha razon sweetlydark, lo que pasa es que para efectos del ejemplo
que coloque aqui yo creo un nuevo elemento TBODY que porsupuesto
va dentro de un table, pero en mi script en realidad ese TBODY ya existe
en el documento, y en el pedazo de script que dices ay un error, no lo hay
lo que pasa es que mira;

tr_error_id, es una variable que le paso a la funcion validar, esta variable contiene
el id del TR que contiene el INPUT que estoy validando;

Esto es para que la funcion sepa que el nuevo TR que quiero crear,
donde se va mostrar el error se cree encima del TR del INPUT,

por eso al crear dicho TR lo creo asi;

refer.insertBefore(newTr,$(tr_error_id));

por que tr_error_id no es el ID directamente, es la variable que lo contiene;

no se si me explico .. soi muy malo para explicar jejeje

[caricatos]

Hola:

He unido los 2 temas que has abierto, y borrado uno de los mensajes (repetido). Te recomiendo que si no sabes en que foro debes poner tu mensaje, en vez de repetirlo, reportarlo para que los moderadores movamos el mismo al foro adecuado.

La verdad es que en principio no me gusta ver eso de que se han solucionado los temas, ya que siempre se pueden aportar cosas nuevas si se leen (con el cartelito se puede obviar su lectura), pero si quieres hacerlo, tienes que editar el mensaje de forma "avanzada".

Saludos