Agregar Campos formulario con eventos de forma dinamica

karl0x · #1 (**permalink**) 22/08/2008, 11:06

Amigos,
Tengo un formulario pagA que se utiliza para agregar elementos a traves de un popup pagB lanzado desde alli, en el popup selecciono los valores que necesito y al momento de dar aceptar los mando como opener.createElement y se muestra en la pag A , hasta alli ningun problema, el problema se da que tambien creo un evento tanto para editar y eliminar estos eventos no me funcionan con el firebug observo que sale un mensaje que la funcion no ha sido definida, aca le muestro lo que he hecho, la finalidad de esto es que cuando le de click en la imagen de eliminar me tiene que borrar la fila y en el caso de editar abrir el popup nuevamente para editarlo.

¡Como puedo agregar un evento con paramentros en un createElement?
Pag A
----------------------------

Código PHP:

  <script type="text/javascript">

function borrar(fila) {

    var oTr = fila;

    while (oTr.nodeName.toLowerCase() != 'tr') {

        oTr = oTr.parentNode;

    }

    var root = oTr.parentNode;

    idfila = oTr.id;

    root.removeChild(oTr); 

}

</script>

Código HTML:

<form method="post" action="algo.php">
<table>
  <tr>
    <td><input type="hidden" id="cantItemPresupuesto" name="cantItemPresupuesto" value="1">
    <input type="button" name="Button" value="Agregar" onClick="window.open('winPrueba2.php','','width=480,height=300,resizable=yes,scrollbars=no,status=no,toolbar=no');"/> </td>
  </tr>
  <tr>
    <td>
	<table border="1">
		<thead>
      <tr>
        <th>Item&deg;</th>
        <th>Descripcion</th>
        <th>ppt referencial </th>
        <th>&nbsp;</th>
      </tr>
	  </thead>
	  <tbody id="addItemPresupuesto"></tbody>
</table>

pag B (popup)
---------------------------------

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

Código PHP:

  <script language="javascript" type="text/javascript">

function addDetallePresup(){

    var selObjCon_id = document.getElementById('con_id');

    var selIndexCon_id = selObjCon_id.selectedIndex;

    var valueCon_id = selObjCon_id.options[selIndexCon_id].value;

    var textCon_id = selObjCon_id.options[selIndexCon_id].text;    

 
    var pre_mto_ppto_ref = document.getElementById('pre_mto_ppto_ref').value

 
    if(valida_envia() != false){

        add('addItemPresupuesto',valueCon_id ,textCon_id ,pre_mto_ppto_ref)

    }

 
}

 
function valida_envia(){

    return true

}

 
function add(idTablaBody,vCon_id,tCon_id,pre_mto_ppto_ref_){

    alert(idTablaBody+'\n'+tCon_id+'\n'+vCon_id+'\n'+pre_mto_ppto_ref_)

    var tbody = opener.document.getElementById(idTablaBody);

    var cantItemPresupuesto = opener.document.getElementById('cantItemPresupuesto');

    idFila=parseInt(cantItemPresupuesto.value);

    

    var tr = opener.document.createElement('tr');

    //para el item

    var td = opener.document.createElement('td');

    var correl= tr.appendChild(td);

        correl.innerHTML=idFila; 

 
    //para el segundo td

    var td1 = opener.document.createElement('td');

    var oSelect=opener.document.createElement("select");

        oSelect.id = 'con_id';

    var oOption = opener.document.createElement("option");

    var t0 = opener.document.createTextNode(tCon_id);

    oOption.appendChild(t0);

    oOption.value = vCon_id;

    oSelect.appendChild(oOption);

    td1.appendChild(oSelect);

    tr.appendChild(td1)        

    //para el tercer td

    var td2 = opener.document.createElement('td')

    var pre_mto_ppto_ref = opener.document.createElement('input')

        pre_mto_ppto_ref.id='pre_mto_ppto_ref_'+idFila;

        pre_mto_ppto_ref.name='pre_mto_ppto_ref';

        pre_mto_ppto_ref.type='text';

        pre_mto_ppto_ref.value=pre_mto_ppto_ref_;

    td2.appendChild(pre_mto_ppto_ref)

    tr.appendChild(td2)

    

    //para el boton Eliminar

    var td3 = opener.document.createElement('td')

    var imgElimi = opener.document.createElement('img')

        imgElimi.id = 'elimPresupuesto_'+idFila;

        imgElimi.src = 'images/application_form_delete.png';

        imgElimi.style.cursor = 'pointer';

        imgElimi.name = 'elimPresupuesto_'+idFila;

        imgElimi.onclick = function() {borrarTemp(this)} 

    td3.appendChild(imgElimi)

    var esp = document.createTextNode("\u00a0\u00a0\u00a0");

    td3.appendChild(esp);

    var imgEdit = opener.document.createElement('img')

        imgEdit.id = 'editPresupuesto_'+idFila;

        imgEdit.src = 'images/application_form_edit.png';

        imgEdit.style.cursor = 'pointer';

        imgEdit.name = 'elimPresupuesto_'+idFila;

        imgEdit.onclick = function () { editar(this) }

    td3.appendChild(imgEdit)

    

    tr.appendChild(td3)

    //    var ntd=opener.document.createElement('td');

    var newfila = tbody.appendChild(tr);

    //le asignamos el correlativo id a la fila

    newfila.id=idFila;

    cantItemPresupuesto.value=idFila+1;

    window.close() 

}

 
function borrarTemp(obj) {

    opener.document.borrar(obj);

}

