Foros del Web » Programando para Internet » Javascript » Frameworks JS »

cargar datos en un div con xajax

Estas en el tema de cargar datos en un div con xajax en el foro de Frameworks JS en Foros del Web. Buenas, estoy haciendo un desarrollo para mi trabajo y "bendita la hora que se me ocurrio" tengo que cargar los cheques que se emiten en ...
  #1 (permalink)  
Antiguo 17/09/2008, 19:35
 
Fecha de Ingreso: octubre-2004
Ubicación: San Rafael - Mendoza
Mensajes: 13
Antigüedad: 20 años
Puntos: 0
cargar datos en un div con xajax

Buenas, estoy haciendo un desarrollo para mi trabajo y "bendita la hora que se me ocurrio" tengo que cargar los cheques que se emiten en una base, hasta ahi todo bien. El tema es que cuando ingreso a la pantalla para cargar los cheques pongo en un form un cheque solamente, y si el usuario quiere cargar mas de uno solo debe hacer click en "agregar cheque" y agrego otra linea de campos en un div debajo del anterior.

He logrado hacer esto con xajax y php, pero si vuelvo a hacer click no me carga un tercer cheque, entonces la idea inicial no me sirve de nada. Alguna idea de como solucionarlo?...
El codigo es el siguiente:

Código:
<?php
//incluímos la clase ajax
require ('xajax/xajax.inc.php');
//instanciamos el objeto de la clase xajax
$xajax = new xajax(); 
$xajax->setCharEncoding('ISO-8859-1');
$xajax->decodeUTF8InputOn();

$num = 1;
$salida ="";
function proceso_envio($indice){
  //creo el xajaxResponse para generar una salida
   $respuesta = new xajaxResponse('ISO-8859-1');
   //validación
	$num = $num + $indice;
	$salida .= '<div id="cheque'.$num.'"><table><tr><td height="25">&nbsp;</td><td align="left" valign="middle"><input name="fecha'.$num.'" type="text" id="campo-'.$num.'" /><img src="calendar.gif" width="14" height="14" type="submit" id="boton-'.$num.'" title="Seleccionar Fecha"/><script type="text/javascript">Calendar.setup({inputField : "campo-'.$num.'",	button : "boton-'.$num.'",	});</script></td><td align="left" valign="middle"><label><input name="num_cheque'.$num.'" type="text" id="num_cheque'.$num.'" size="20" maxlength="30" value="'.$num.'"/></label></td><td align="left" valign="middle"><label><input name="destino_cheque'.$num.'" type="text" id="destino_cheque'.$num.'" size="40" maxlength="50" /> </label></td><td align="left" valign="middle"><label><input name="importe'.$num.'" type="text" id="importe'.$num.'" size="15" maxlength="10" /></label></td><td>&nbsp;</td></tr></table></div>';
      //escribimos en la capa con id="capaformulario" el texto que aparece en $salida
      $respuesta->addAssign("agrego_cheque","innerHTML","$salida");
      
      //tenemos que devolver la instanciación del objeto xajaxResponse
   return $respuesta;
}
//registramos la función creada anteriormente al objeto xajax
$xajax->registerFunction("proceso_envio");

//El objeto xajax tiene que procesar cualquier petición
$xajax->processRequests();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html> 
<head>
<title>Agregar cheques</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<?
   //En el <head> indicamos al objeto xajax se encargue de generar el javascript necesario
   $xajax->printJavascript("xajax/");
?>
</head>
<body>
<div id="capa_titulos">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
          <!--DWLayoutTable-->
          <tr>
            <td height="20" colspan="5" align="right" valign="middle" class="small"><a href="#" onclick="xajax_proceso_envio(1)">«« Agregar cheques al sistema Contable »»</a></td>
            <td width="12">&nbsp;</td>
          </tr><form name="emite_cheques" id="emite_cheques" action="contable/procesa_alta_cheque.php" method="post">
          <tr>
            <td width="10" height="20">&nbsp;</td>
            <td width="195" align="left" valign="middle" class="tabla_iz_ab">&nbsp;&nbsp;Fecha de Emisión</td>
            <td width="154" align="left" valign="middle" class="tabla_iz_ab">&nbsp;&nbsp;Nº de Cheque</td>
            <td width="268" align="left" valign="middle" class="tabla_iz_ab">&nbsp;&nbsp;Destinatario</td>
            <td width="124" align="left" valign="middle" class="tabla_arr_no">&nbsp;&nbsp;Importe</td>
          <td>&nbsp;</td>
          </tr>
