Foros del Web - Ver Mensaje Individual - 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>