Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] PHP y innerHTML en javascript

Estas en el tema de PHP y innerHTML en javascript en el foro de Javascript en Foros del Web. Hola! La situación es la siguiente, tengo un PHP + CSS/HTML con el siguiente contenido archivo.php Código PHP : Código PHP: <em class="value100"></em>                      <?                      ...
  #1 (permalink)  
Antiguo 21/08/2014, 11:13
 
Fecha de Ingreso: julio-2013
Mensajes: 4
Antigüedad: 10 años, 9 meses
Puntos: 0
Pregunta PHP y innerHTML en javascript

Hola!

La situación es la siguiente, tengo un PHP + CSS/HTML con el siguiente contenido
archivo.php
Código PHP :
Código PHP:
<em class="value100"></em>
                    <?
                    
include("../conn.php");
               include(
"../lunes.php");
   
$sql "Select count(*) as encuestas FROM frecuencia WHERE sucursal ='YAX' AND fecha >='$ayer' AND fecha <='$futuro'";
   
$qry mysql_query($sql);
   
$infomysql_fetch_array($qry);
   
$encuestasyax $info["encuestas"];
   echo 
"<span>".$encuestasyax."</span>";
               
?>
Donde tengo 12 archivos php como este pero con consultas distintas, que se imprimen en index.php donde se imprimen correctamente en su div respectivo pero quiero usar AJAX para hacer que se actualice, pero solo logro que me actualice un solo div, cuando quiero que lo haga a los 12 el archivo ajax.js completo es el siguiente:

Código Javascript :
Código:
 var seconds = 4; // intervalo de actualizar div
 //1
     var divid = "1"; // el div que quieres actualizar!
     var url = "cuadros/1.php"; // el archivo de proceso php
 
 //2
     var divid2 = "2"; // el div que quieres actualizar!
     var url2 = "cuadros/2.php"; // el archivo de proceso php
 
 //3
     var divid3 = "3"; // el div que quieres actualizar!
     var url3 = "cuadros/3.php"; // el archivo de proceso php
 
 //4
     var divid4 = "4"; // el div que quieres actualizar!
     var url4 = "cuadros/4.php"; // el archivo de proceso php

// aqui van los 8 restantes de la misma manera progresiva hasta div con id 12
  
     function objetoajax1(){
  
         // El XMLHttpRequest object
  
         var xmlHttp;
         try{
             xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
         }
         catch (e){
             try{
                 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
             }
             catch (e){
                 try{
                     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                 }
                 catch (e){
                     alert("Tu explorador no soporta AJAX, wey!.");
                     return false;
                 }
             }
         }
         // IE crash
         var timestamp = parseInt(new Date().getTime().toString().substring(0, 10));
         var procesourl = url+"?t="+timestamp;

  
         xmlHttp.onreadystatechange=function(){
             if(xmlHttp.readyState== 4 && xmlHttp.readyState != null){

  
         // Este es el codigo que les pedía para unir aquí y me actualice tooodos los divs con su archivo php correspondiente
                 document.getElementById(divid).innerHTML=xmlHttp.responseText;
            // Me actualiza el primero pero como puedo agregar los otros 12
// Por eso quería una manera de agregar los 11 restante a este bucle, pero no se como.
                 setTimeout('objetoajax1()',seconds*1000);
             }
         }
         xmlHttp.open("GET",procesourl,true);
         xmlHttp.send(null);
     }
   
     window.onload = function(){
         objetoajax1(); // Ejecutamos objetoajax
      }
Espero puedan ayudarme!!! Muchas gracias!
  #2 (permalink)  
Antiguo 21/08/2014, 12:04
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: PHP y innerHTML en javascript

Te va a tocar realizar una petición asíncrona por cada <div> y URL que tengas.

Código Javascript:
Ver original
  1. var datos = [
  2.         {divid: 1, url: "pagina1.html"},
  3.         {divid: 2, url: "pagina2.html"},
  4.         {divid: 3, url: "pagina3.html"},
  5.         {divid: 4, url: "pagina4.html"}
  6.     ],
  7.     total = datos.length;
  8.  
  9. for (var i = 0; i < total; i++){
  10.     objetoajax1(datos[i].divid, datos[i].url);
  11. }

Y en la función objetoajax1, recibes a los parámetros enviados y los reemplazas en donde deben de ir la URL de la página y el id del <div>.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #3 (permalink)  
Antiguo 21/08/2014, 13:38
 
