• Viernes 8 de Noviembre de 2024, 23:27

Autor Tema:  Problema Creando Dinamicamente Botones  (Leído 1931 veces)

parseInt

  • Nuevo Miembro
  • *
  • Mensajes: 3
    • Ver Perfil
Problema Creando Dinamicamente Botones
« en: Viernes 9 de Marzo de 2007, 20:57 »
0
Hola a todos.

Tengo dos problemillas exactamente, y tratan acerca de la creacion
dinamica de nodos tipo button y la asociacion con funciones creadas
tambien dinamicamente.

En el primer caso, he logrado que al clickar un boton se genere otro
con btn=createElement("button");  y tambien agrego con exito una
funcion a document.scripts[0].text  que se lanzara en el onclick del
nuevo boton porque lo asocio con btn.onclick=mifuncion;

Bien, hasta aqui funciona. Pero lo que quiero conseguir es que cada
vez que clickas el boton "generador", se creen botones con el texto
Boton 1, Boton 2, Boton 3 ... (que esto tambien lo he conseguido), y
que cada boton ejecute la funcion mifuncion1, mifuncion2, mifuncion3..

Bueno, pues esto no lo consigo, y es porque no se como expresar en
javascript algo como btn.onclick=mifuncion+numbtn;  He probado
encerrandolo entre comillas dobles, con eval, asignando una variable
con el texto, etc.
El problema es que el parser de javascript parece que espera encontrar
despues del igual el nombre exacto de la funcion, sin permitir que lo
obtenga desde una variable. Si hubiera un sistema que me permitiera
hacer un preprocesado del texto antes de interpretarlo, estaria resuelto.


El segundo caso consiste en que ahora creo yo dinamicamente todos los
nodos de una pagina desde dentro de un script, incluido el nodo HTML,y
los voy añadiendo (si, es una pesadez) en jerarquia, para finalmente
reemplazar mi nodo HTML recien construido por el actual del browser con
un replaceChild(newhtml,oldhtml). Esto funciona ok, la pagina cambia,
pero dentro de la nueva pagina tengo un boton con su funcion que no
hace lo que le indico que haga; he hecho lo mismo que sí funciono en el
caso anterior, con la diferencia que antes no generé un nodo script, sino
que solamente agregue mi funcion.

Estos dos casos me estan volviendo loco, he probado de todo y no lo
consigo, y no se si es por ignorancia o por limitaciones del javascript.
Agradeceria cualquier ayuda.

Salu2.

Altareum

  • Miembro MUY activo
  • ***
  • Mensajes: 327
    • Ver Perfil
    • http://www.avian.com.ar
Re: Problema Creando Dinamicamente Botones
« Respuesta #1 en: Lunes 12 de Marzo de 2007, 18:02 »
0
Para el primer caso te recomendaría que uses al siguiente función:
Citar
function addEvent( obj, type, fn ) {

   if ( obj.attachEvent ) {

  obj['e'+type+fn] = fn;

  obj[type+fn] = function(){obj['e'+type+fn]( window.event );}

  obj.attachEvent( 'on'+type, obj[type+fn] );

   } else

   obj.addEventListener( type, fn, false );

}

No me acuerdo quien la escribió, pero funciona para todos los navegadores, ya que por ejemplo al IE no le gusta mucho la asignación btn.onclick=mifuncion y en algunos casos es necesario usar addEventListener.
Te aseguro que te ahorrará un montón de dolores de cabeza.


El segundo problema que tiene no he llegado a entenderlo bien, pero has tenido en cuenta el "burbujeo" (bubbling) ?? tal vez ese es tu problema.
Aca tienes una excelente web de javascript, en este link explica (inglés) qué es el burbujeo:
http://www.quirksmode.org/js/events_order.html


Saludos.
Altareum.
El postre!, el postre!, el postre!, el postre!, el postre!, el postre!.....
 | Klinka | Kiree | Avian |

parseInt

  • Nuevo Miembro
  • *
  • Mensajes: 3
    • Ver Perfil
Re: Problema Creando Dinamicamente Botones
« Respuesta #2 en: Martes 13 de Marzo de 2007, 20:56 »
0
Gracias por la ayuda Altareum.

Voy a intentar profundizar en el conocimiento de los eventos de javascript, porque seguro que es la respuesta a las dudas que se me plantean. Te agradezco la orientacion.

No obstante, la segunda duda que tenia me gustaria reexponerla:

Quiero crear desde una pagina otra distinta que sustituya a la actual, esto es, que el DOM de la actual cambie completamente desde el nodo raiz HTML. Y eso incluye objetos y eventos. Lo he logrado en cuanto a objetos, pero los eventos no responden, aunque si   pido al browser que me muestre el metodo onclick de un nuevo objeto boton creado, todo es correcto, y si le pido que me muestre el contenido de la nueva etiqueta SCRIPT, tambien me da el texto que esperaba y que yo asigne.

Lo que me parecia raro era que he logrado hacer eso en otro ejemplo pero sin la necesidad de sustituir todos los nodos, solamente cambiando el texto de la SCRIPT actual y asignando una funcion al onclick de un nuevo objeto.

Como tu dices, esto debe ser cosa de la arquitectura de eventos del browser.

Gracias de nuevo.
parseInt.

Jakofff

  • Nuevo Miembro
  • *
  • Mensajes: 1
    • Ver Perfil
Re: Problema Creando Dinamicamente Botones
« Respuesta #3 en: Martes 5 de Junio de 2007, 00:57 »
0
Hola.

gracias al codigo de alguno de ustedes por el foro. he logrado hacer el siguiente ejercicio..

Crear un formulario dinamico, con una imagen que funciona como un boton agregas campos y con otra eliminas... mi post es referente a que no has logrado llamar una funcion en un boton dinamico y funcion asi, espero te sirva...


Código: Text
  1. <script type="text/javascript">
  2.  var numero = 0;
  3.  
  4. function agregar(){
  5.  if(document.getElementById && document.createElement){
  6.    
  7.    var respuestas = document.getElementById("respuestas");
  8.    
  9.    var span = document.createElement('SPAN');
  10.    span.id = 'resp' + (++numero);
  11.    
  12.    var br = document.createElement('BR');
  13.    
  14.    var label_tex = document.createElement('LABEL');
  15.    label_text = document.createTextNode('Respuesta: ')
  16.    
  17.    var textos = document.createElement('INPUT');
  18.    textos.name = 'res_tex[]';
  19.    textos.size = '20';
  20.    textos.setAttribute('onkeyup','javascript:this.value=this.value.toUpperCase();');
  21.    
  22.    var label_val = document.createElement('LABEL');
  23.    label_val = document.createTextNode('   Valor: ')
  24.      
  25.    var valores = document.createElement('INPUT');
  26.    valores.name = 'res_val[]';
  27.    valores.size = '5'
  28.    
  29.    var quitar = document.createElement('IMG');
  30.    quitar.src = '<?=DIR_IMG?>cancel.gif';
  31.    quitar.name = span.id;
  32.    quitar.onclick = function () { eliminar(this.name) }
  33.        
  34.    span.appendChild(label_text);  
  35.    span.appendChild(textos);
  36.    span.appendChild(label_val);  
  37.    span.appendChild(valores);
  38.    span.appendChild(quitar);
  39.    span.appendChild(br);
  40.    respuestas.appendChild(span);
  41.  }
  42. }
  43. function eliminar(obj) {
  44.   contenedor = document.getElementById('respuestas');
  45.   contenedor.removeChild(document.getElementById(obj));
  46. }
  47. </script>
  48.  

Este script funciona en IE 6 y FF 2.004