actualizar una parte de la pagina

wendyl · #1 (**permalink**) 06/08/2012, 07:06

Hola a todos lo que pasa es que tengo un problema en mi pagina y no se como solucionarlo, tengo que actualizar solo una parte de mi pagina web por que tengo q mostrar una grafica y como mi pagina se actualiza cada segundo entonces la grafica tambien me vuelve a cargar cada segundo y quiero que se quede quieta aca les dejo mi codigo espero me puedan ayudar

Código HTML:

<html>
<head>
<meta http-equiv="refresh" content="60">
	<title>Tabla Mes</title>
	<script>
		/*
* Parametros mandatorios
*/
   var seconds = 1; // el tiempo en que se refresca
	var divid = "tabla"; // el div que quieres actualizar!
	var nocacheurl = 'tabla_mes_mccf.php';
	
	//var url = "tiempo.php"; // el archivo que ira en el div

	function refreshdiv(){

		// 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));
		

		// The code...

		xmlHttp.onreadystatechange=function(){
			if(xmlHttp.readyState== 4 && xmlHttp.readyState != null){
				document.getElementById(divid).innerHTML=xmlHttp.responseText;
				setTimeout('refreshdiv()',seconds*1000);
			}
		}
		xmlHttp.open("GET",nocacheurl,true);
		xmlHttp.send(null);
	}

	// Empieza la función de refrescar

	window.onload = function(){
		refreshdiv(); // corremos inmediatamente la funcion
	}
	
	function Datos(){
		//var alerta= "";
		//confirm(alerta );
		nocacheurl='tabla_mes_datos.php';
	}
	
	function Voz(){
		//var alerta= "";
		//alert(alerta);
		nocacheurl = 'tabla_mes_voz.php';
	}
	function Mintic(){
		//var alerta= "";
		//alert(alerta);
		nocacheurl = 'tabla_mes_mintic.php';
	}
	function MCF(){
		//var alerta= "";
		//alert(alerta);
		nocacheurl = 'tabla_mes_mccf.php';
	}

	
</script>	
<style type="text/css">

.estilo1 {
font-family: Trebuchet MS;
font-size: 20px;
color: #000000;
font-weight: bold;
}
</style>
<script>

</script>

</head>
<body >
<!--alerta.gif -->	
	<?php
	
		$botones='
		<div id="Principal" align="center">
		<button id="MCF" onclick="MCF()" class="tabla1"> MCCF </button>
		<button id="Voz" onclick="Voz()" class="tabla1"> Voz </button>
		<button id="Datos" onclick="Datos()" class="tabla1"> Datos </button>
		<button id="Mintic" onclick="Mintic()" class="tabla1"> Mintic </button>
		<br></br><img src="images/informe.jpg" width="280" height="90" align="center">
		</div>';
		echo $botones;
		
		echo '<div id="tabla">' ;
		echo "</div>";
		
		/*alertas <img src="images/informe.jpg" width="280" height="250" align="left">
		Hay una llamada en cola superior a un min
		Hay mas de 2 llamadas en cola
		No hay agentes disponibles
		no hay ningu agente logueado
		
		*/
		/*botones que se quitan provisionalmente
		<button id="SoporteOS" onclick="SoporteOS()" class="tabla1"> Soporte o/s </button>
		<button id="InfoTicket" onclick="InfoTicket()" class="tabla1"> Info Ticket </button>
		<button id="ActualizarInfo(" onclick="ActualizarInfo()" class="estilo3"> AIC </button>
		*/
		
	?>
	

</body>
</html>

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//ES" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ES">
<head>
<meta http-equiv="refresh" content="60">
	<title>Actualizador BD</title>
	