Fecha de Ingreso: julio-2013
Mensajes: 4
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: PHP y innerHTML en javascript

Muchas gracias Alexis88

Código HTML:
 var seconds = 4; // intervalo de actualizar div

  
  //aca nomas va el codigo
  var datos = [
        {divid: 1, url: "cuadros/1.php"}, 
        {divid: 2, url: "cuadros/2.php"}
    ],
    total = datos.length;
  //aca no mas

   for (var i = 0; i < total; i++){
    objetoajax1(datos[i].divid, datos[i].url);
     function objetoajax1(divid, url){
  
         // The XMLHttpRequest object
  
         var xmlHttp;
         try{
             xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
         }
         catch (e){
             try{
                 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
             }
             catch (e){
                 try{
                     xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                 }
                 catch (e){
                     alert("Tu explorador no soporta AJAX.");
                     return false;
                 }
             }
         }
  
         // Timestamp for preventing IE caching the GET request
         var timestamp = parseInt(new Date().getTime().toString().substring(0, 10));
         var procesourl = url+"?t="+timestamp;
  
         // The code...
  
         xmlHttp.onreadystatechange=function(){
             if(xmlHttp.readyState== 4 && xmlHttp.readyState != null){
                 document.getElementById(divid).innerHTML=xmlHttp.responseText;
				// document.getElementById(divid2).innerHTML= url2;
                 setTimeout('objetoajax1()',seconds*1000);
             }
         }
         xmlHttp.open("GET",procesourl,true);
         xmlHttp.send(null);
     }
	   if(i == 3){
	  var i = 0;
  }
   }
     window.onload = function(){
         objetoajax1(); // Ejecutamos objetoajax
      }
Me carga los dos pero ya no actualiza continuamente los divs!!! =(

  #4 (permalink)  
Antiguo 21/08/2014, 14:26
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: PHP y innerHTML en javascript

Eso sucede porque ejecutas el bucle for una sola vez, además, estoy viendo que al cargar la página, ejecutas la función, pero también lo haces dentro del bucle y lo que es peor, creas y ejecutas a la función en cada iteración del bucle.

Deberías de tener el código de esta manera:

Código Javascript:
Ver original
  1. var datos = [
  2.         {divid: 1, url: "cuadros/1.php"},
  3.         {divid: 2, url: "cuadros/2.php"}
  4.     ],
  5.     total = datos.length;
  6.  
  7. function objetoajax1(divid, url){
  8.     var xmlHttp,
  9.         timestamp,
  10.         procesourl,
  11.         i;
  12.  
  13.     try{
  14.         xmlHttp = new XMLHttpRequest();
  15.     }
  16.     catch (e){
  17.         try{
  18.             xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  19.         }
  20.         catch (e){
  21.             try{
  22.                 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  23.             }
  24.             catch (e){
  25.                 alert("Tu explorador no soporta AJAX.");
  26.                 return false;
  27.             }
  28.         }
  29.     }
  30.  
  31.     timestamp = parseInt(new Date().getTime().toString().substring(0, 10));
  32.     procesourl = url + "?t=" + timestamp;
  33.  
  34.     xmlHttp.onreadystatechange = function(){
  35.         if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
  36.             document.getElementById(divid).innerHTML = xmlHttp.responseText;
  37.         }
  38.     }
  39.     xmlHttp.open("GET", procesourl, true);
  40.     xmlHttp.send(null);
  41. }
  42.  
  43. setInterval(function(){
  44.     for (i = 0; i < total; i++){
  45.         objetoajax1(datos[i].divid, datos[i].url);
  46.     }
  47. }, 4000);

De este modo, ejecutarás la actualización de todos los <div> cada cuatro segundos, aunque te advierto que de esta manera, solo lograrás sobrecargar al servidor de peticiones. Te recomiendo leer acerca de WebSockets.

Algunos enlaces de interés:

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Última edición por Alexis88; 21/08/2014 a las 14:33 Razón: Pequeña mejora
  #5 (permalink)  
Antiguo 21/08/2014, 16:05
 
Fecha de Ingreso: julio-2013
Mensajes: 4
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: PHP y innerHTML en javascript

Muchas gracias por esta excelente explicación, ya estoy leyendo acerca de lo que comentas, te lo agradezco mucho, todo va excelente!!

Etiquetas: ajax, html, innerhtml, js, php, select
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 22:24.