</table>
</div>
<div id="cheque1">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td height="25">&nbsp;</td>
            <td align="left" valign="middle"><input name="fecha1" type="text" id="campo-1" tabindex="1"/>
              <img src="calendar.gif" width="14" height="14" type="submit" id="boton-1" title="Seleccionar Fecha"/>
              <script type="text/javascript">
	Calendar.setup({
		inputField    : "campo-1",
		button        : "boton-1",
	});
              </script></td>
            <td align="left" valign="middle"><label>
              <input name="num_cheque1" type="text" id="num_cheque1" tabindex="2" size="20" maxlength="30" />
            </label></td>
            <td align="left" valign="middle"><label>
              <input name="destino_cheque1" type="text" id="destino_cheque1" tabindex="3" size="40" maxlength="50" />
            </label></td>
            <td align="left" valign="middle"><label>
              <input name="importe1" type="text" id="importe1" tabindex="4" size="15" maxlength="10" />
            </label></td>
            <td>&nbsp;</td>
          </tr>
</table>
</div>
<div id="agrego_cheque">
</div>
<div id="envia_form">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                      <td height="25"></td>
                      <td colspan="2" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
                      <td colspan="2" align="right" valign="middle"><label>
                      <input type="submit" name="Grabar" id="Grabar" value="Grabar" tabindex="21" />
                      &nbsp;&nbsp;&nbsp;
                      <input type="reset" name="Limpiar_form" id="Limpiar_form" value="Eliminar datos cargados" tabindex="22" />
                      </label></td>
                      <td></td>
                    </tr>
                    
                    
                    <tr>
                      <td height="155"></td>
                      <td colspan="4" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
                      <td></td>
                    </tr>
        </form></table>
</div>
</body>
</html>
Gracias de antemano por sus respuestas, saludos.
  #2 (permalink)  
Antiguo 19/09/2008, 05:06
 
Fecha de Ingreso: julio-2008
Ubicación: Alcañiz-Teruel-España
Mensajes: 182
Antigüedad: 16 años, 4 meses
Puntos: 5
Respuesta: cargar datos en un div con xajax

yo he de hacer algo similar y tengo una forma o eso creo....

Esta tarde (en España, ahora son las 13:00) respondo con algo...
  #3 (permalink)  
Antiguo 19/09/2008, 08:47
 
Fecha de Ingreso: julio-2008
Ubicación: Alcañiz-Teruel-España
Mensajes: 182
Antigüedad: 16 años, 4 meses
Puntos: 5
Respuesta: cargar datos en un div con xajax

Aver no he empleado nada de codigo AJAX, solo javascript...no se si te servirá...

Lo que hago es en una tabla vacia pulsando un boton añado filas...

Código HTML:
<script type="text/javascript">


function addfila(){

x=document.getElementById('lineas').title;


fila="linea"+x;


elemento=document.getElementById('texto').value;
document.getElementById(fila).innerHTML=elemento;
x2=parseInt(x)+1;
document.getElementById('lineas').title=x2;

codHTML=document.getElementById('lineas').innerHTML

nchar=codHTML.length;
///////
//Es extraño la primera vez la etiqueta <tbody> ocupa 8 chars y despues 7 ¿¿¿???nose porque...
if (x==1) codHTML=codHTML.substring(8,nchar-8);  //Extraigo del codigo la etiquetas <tbody> y </tbody>
else codHTML=codHTML.substring(7,nchar-8);  //Extraigo del codigo la etiquetas <tbody> y </tbody>      
///////

codHTML=codHTML+"<tr><td id='linea"+x2+"'></td></tr>";

document.getElementById('lineas').innerHTML=codHTML;


}

</script>

<input type="text" id="texto"/>
<input type="button" value="añadir fila" onclick="javascript:addfila();"/>

<table id="lineas" title="1">
<tr>
<td id="linea1">
</td>
</tr>
</table> 
Si hay que hacer consulta a una BD o algo asi entonses ya ajax, pero no creo que cambiara mucho la cosa...