<style type="text/css">
.bloque {
align: center;
font-family: Trebuchet MS;
float: center;
background-color: #FFFFFF;
font-size: 27px;
width: 100px;
height: 30px;
text-align: center;
font-weight: bold;
background-image: url(images/naranja.JPG);
color: #FFFFFF;
}
.bloque1 {
align: center;
font-family: Trebuchet MS;
float:  center;
background-color: #FFFFFF;
font-weight: bold;
font-size: 20px;
width: 100px;
height: 35px;
text-align: center;
background-image: url(images/naranja2.JPG);
}
.bloque2 {
align: center;
font-family: Trebuchet MS;
float: left;
background-color: #FFFFFF;
font-size: 25px;
width: 200px;
height: 30px;
text-align: center;
font-weight: bold;
background-image: url(images/naranja.JPG);
color: #FFFFFF;
}
.bloque3 {
align: center;
font-family: Trebuchet MS;
float: left;
background-color: #FFFFFF;
font-size: 30px;
width: 2299px;
height: 30px;
text-align: center;
font-weight: bold;
background-image: url(images/naranja.JPG);
color: #FFFFFF;
}
.estilo1 {
font-family: Trebuchet MS;
font-size: 23px;
color: #000000;
font-weight: bold;
}
.tabla1 {
font-family: Trebuchet MS;
font-size:30px;
font-weight:bold;
text-align: center;
width: 185px;
background-color: #DF0101;
color: #FFFFFF
}
.tabla2 {
font-family: Trebuchet MS;
font-size:30px;
font-weight:bold;
text-align: center;
width: 399px;
background-color: #DF0101;
color: #FFFFFF
}
 .tabla {
 float:  Left;
 font-family: Trebuchet MS;
font-size:27px;
font-weight:bold;
text-align: center;
width: 459px;
background-color: #FFFFFF;
color: #000000
}
 .tabla3 {
 float:  center;
 font-family: Trebuchet MS;
font-size:27px;
font-weight:bold;
text-align: left;
width: 459px;
background-color: #FFFFFF;
color: #000000
}
</style>
</head>
<body>
<div class="tabla">
<br>
<?php
include("conexion.php");

$link= conexion();

		echo "<table border='1' align='left'>";
		echo "<tr><td class='bloque2'>HORA  ";
		echo date("h:i:s" ,time());
		echo "</td></tr></table>";
		echo "<br>";
	echo '<p><a href="index.php"><img src="images/back.gif"  align="left" /></a></p>';echo "<br>";echo "<br>";
	

		echo "<table border='1' align='left' >";
	
	$date = date("m" ,time());

		echo "<tr><td class='bloque3'>Consolidado Mes $date Skill MCCF</td></tr> "; 
		echo "</table>";	
		
		
?>


<table  cellspacing="2" summary="Accesos General" border="1" align="center" class="tabla" >
<tr>

<td bgcolor='#FA5858' class="bloque">Fecha</td>
<td bgcolor='#FA5858' class="bloque">Total llamadas</td>
<td bgcolor='#FA5858' class="bloque">Llamadas contestadas</td>
<td bgcolor='#FA5858' class="bloque">Llamadas abandonadas</td>
<td bgcolor='#FA5858' class="bloque">Promedio contestar</td>
<td bgcolor='#FA5858' class="bloque">Porcentaje abandono</td>
<td bgcolor='#FA5858' class="bloque">Nivel_servicio</td>
<!--<td bgcolor='#FA5858' class="bloque">Promedio abandono</td>
<td bgcolor='#FA5858' class="bloque">Promedio duracion</td>
<td bgcolor='#FA5858' class="bloque">Total tiempo otros_estados</td>
<td bgcolor='#FA5858' class="bloque">Promedio agentes</td>-->

</div>
<br>

