Enviar variables PHP a 4 DIVS distintos cargados con Jquery

daenor · #1 (**permalink**) 26/11/2008, 08:26

Muy buenos días!

Estoy trabajando sobre una página que traería datos desde un MySQL, y estos datos, luego, debería repartirse por 3 divs + 1 div (listados), donde se realiza un listado de los datos solicitados.
Luego, en cada uno de estos 3 primeros divs hay un form que cargaría el div "listados".

El código de index.php

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CARGANDO DIVS</title>
<!-- INICIO JQUERY -->
	<script src="js/jquery.js"></script>
<!-- FIN JQUERY -->

<!-- INICIO CONFIGURACIONES -->
	<script src="js/ajax.js" type="text/javascript"></script>
<!-- FIN CONFIGURACIONES -->

<!-- INICIO INCLUDES "CALENDARIO"-->
	<link rel="stylesheet" type="text/css" href="moduleCalendar/codebase/dhtmlxcalendar.css">
	<script src="moduleCalendar/codebase/dhtmlxcommon.js"></script>
	<script src="moduleCalendar/codebase/dhtmlxcalendar.js"></script>
	<script>window.dhx_globalImgPath="moduleCalendar/codebase/imgs/";</script>
<!-- FIN INCLUDES "CALENDARIO"-->

<!-- INICIO Validación RESPONSABLES TAREAS -->
	<script src="js/error_carg.js" type="text/javascript"></script>
<!-- FIN Validación RESPONSABLES TAREAS -->


<link href="css/estilos.css" media="all" type="text/css" rel="stylesheet">


<!-- INICIO INCLUDES "ENVIA VARIABLES" -->
<script>
function recibeid(_pagina,valorget,valorpost,capa){ 
ajax=objetus(_pagina);
if(valorpost!=""){
ajax.open("POST", _pagina+"?"+valorget+"&tiempo="+new Date().getTime(),true);
} else {
ajax.open("GET", _pagina+"?"+valorget+"&tiempo="+new Date().getTime(),true);
}
ajax.onreadystatechange=function() {
 if (ajax.readyState==1){
  document.getElementById(capa).innerHTML = "<img src='loadingcircle.gif' align='center'> Aguarde por favor...";
  }
  if (ajax.readyState==4) {
   if(ajax.status==200)
   {document.getElementById(capa).innerHTML = ajax.responseText;}
   else if(ajax.status==404)
                                             {
 capa.innerHTML = "La direccion no existe";
                                             }
                           else
                                             {
                            capa.innerHTML = "Error: ".ajax.status;
                                             }
}
}
if(valorpost!=""){
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send(valorpost);
} else {
ajax.send(null);
}
} 
</script>


<?
include("cargadores.php");
?>

</head>
<body>

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top"><div id="resp_tarea"></div></td>
    <td width="5"></td>
    <td valign="top"><div id="fechas"></div></td>
  </tr>
  <tr>
    <td height="5"></td>
    <td width="5" height="5"></td>
    <td height="5"></td>
  </tr>
  <tr>
    <td colspan="3" valign="top"><div id="form_carga"></div></td>
  </tr>
  <tr>
    <td height="5"></td>
    <td width="5" height="5"></td>
    <td height="5"></td>
  </tr>
  <tr>
    <td colspan="3" valign="top"><div id="listados"></div></td>
  </tr>
  <tr>
    <td height="5"></td>
    <td width="5" height="5"></td>
    <td height="5"></td>
  </tr>
</table>

<!-- INICIO Cargador "Loading" -->
<span id="loading"></span>
<!-- FIN Cargador "Loading" -->
</body>
</html>

La función "recibeid" es la que utilizo en estos tres formularios para cargar luego datos en el div listados.

Bien, mi problema es que al cargar index.php, cargar los datos con cargadores.php y crear las variables php según la DB, no se como hacer que los 4 divs tomen las variables ya cargadas. La única manera que encontré es creando una conexión por cada div, pero no me sirve para este caso.

¿Como se podrían enviar las variables a los 4 divs?
¿Es necesario alguna otra info para que pueda ayudar?

Gracias desde ya!
Saludos!

GatorV · #2 (**permalink**) 26/11/2008, 09:24

Si te refieres por variables a la capa directamente y asignar el resultado puedes hacer algo como por ejemplo pasarle un array con las capas a tu función y por cada capa asignar el resultado, algo así:

Código javascript:

Ver originalfunction recibeid(_pagina,valorget,valorpost,capa){ 
// ...
       if(ajax.status==200) {
            foreach(i in capa) {
                  document.getElementById(capa[i]).innerHTML = ajax.responseText;
            }
       }
}

y lo llamarias por ejemplo: recibeid("algo.php","bla","bla",['capa1', 'capa2', 'capa3', 'capa4'])

Saludos.

daenor · #3 (**permalink**) 26/11/2008, 09:35

GatorV, mil gracias por responder.

Por variables me refiero a las variables propias de PHP $variable:
cargadores.php

Código PHP:

  <?PHP