espero servirte de ayuda,

Saludos
  #4 (permalink)  
Antiguo 19/09/2008, 10:41
 
Fecha de Ingreso: mayo-2008
Mensajes: 47
Antigüedad: 16 años, 5 meses
Puntos: 0
Respuesta: cargar datos en un div con xajax

mira cambia la salida

Última edición por masi; 19/09/2008 a las 11:04
  #5 (permalink)  
Antiguo 19/09/2008, 11:03
 
Fecha de Ingreso: mayo-2008
Mensajes: 47
Antigüedad: 16 años, 5 meses
Puntos: 0
Respuesta: cargar datos en un div con xajax

quitale a tu salida en la funcion el .

$salida. = esta mal CAMBIALO POR $salida =
  #6 (permalink)  
Antiguo 23/09/2008, 14:18
 
Fecha de Ingreso: octubre-2004
Ubicación: San Rafael - Mendoza
Mensajes: 13
Antigüedad: 20 años
Puntos: 0
Respuesta: cargar datos en un div con xajax

Les cuento como va la cosa y agradezco la ayuda, ya consegui a traves de xajax que me agregue las filas, hasta ahi todo perfecto, el unico inconveniente que tengo (ya se que el desconociemiento es el inconveniente principal) es que no puedo trasladar un contador que me cambie los valores del div.

Acá va el codigo como lo llevo hasta ahora. El código en xajax 0.2.5 es el siguiente:

Cita:
<?php
$num = "";
//incluímos la clase ajax
require ('xajax/xajax.inc.php');
//instanciamos el objeto de la clase xajax
$xajax = new xajax();
$xajax->setCharEncoding('ISO-8859-1');
$xajax->decodeUTF8InputOn();
function proceso_envio($num){
//creo el xajaxResponse para generar una salida
$respuesta = new xajaxResponse('ISO-8859-1');
//validación
$salida = '<div id="cheque'.$num.'"><table><tr><td height="25">&nbsp;</td><td align="left" valign="middle"><input name="fecha'.$num.'" type="text" id="campo-'.$num.'" /><img src="calendar.gif" width="14" height="14" type="submit" id="boton-'.$num.'" title="Seleccionar Fecha"/><script type="text/javascript">Calendar.setup({inputField : "campo-'.$num.'", button : "boton-'.$num.'", });</script></td><td align="left" valign="middle"><label><input name="num_cheque'.$num.'" type="text" id="num_cheque'.$num.'" size="20" maxlength="30" value="'.$num.'"/></label></td><td align="left" valign="middle"><label><input name="destino_cheque'.$num.'" type="text" id="destino_cheque'.$num.'" size="40" maxlength="50" /> </label></td><td align="left" valign="middle"><label><input name="importe'.$num.'" type="text" id="importe'.$num.'" size="15" maxlength="10" /></label></td><td>&nbsp;</td></tr></table></div>';
//escribimos en la capa con id="agrego_cheque" el texto que aparece en $salida
$respuesta->addAppend("agrego_cheque","innerHTML","$salida" );

//tenemos que devolver la instanciación del objeto xajaxResponse
return $respuesta;
}
//registramos la función creada anteriormente al objeto xajax
$xajax->registerFunction("proceso_envio");