<tr>		
<!--MCCF-->
<?
include("FusionCharts.php");
$sql=mysql_query("select Dia,Total_llamadas,Promedio_respuesta,Total_abandonadas,Promedio_abandono,Promedio_duracion,Total_otro_estado,Promedio_agentes,Nivel_servicio 
		from resumen_mccf ")or die ("problemas en el select".mysql_error());
		while($row=mysql_fetch_array($sql))
		{
			$Diamc=$row['Dia'];
			$Total_llamadasmc=$row['Total_llamadas'];
			$Promedio_respuestamc=$row['Promedio_respuesta'];
			$Total_abandonadasmc=$row['Total_abandonadas'];
			$Promedio_abandonomc=$row['Promedio_abandono'];
			$Promedio_duracionmc=$row['Promedio_duracion'];
			$Total_otro_estadomc=$row['Total_otro_estado'];
			$Promedio_agentesmc=$row['Promedio_agentes'];
			$Nivel_serviciomc=$row['Nivel_servicio'];
	
		
		
		if ($Diamc>=8){
		
		$Totalmc=($Total_abandonadasmc+$Total_llamadasmc);		
		$porcentajemc=($Total_abandonadasmc*100);
		$porcentajemc1=($porcentajemc/$Totalmc);
		$porcentaje_nuevomc =substr($porcentajemc1, 0,4);
echo "<tr><td bgcolor='#FA5858' class='bloque1'>$Diamc</td>";
echo "<td bgcolor='#FA5858' class='bloque1'>$Totalmc</td>";
echo "<td bgcolor='#FA5858' class='bloque1'>$Total_llamadasmc</td>";
echo "<td bgcolor='#FA5858' class='bloque1'>$Total_abandonadasmc</td>";
echo "<td bgcolor='#FA5858' class='bloque1'>$Promedio_respuestamc Seg</td>";
echo "<td bgcolor='#FA5858' class='bloque1'>$porcentaje_nuevomc%</td>";
echo "<td bgcolor='#FA5858' class='bloque1'>$Nivel_serviciomc%</td></tr>";
/*echo "<td bgcolor='#FA5858' class='bloque1'>$Promedio_abandonomc</td>";
echo "<td bgcolor='#FA5858' class='bloque1'>$Promedio_duracionmc</td>";
echo "<td bgcolor='#FA5858' class='bloque1'>$Total_otro_estadomc</td>";
echo "<td bgcolor='#FA5858' class='bloque1'>$Promedio_agentesmc</td>";*/



//echo $Diamc;}





}
}




?>
</table>	

<div class="segundo">	
<?

$strXML = "" ;
$strXML = "<chart caption = 'Consolidado Mes ".$Diamc."' bgColor='#A9E2F3, #FFFFFF' baseFontSize='12' showValues='1' >";
 
 
$strXML .= "<set label = 'Porcentaje abandono' value ='".$porcentaje_nuevomc."' color = '#FF0000'/>";  
$strXML .= "<set label = 'Nivel_servicio' value ='".$Nivel_serviciomc."' color = '#0040FF'/>"; 
$strXML .= "</chart>";//00BFFF
echo renderChartHTML("swf_charts/Column3D.swf", "", $strXML, "myNext", 800, 450, false);
?>
</div>

</body>
</html>

Tengo la grafica en un div aparte

ILuzbel · #2 (**permalink**) 06/08/2012, 07:11

te aconsejo que uses la librería jquery para realizar consultas con ajax, es mucho mas simple.

wendyl · #3 (**permalink**) 06/08/2012, 07:22

Cita:

Iniciado por ILuzbel

te aconsejo que uses la librería jquery para realizar consultas con ajax, es mucho mas simple.

No me puedes dar un ejemplo chiquito la verdad no se como usarlo Gracias

ILuzbel · #4 (**permalink**) 06/08/2012, 07:51

bueno primero si se actualiza cada segundo se gastaría muchos recursos, creo que seria mejor que pongas un botón para que la persona actualice los resultados si quiere y vos podrías hacer que automáticamente lo haga después de un tot de minutos. De esta forma se gastaría menos recursos.

Ahora un ejemplo simple para recargar la pagina seria este:

Código Javascript:

Ver originalfunction recargar (){
    $.ajax({
        type: 'POST',
        url: url_archivo_php,
        data: datos_que_envias,
        beforeSend: function(){
                //mensaje cargando...
        }
        success: function(r){
            //imprimir el resultado en el bloque deseado
        }
    });
}

ahora llenas el código que te pase con tus datos y haces los condicionales para ejecutar la función.
Para enviar los datos desde php tienes que imprimirlos en una variable. ej. "echo $resultado;"

Saludos...