$ip = $_SERVER['REMOTE_ADDR'];  
//Nombre Default:
$nombre_default = "4";
//Tarea Default:
$tarea_default = "20";
//$nombre_default = acá vendria la manera
// en que yo tomo el dato: sesion, get o post
//Consulto el usuario actual
include("bin/respon_select_cons.php");
/* Extrae
$id_responsable = $responsable_default[id_responsable];
$nombre_responsable = $responsable_default[nombre_r];
$codigo_responsable = $responsable_default[codigo_r];
*/
include("bin/tarea_select_cons.php");
/* Extrae
$id_tarea = $tarea_default[id_tarea];
$codigo_tarea = $tarea_default[codigo_t];
$nombre_tarea = $tarea_default[tarea_t];
*/
?>

La "capa" mencionada allí en la función, es el DIV donde se cargará la url...
De todas formas GatorV, esta función solo pa puedo hacer funcionar si la agrego en un OnClick()
Así:

Código HTML:

<input type="submit" name="submit" class="button" value="Ultima Fecha" id="submit_btn"
onClick="recibeid('../listados/dia_listado.php', 'process=mostrar', 
'selec_respons='+contact.selec_respons.value+'&selec_tareas='+contact.selec_tareas.value+'',
'listados')">

De otra manera no pude hacerla correr :(
Ya tengo la cabeza ofuscada.

O no comprendí lo que quisiste decir ^^

Alguna idea?
Gracias!!

GatorV · #4 (**permalink**) 26/11/2008, 11:19

En ese caso investiga acerca de json, necesitas devolver el objeto codificado en JSON para poder evaluarlo y usarlo en tu pagina.

Saludos

daenor · #5 (**permalink**) 26/11/2008, 11:25

Perfecto entonces!
Veremos que sale!
Mil Gracias!

erlingfiallos · #6 (**permalink**) 26/11/2008, 12:32

porque no retornas de php una respuesta separada por pipes "|", luego cuando la recibes en javascript.. simplemente separas esa cadena en un arreglo utilizando la funcion split .. y listo.. ya tienes en un arreglo las respuestas que enviaste desde php.. si te sirve de algo.. aqui hay un ejemplo..

http://jack.xtremdesign.net/blog/200...ia-javascript/

GatorV · #7 (**permalink**) 26/11/2008, 14:58

Aunque sirve, lo mejor es hacer algo más estandar, json no es dificil de usar, de hecho es más fácil solo es cuestión de entenderlo.

Saludos.

daenor · #8 (**permalink**) 26/11/2008, 16:02

Los voy siguiendo eh!
No crean que no les estoy prestando atención ^^
Estoy haciendo pruebas con las cosas que me van diciendo ^^

Gracias nuevamente ^^

daenor · #9 (**permalink**) 28/11/2008, 08:35

Buenas gente!
Bien, al fin lo pude solucionar, mezclando algunas cosas.

Veamos...
Json me fue complicado de entender. No sabía por donde podia enviar las variables y demás. Lo intenté! :(
Lo de los Pipes, mil gracias, pero tampoco lo entendí ^^
Aun me falta carrera, me parece :(

De todas formas, con las cosas que me fueron diciendo, se me abrió un poco la cabeza :)

Bien, volví a la versión en la que estaba, y debe ser que se me quemó el cerebelo o algo ^^, que lo resolví de esta manera.
Para empezar, coloqué todos los scripts en la pagina index, y luego, realicé lo siguiente:

Teniendo en cuenta que ya tomé los valores de la base de datos que debo enviar a los diferentes DIVs:

Código javascript:

Ver originalfunction Enviar(_pagina,capa) {
var
ajax;
ajax = ajaxFunction();
 
ajax.open("POST", _pagina, true);
 
ajax.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
ajax.onreadystatechange = function()
{
 
if (ajax.readyState==1){
document.getElementById(capa).innerHTML = 
"<center><img src='images/loading.gif' align='center' /></center>";
}
 
if (ajax.readyState == 4)
{
if (ajax.status==200)
{
document.getElementById(capa).innerHTML =
ajax.responseText;
 
}}}
ajax.send(null);
}
 
 
/*Dato de Responsable a enviar
$id_responsable = $_GET['id_responsable'];
//Dato de Tarea a enviar
$id_tarea = $_GET['id_tarea'];
 
/*
Debo enviar los mismos datos a 4 contenedores distintos, cuales trabajaran los datos de maneras distintas.
*/
 
$(document).ready(function(){
        Enviar('listados/resp_tareas.php?id_responsable=<?PHP echo $id_responsable; ?>&id_tarea=<?PHP echo $id_tarea; ?>', 'resp_tarea');
        
        Enviar('listados/fechas.php?id_responsable=<?PHP echo $id_responsable; ?>&id_tarea=<?PHP echo $id_tarea; ?>', 'fechas');
        
        Enviar('listados/form_trabajo.php?id_responsable=<?PHP echo $id_responsable; ?>&id_tarea=<?PHP echo $id_tarea; ?>', 'form_carga');
        
        Enviar('listados/dia_listado.php?id_responsable=<?PHP echo $id_responsable; ?>&id_tarea=<?PHP echo $id_tarea; ?>', 'listados');
});

Y eso es todo ^^
Gracias!!

daenor · #10 (**permalink**) 03/12/2008, 07:21

Gente buenas otra vez!!
Me han surgido inconvenientes al correr el siguiente script.
Sucede que cuando cargo la página, no carga los contenedores, como si quedara haciendo loop en la funcion.
http://www.testeos-pbyasoc.com.ar/ti...index.test.php

Veamos... por algunas cuestiones, y por queres usar la funcion en todos lados, cambié la funcion a algo parecido:

Código javascript:

Ver originalfunction objetus(file) {
xmlhttp=false;
this.AjaxFailedAlert = "Su navegador no soporta las funcionalidades de este sitio y podria experimentarlo de forma diferente a la que fue pensada. Por favor habilite javascript en su navegador para verlo normalmente.\n";
this.requestFile = file;
this.encodeURIString = true;
this.execute = false;
if (window.XMLHttpRequest) {
this.xmlhttp = new XMLHttpRequest();
if (this.xmlhttp.overrideMimeType) {
this.xmlhttp.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) { // IE
try {
this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try {
this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
this.xmlhttp = null;
}
}
 
if (!this.xmlhttp && typeof XMLHttpRequest!='undefined') {
this.xmlhttp = new XMLHttpRequest();
if (!this.xmlhttp){
this.failed = true;
}
}
}
return this.xmlhttp ;
}
 
function recibeid(_pagina,valorget,valorpost,capa){
ajax=objetus(_pagina);
if(valorpost!=""){
ajax.open("POST", _pagina+"?"+valorget+"&tiempo="+new Date().getTime(),true);
} else {
ajax.open("GET", _pagina+"?"+valorget+"&tiempo="+new Date().getTime(),true);
}
ajax.onreadystatechange=function() {
if (ajax.readyState==1){
document.getElementById(capa).innerHTML = "<img src='images/loading.gif' align='center'> Aguarde por favor...";
}
if (ajax.readyState==4) {
if(ajax.status==200)
{document.getElementById(capa).innerHTML = ajax.responseText;}
else if(ajax.status==404)
{
capa.innerHTML = "La direccion no existe";
}
else
{
capa.innerHTML = "Error: ".ajax.status;
}
}
}
 
if(valorpost!=""){
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send(valorpost);
} else {
ajax.send(null);
}
}

Lo llamo luego, con esta función, en el mismo <script></script> cuando carga la página:

Código javascript:

Ver original$(document).ready(function(){
    recibeid('listados/resp_tareas.php','id_responsable=<?PHP echo $id_responsable; ?>&codigo_responsable=<?PHP echo $codigo_responsable; ?>&nombre_responsable=<?PHP echo $nombre_responsable; ?>&id_tarea=<?PHP echo $id_tarea; ?>&codigo_tarea=<?PHP echo $codigo_tarea; ?>&nombre_tarea=<?PHP echo $nombre_tarea; ?>','var2=post','resp_tarea'); //Llamado A
 
    recibeid('listados/dia_listado.php','id_responsable=<?PHP echo $id_responsable; ?>&codigo_responsable=<?PHP echo $codigo_responsable; ?>&nombre_responsable=<?PHP echo $nombre_responsable; ?>&id_tarea=<?PHP echo $id_tarea; ?>&codigo_tarea=<?PHP echo $codigo_tarea; ?>&nombre_tarea=<?PHP echo $nombre_tarea; ?>&process=mostrar','var1=post','listados'); //Llamado B
});

Con la función que había citado en anteriores posts "Enviar()" funcionaba bien de esta manera. Pero ahora, o deja cargado infinitamente, o carga en ambos los mismos, dependiendo si pongo LLamado A primero o LLamado B primero. (Invierto su orden).
No conozco mucho de javascript, solo intento interpretar y utilizar. Pero esto me ha superado.

:)

Quizas puedan ayudar!
Saludos!

erlingfiallos · #11 (**permalink**) 03/12/2008, 10:26

Estas utilizando jQuery ?? porque se me hace un poco extraño que tengas que definir una funcion para hacer peticiones via ajax.. siendo que jquery ya tiene metodos para hacer tal cosa..

De todas formas puedes ver la documentacion de jQuery.. ahi hay objetos para llamar a paginas con ajax.. y obtienes metodos para las respuestas.. por ejemplo podrias utilizar:

ajaxStart( callback )
Dentro de este metodo pones el cargador..
ajaxComplete( callback )
Dentro de este metodo pones el resultado..

Se me hace que has estado escribiendo de mas.. y repitiendo algo que ya estaba implementado en tu libreria de JS

De todas formas revisate esta documentacion.. http://docs.jquery.com/Ajax

daenor · #12 (**permalink**) 03/12/2008, 10:30

Si, eso estuve pensando también estos días.
Como dije, aun no coordino con ajax, y no se cuando definir y cuando no.
Jquery lo uso además para un calendario que no está activo en el ejemplo que les envie.

Ahora reviso, pero hasta ahora, no he podido usar jquery para enviar variables php.

Mil gracias!

EDIT:
Intenté correr la función sin el jquery, y como pensé, no funciona. Recuerdo haberlo intentado antes también. Por eso lo utilizo aquí.