</script>

Código HTML:

</head>

<body>
<form>
<table>
  <tr>
    <td>Descripcion</td>
    <td>
      <select name="con_id" id="con_id">
        <option value="0">&lt;-seleccionar-&gt;</option>
        <option value="1">ESTRUCTURAS</option>
        <option value="2">ARQUITECTURA</option>
        <option value="3">INSTALACIONES</option>
      </select></td>
  </tr>
  <tr>
    <td>monto</td>
    <td><input name="pre_mto_ppto_ref" type="text" id="pre_mto_ppto_ref"></td>
  </tr>
  <tr>
    <td colspan="2"><input type="button" name="Button" value="Agregar" onClick="javascript:addDetallePresup();">
      <input type="button" name="Button" value="Cancelar"></td>
  </tr>
</table>
</form>
</body>
</html>

David · #2 (**permalink**) 22/08/2008, 11:27

El único error que veo es este:

Código PHP:

  imgEdit.onclick = function () { editar(this) }

¿Dónde está la función editar?

karl0x · #3 (**permalink**) 22/08/2008, 11:48

Bueno, esa funcion no esta implementada todavia y es mas la puedo quitar, y sigue todo igual, lo que no entiendo es como agregar a una function dinamicamente al opener, no me lo reconoce de ninguna manera, si deseas puedes copiar el codigo y probarlo en tu navegador...
Quiza si estuviera creando los elementos en la misma pagina, la forma de crear el evento esta bien, pero si es un opener, se hace de la misma forma??

David · #4 (**permalink**) 22/08/2008, 12:09

Yo lo solucioné de una forma medio extraña, pero bueno, funciona. Colocando esto en pagea:

Código PHP:

  function setborrar(vimg) {
vimg.onclick = function() { borrar(this) }
}

Y luego en pageb:

Código PHP:

  opener.setborrar(imgElimi);

No es de lo más ortodoxo, pero sirve si no encuentras otra solución

.

karl0x · #5 (**permalink**) 22/08/2008, 13:57

Hola David, nose como lo has hecho funcionar pero me puedes escirbir exactamente donde has hecho los cambios he intentado hacerlo funcionar pero hasta ahora no lo consigo, esto es lo k he hecho:

pagB

Código PHP:

  imgElimi.onclick = function(){opener.setborrar(imgElimi)}

y en la pagA, agregue esto:

Código PHP:

  function setborrar(vimg) {

    vimg.onclick = function() { borrar(this) }

}

Espero, la respuesta..xDDD

David · #6 (**permalink**) 22/08/2008, 13:59

No, no fue así la modificación cambia esto:

Código PHP:

  imgElimi.onclick = function() { borrarTemp(this) }

Por esto:

Código PHP:

  opener.setborrar(imgElimi);

Lo que hacemos en este caso es cambiar la función onclick directamente en la ventana padre, es por eso que de esa manera funciona.

karl0x · #7 (**permalink**) 22/08/2008, 15:47

Jajaja, nose como se te ocurrio, pero funciona, ya me estaba volviendo loco, asumo yo que este tipo de problema lo deben tener muchas personas, ojala entonces que quede como ejemplo.
Muchas Gracias David