//El objeto xajax tiene que procesar cualquier petición
$xajax->processRequests();
?>
Hasta ahi genero una variable salida dentro de la función que contendra todo el div que voy a insertar, la funcion $num sería un contador que llenaria los campos con un valor incrementado, es decir, al hacer un click seria div id=cheque1, otro click y seria div id=cheque2 etc. etc. pero no consigo que el valor se incremente, ya he probado con variables globales de php y nada, para colmo no lo puedo hacer a traves de $_session porque la validación de usuarios ya va por ahi y llevo 6 variables en todo el entorno. Se me ocurrio mandarle el valor en el evento onclick pero no logro que funcione. Acá va el resto del archivo html.:

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Crear input file</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="estilos.css" rel="stylesheet" type="text/css" />
<?
//En el <head> indicamos al objeto xajax se encargue de generar el javascript necesario
$xajax->printJavascript("xajax/");
?>
<script language="javascript" type="text/javascript">
//Aca estuve probando de hacerlo como paso intermedio con javascript. pero tampoco funciono
function cuenta(valor_contador){
++valor_contador;
return valor_contador;
}
</script>
</head>
<body>
<div id="capa_titulos">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td height="20" colspan="5" align="right" valign="middle" class="small"><a href="#" onclick="xajax_proceso_envio(cuenta(1))">«« Agregar cheques al sistema Contable »»</a></td>
<td width="12">&nbsp;</td>
</tr><form name="emite_cheques" id="emite_cheques" action="contable/procesa_alta_cheque.php" method="post">
<tr>
<td width="10" height="20">&nbsp;</td>
<td width="195" align="left" valign="middle" class="tabla_iz_ab">&nbsp;&nbsp;Fecha de Emisión</td>
<td width="154" align="left" valign="middle" class="tabla_iz_ab">&nbsp;&nbsp;Nº de Cheque</td>
<td width="268" align="left" valign="middle" class="tabla_iz_ab">&nbsp;&nbsp;Destinatario</td>
<td width="124" align="left" valign="middle" class="tabla_arr_no">&nbsp;&nbsp;Importe</td>
<td>&nbsp;</td>
</tr>
</table>
</div>
<div id="cheque1">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="25">&nbsp;</td>
<td align="left" valign="middle"><input name="fecha1" type="text" id="campo-1" tabindex="1"/>
<img src="calendar.gif" width="14" height="14" type="submit" id="boton-1" title="Seleccionar Fecha"/>
<script type="text/javascript">
Calendar.setup({
inputField : "campo-1",
button : "boton-1",
});
</script></td>
<td align="left" valign="middle"><label>
<input name="num_cheque1" type="text" id="num_cheque1" tabindex="2" size="20" maxlength="30" />
</label></td>
<td align="left" valign="middle"><label>
<input name="destino_cheque1" type="text" id="destino_cheque1" tabindex="3" size="40" maxlength="50" />
</label></td>
<td align="left" valign="middle"><label>
<input name="importe1" type="text" id="importe1" tabindex="4" size="15" maxlength="10" />
</label></td>
<td>&nbsp;</td>
</tr>
</table>
</div>
<div id="agrego_cheque">
</div>
<div id="envia_form">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="25"></td>
<td colspan="2" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
<td colspan="2" align="right" valign="middle"><label>
<input type="submit" name="Grabar" id="Grabar" value="Grabar" tabindex="21" />
&nbsp;&nbsp;&nbsp;
<input type="reset" name="Limpiar_form" id="Limpiar_form" value="Eliminar datos cargados" tabindex="22" />
</label></td>
<td></td>
</tr>


<tr>
<td height="155"></td>
<td colspan="4" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
<td></td>
</tr>
</form></table>
</div>
</body>
</html>
y todo esto paso por el bendito calendario, porque sino lo hacia en javascript directamente con getelementbyid y appendchild.

Espero que me puedan dar una mano, agradezco el tiempo que se toman para ayudar, si a alguien le sirve mi código, es libre de usarlo, saludos!!!
  #7 (permalink)  
Antiguo 23/09/2008, 15:03
 
Fecha de Ingreso: octubre-2004
Ubicación: San Rafael - Mendoza
Mensajes: 13
Antigüedad: 20 años
Puntos: 0
Respuesta: cargar datos en un div con xajax

LO LOGRE!!
El codigo para quien le sirva es el siguiente, espero que les sirva, hace una semana que le estoy dando vueltas a este asunto, saludos a todos los foreros!!

