Depurar código en divs

0le0 · #1 (**permalink**) 04/03/2009, 18:40

Como se puede depurar el código que aparece en los divs donde a través de ajax es donde se carga el contenido de la página pues a veces estoy trabajando así pero no puedo ver nada

Así es defino los divs donde se debe cargar el nuevo contenido:

Código:

div id='ajaxDiv'></div>

GatorV · #2 (**permalink**) 04/03/2009, 19:08

Puedes hacer un alert de document.getElementById('ajaxDiv').innerHTML y con eso ver el codigo que tiene.

Saludos

0le0 · #3 (**permalink**) 04/03/2009, 21:07

Pero no se puede ver que al momento de ver código fuente en mi navegador este escrito ahí , para ver todo en un solo archivo???

GatorV · #4 (**permalink**) 04/03/2009, 22:13

Depende, si usas un explorador como Firefox, puedes instalar el Web Developer Toolbar que te deja ver eso.

Saludos

lemattma · #5 (**permalink**) 04/03/2009, 22:27

Amigo, porfavor use FireBug para FF, es completisimo puedes te muestra los request con sus parametros respuestas, puedes depurar CSS al vuelo sin tener que recargar la pagina.. puedes recorrer el DOM de tu pagina y ver los atributos editarlos, cambiar estilos todo al vuelo tambien.. en fin pruebalo, no te arrepentiras! jeje

Cualquier cosa me preguntas.

0le0 · #6 (**permalink**) 05/03/2009, 09:39

El Firebug ya lo tengo instalado pero aún no lo se usar bien pero como puedo ver que hay dentro de los divs....
Algún manual?

lemattma · #7 (**permalink**) 05/03/2009, 11:26

Si tu haces click derecho en tu pagina en el menu contextual sale Inspect Element ahi se abrira el firebug y podras ver el DOM.. es bien intuitivo, de hecho no se de algun manual para esto, yo lo descubri solo..

Saludos

0le0 · #8 (**permalink**) 05/03/2009, 17:35

Este es el código en donde quiero ver que me aparece dentro del div..

Código:

<!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=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<script language="javascript" type="text/javascript" src="ajax.js"></script>
</head>

<body>
<? if(!isset($_GET['entidad']) )
{
	$fE='todo';
}
else
$fE=$_GET['entidad'];
 

?>
<table align="center">
<form>
<tr>
	<td>Seleccionar entidad</td>
    <td><select id="entidad" name="entidad" size="1" onchange="ajaxFunction()">
    		<option value="todo"<? if ($fE=="todo") echo "selected=\"selected\""; ?>> Toda</option>
        <option value="01" <? if ($fE=="01") echo "selected=\"selected\""; ?> 
        <option value="31" <? if ($fE=="31") echo "selected=\"selected\""; ?> >Y</option>
        <option value="32" <? if ($fE=="32") echo "selected=\"selected\""; ?>>Z</option>
	</select> 
    
    </td>
    <td>Filtrar Programa</td>
    <td><select id="programa" name="programa" size="1">
    	<option value="0">Todo</option>
        <option value="1">CONAFE</option>
        <option value="2">MEE</option>
        <option value="3">INIFED</option>
    </select>
    </td>
</tr>

	<tr><td></td>
    <td>
yo quiero ver lo que se genera aquí al ver el código fuente , pero no me aparece
    <div id='ajaxDiv'></div>
</td>
</tr>
<tr><td><input type="submit" /></td></tr>
</form>
</table>
</body>
</html>

Este es el archivo ajax

Código:

// JavaScript Document
function ajaxFunction(){
	
	var ajaxRequest;  // magic variable
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	
	// Receive Data Function 
	ajaxRequest.onreadystatechange = function(){
		
		if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxDiv');
			ajaxDisplay.innerHTML = ajaxRequest.responseText;
		}
		
	}
	
	var make = document.getElementById('entidad').value;
	
	var queryString = "?entidad=" + make;
	ajaxRequest.open("GET", "genMun.php" + queryString, true);
	ajaxRequest.send(null); 
}

Y este el archivo genMun

Código PHP:

  <?php

require_once("../comun/conexion.php"); // database connection

 
    // Retrieve data from Query String

$make = $_GET['entidad'];

 
    //build query

 
$query = "SELECT mun,nom_mun FROM inm WHERE entidad = '$make' group by nom_mun";

$result     = @mysql_query($query); 

$rowEstados     = mysql_fetch_array($result);

 
/////////////////////////////////////////////////

if($make == 'todo')

echo "<td style=\"display:none\"></td>";

 
else

{

    //Build Result String

$dropdown = "<select name=\"municipio\">";

$dropdown .= "<option value=\"\">Seleccione Municipio</option>";

 
 
    // Insert a new row in the table for each person returned

do {

    

$dropdown .= "<option value=".$rowEstados['municipio'].">".$rowEstados['nom_mun']."</option>";

    

}while ($rowEstados = mysql_fetch_array($result));

 
$dropdown .= "</select>";

 
 
echo $dropdown;

}

mysql_free_result($result);

require_once("../comun/cerrarbd.php");

?>

Otra cosa que vi es que si mando el formulario me aparecen todas las variables de mi formulario menos la de municipio que es la que se carga al seleccioanr un estado.
Esto funciona correctamente en ie7 pero en firefox no me pone el valor de municipio.
Se puede hacer algo??

Solid · #9 (**permalink**) 07/03/2009, 08:46

No termino de entender que es lo que querés lograr, pero...

Si vos estás queriendo actualizar un DIV usando AJAX, entonces primero corregí el HTML que trae el AJAX ya que el mismo tiene cabeceras DOC-TYPE y demás, osea, basicamente es un HTML completo, mientras que siendo que ese código lo querés insertar en un DIV en una estructura de documento ya existente, no debería contener nada de ese tipo, solo "los contenidos propiamente dichos".

Además, ya que vos estás recibiendo HTML válido, si lo asignás a la propiedad innerHTML de cualquier elemento contenedor, lo que va a suceder es que va a meterle adentro el HTML crudo y luego lo va a evaluar y presentar el HTML resultante, no el texto del código fuente de ese HTML.

Para mostrar el texto primero tendrías que escapar todos los símbolos de apertura y cerrado de tags (< >) y con eso ya debería alcanzar.

Ahora bien, si no es una cuestión de aplicación sino que simplemente querés presentar el resultado del AJAX en ese DIV por una cuestión de práctica, debug, etc etc etc, entonces lo mejor que podés hacer es instalarte la extensión FireBug para FireFox.

Fijate primero que esté activada para el dominio actual y vas a ver que por cada AJAX que haces te incluye la llamada en la consola. Cada llamada puede desplegarse para mostrar más info en 3 tabs, cabecera, envío y recepción, donde, SIEMPRE, estará el texto crudo que se recibe de dicha llamada.

jempmx28 · #10 (**permalink**) 11/03/2009, 16:27

Ajax solo te muestra cierta informacion en una capa. Ya sea Informacion de Base de datos o codigo html. Y no toda una paguina completa.

Saludos.!