Cita:
<?php
//incluímos la clase ajax
require ('xajax/xajax.inc.php');
//instanciamos el objeto de la clase xajax
$xajax = new xajax();
$xajax->setCharEncoding('ISO-8859-1');
$xajax->decodeUTF8InputOn();
function proceso_envio($num){
//creo el xajaxResponse para generar una salida
$respuesta = new xajaxResponse('ISO-8859-1');
//validación
$salida = '<div id="cheque'.$num.'"><table><tr><td height="25">&nbsp;</td><td align="left" valign="middle"><input name="fecha'.$num.'" type="text" id="campo-'.$num.'" /><img src="calendar.gif" width="14" height="14" type="submit" id="boton-'.$num.'" title="Seleccionar Fecha"/><script type="text/javascript">Calendar.setup({inputField : "campo-'.$num.'", button : "boton-'.$num.'", });</script></td><td align="left" valign="middle"><label><input name="num_cheque'.$num.'" type="text" id="num_cheque'.$num.'" size="20" maxlength="30" value="'.$num.'"/></label></td><td align="left" valign="middle"><label><input name="destino_cheque'.$num.'" type="text" id="destino_cheque'.$num.'" size="40" maxlength="50" /> </label></td><td align="left" valign="middle"><label><input name="importe'.$num.'" type="text" id="importe'.$num.'" size="15" maxlength="10" /></label></td><td>&nbsp;</td></tr></table></div>';
//escribimos en la capa con id="agrego_cheque" el texto que aparece en $salida
$respuesta->addAppend("agrego_cheque","innerHTML","$salida" );
//tenemos que devolver la instanciación del objeto xajaxResponse
return $respuesta;
}
//registramos la función creada anteriormente al objeto xajax
$xajax->registerFunction("proceso_envio");
//El objeto xajax tiene que procesar cualquier petición
$xajax->processRequests();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Emision de cheques</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="estilos.css" rel="stylesheet" type="text/css" />
<?
//En el <head> indicamos al objeto xajax se encargue de generar el javascript necesario
$xajax->printJavascript("xajax/");
?>
<script language="javascript" type="text/javascript">
<!-- oculto para browsers viejos
// variable que inicialice en funcion al cheque que queramos agregar
var cont = 0;
function cuenta(valor_contador){
valor_contador = cont++;
return valor_contador;
}
//fin de ocultación-->
</script>
</head>
<body>
<div id="capa_titulos">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="20" colspan="5" align="right" valign="middle" class="small"><a href="#" onclick="xajax_proceso_envio(cuenta(cont))">«« Agregar cheques al sistema Contable »»</a></td>
<td width="12">&nbsp;</td>
</tr><form name="emite_cheques" id="emite_cheques" action="contable/procesa_alta_cheque.php" method="post">
<tr>
<td width="10" height="20">&nbsp;</td>
<td width="195" align="left" valign="middle" class="tabla_iz_ab">&nbsp;&nbsp;Fecha de Emisión</td>
<td width="154" align="left" valign="middle" class="tabla_iz_ab">&nbsp;&nbsp;Nº de Cheque</td>
<td width="268" align="left" valign="middle" class="tabla_iz_ab">&nbsp;&nbsp;Destinatario</td>
<td width="124" align="left" valign="middle" class="tabla_arr_no">&nbsp;&nbsp;Importe</td>
<td>&nbsp;</td>
</tr>
</table>
</div>
<div id="cheque1">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="25">&nbsp;</td>
<td align="left" valign="middle"><input name="fecha1" type="text" id="campo-1" tabindex="1"/>
<img src="calendar.gif" width="14" height="14" type="submit" id="boton-1" title="Seleccionar Fecha"/>
<script type="text/javascript">
Calendar.setup({
inputField : "campo-1",
button : "boton-1",
});
</script></td>
<td align="left" valign="middle"><label>
<input name="num_cheque1" type="text" id="num_cheque1" tabindex="2" size="20" maxlength="30" />
</label></td>
<td align="left" valign="middle"><label>
<input name="destino_cheque1" type="text" id="destino_cheque1" tabindex="3" size="40" maxlength="50" />
</label></td>
<td align="left" valign="middle"><label>
<input name="importe1" type="text" id="importe1" tabindex="4" size="15" maxlength="10" />
</label></td>
<td>&nbsp;</td>
</tr>
</table>
</div>
<div id="agrego_cheque">
</div>
<div id="envia_form">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="25"></td>
<td colspan="2" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
<td colspan="2" align="right" valign="middle"><label>
<input type="submit" name="Grabar" id="Grabar" value="Grabar" tabindex="21" />
&nbsp;&nbsp;&nbsp;
<input type="reset" name="Limpiar_form" id="Limpiar_form" value="Eliminar datos cargados" tabindex="22" />
</label></td>
<td></td>
</tr>
<tr>
<td height="155"></td>
<td colspan="4" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
<td></td>
</tr>
</form></table>
</div>
</body>
</html>
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:11.