JQuery - Refrescar div sin refrescar la página

   
Vista:

Refrescar div sin refrescar la página

Publicado por Unexes (7 intervenciones) el 29/11/2012 00:46:53
Hola a tod@s.

Vereis no tengo idea de Jquery pero un buen compañero xve me aconsejo desde el foro de php como hacer lo que me proponia así que he empezado a hacerlo y espero vuestra ayuda, porque aunque mi voluntad es mucha estoy perdido.

Para simplificar dire que tengo una página que tiene en la parte izquierda un formulario que se utiliza para filtrar, basicamente son (selects y Checbox) y en la derecha me muestra dentro de un div los resultados que obtengo en la consulta, hasta ahora todo esta en la misma página y funciona perfectamente el problema es que cada vez que filtro me refresca la página y me produce el tipico parpadeo, por eso solo quiero refrescar el div donde muestros los resultados cada vez que filtro y para ello es por lo que os pido vuestra ayuda.
Este es el código que tengo en este momento por supuesto para hacerlo mas corto y mas visible lo he reducido y solo he dejado un select y un checkbox:
Coches.php:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<script type='text/javascript' src='jquery-1.7.1.min.js'></script>
    <style type='text/css'>
        #contenido  { position: absolute; top: 184px; left: 200px; width:765px;height: 165px;}
        .clock      {position:relative;left:50%;top:50%;width:36px;height:36px;padding:20px;}
    </style>
   </head>
<?php
		require_once('Connections/ConexionCoches.php');
		$selciudad = isset($_GET["selciudad"])? $_GET["selciudad"]: '';
        $aireacond = isset($_GET["aireacond"])? $_GET["aireacond"]: '';
?>
<body>
<div id="DivContenedor">
<div id="Fondo">
<div id="DivFiltrado">
<form name="filtrar" method="GET" action="coches.php">
<table width="192" height="30" border="0">
<tr>
<td align="center">
    <select name="selciudad" id="selciudad" class="Guias3" Onchange="cargarContenidoReloj('Pagina1.php')">
    <option value="-1" selected>&nbsp;Todas las Ciudades&nbsp;&nbsp;</option>
    <?php
    $tablaciudad = mysql_query("SELECT * FROM provincias  ORDER BY Provincia ASC");
    while ($registrociudad  = mysql_fetch_array($tablaciudad ))
        if(empty($_GET['selciudad']))
		{
		  ($_GET['selciudad'] = '-1');
		}elseif
		  ($_GET["selciudad"]==$registrociudad['Provincia'])		{
           echo "<option value='".$registrociudad['Provincia']."' selected>&nbsp;&nbsp;".$registrociudad['Provincia']."</option>";
       }else{
          echo "<option value='".$registrociudad['Provincia']."' >&nbsp;&nbsp;".$registrociudad['Provincia']."</option>";      }
    mysql_free_result($tablaciudad);
 
    ?>
</select>
</td>
</tr>
</table>
 
   <table width="184" border="0"  align="center" class="Guias3" rules="rows">
      <tr>
        <td align="left" height="22">
<?php
if (isset($_GET["aireacond"])){
    echo "<label><input type='checkbox' name='aireacond' value='1' checked onClick='cargarContenidoReloj('Pagina1.php')'/> Aireacond</label>";
}else{
    echo "<label><input type='checkbox' name='aireacond' value='1' onClick='cargarContenidoReloj('Pagina1.php')'/> Aireacond</label>";}
?>
       </td>
      </tr>
 
   </table>
</form>
</div>
    <div id='contenido'></div>
 
    <script type='text/javascript'>
    // Funcion para cargar un contenido en un div
    function cargarContenido(pagina)
    {
        // cargamos la pagina pagina.html en el div contenido
        $("#contenido").load(pagina);
    }
    // Funcion para cargar un contenido en un div mostrando un reloj de arena
    function cargarContenidoReloj(pagina)
    {
        // cargamos el icono en el div donde ira el contenido
        $("#contenido").html("<img src='clock.gif' class='clock' border='0' />");
        // cargamos la pagina pagina3.php en el div contenido
        $("#contenido").load(pagina);
    }
    </script>
</div> <!-- Cierro Fondo -->
</div><!-- Cierro DivContenido -->
</body>

y este el de mi Pagina1.php:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<?php
require_once('Connections/ConexionCoches.php');
 
// Simulamos el tiempo que puede tardar la pagina en cargarse
//sleep(5);
?>
<div id="Banner-1">
<?php
$sql = "SELECT SQL_CALC_FOUND_ROWS * FROM coches WHERE Activacion = '1'";
 
        if (isset($_GET['selciudad'])and $_GET['selciudad'] <>'-1') {
		$sql .= "AND coches.Ciudad = '$selciudad' ";
	   }else {$sql .= "AND coches.Ciudad <> '-1' ";
}
       if (isset($_GET['aireacond'])and $_GET['aireacond'] ='1') {
		$sql .= "AND coches.Aireacond = '$aireacond' ";
	   }else {$sql .= "AND (coches.Aireacond = '1' or coches.Aireacond = '0')";
}
        $sql .= 'LIMIT 0, 12' ;
 
        if (!($result = @mysql_query($sql))) {
 
            die(mysql_error()); }
		 //Recuperar el número total de registros en la tabla
        $rows = mysql_fetch_assoc(mysql_query('SELECT FOUND_ROWS() AS rows'));
 
$tabla = mysql_query($sql);
while ($registro = mysql_fetch_array($tabla)) {
		?>
 <div class="Prueba">
 <table class="MarcoFotoPrincipal" width="165" border="0">
  <tr>
          <td><a href="<?php echo $registro['Url']; ?>"><img border="0" src="<?php echo $registro['FotoPrincipal']; ?>"></a></td>
  </tr>
  </table>
<table width="165"  align="center" border="2"  bordercolor="#D6A64A">
  <tr>
    <td  align="center" class="Edad"><?php echo $registro['Edad']. "&nbsp;años&nbsp;/&nbsp;"; ?><?php echo $registro['Precio']. "&nbsp;€uros"; ?></td>
  </tr>
  <tr>
     <td  align="center" class="Ciudad"><?php echo $registro['Ciudad']; ?></td>
  </tr>
</table>
 </div>
<?php
}
mysql_free_result($tabla);
?>
 
 
</div> <!-- Cierro Banner-1-->

Bueno ahora os comento el primer problema es que al entrar en la página por primera vez el div no se rellena con todos los registros ya que en ese momento todavia no he filtrado nada, se queda vacio.
El segundo problema es que el evento Onchange del select parece que si hace algo ya que al seleccionar algo para filtrar no importa lo que seleccione me muestra todos los registros, pero por supuesto no me filtra ya que no estoy pasandole ningun valor a la variable de la consulta.
Tercero el evento onClick del checkbox no hace absolutamente nada, pero no me aparece ningún error de sintaxis.
Espero me podais ayudar, Gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

Refrescar div sin refrescar la página

Publicado por xve (557 intervenciones) el 29/11/2012 10:19:15
Hola, Unex, he probado tu código, y a mi no me refresca la pagina...

Esta publicada en la web para poder revisarla en funcionamiento?
yo he puesto unas provincias de manera manual y he comentado la linea del require.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Refrescar div sin refrescar la página

Publicado por Unexes (7 intervenciones) el 29/11/2012 22:59:45
xve me esplique mal o lo entendiste mal, voy a intentar esplicarme mejor.

Tal como esta el código ahora, que ya no esta todo en la misma página si no que como ves, esta partido en (Coches.php y Pagina1.php) ya no me refresca la página, lo que hacia al principio del otro post era exponer el problema que tenia antes de comenzar a aplicar lo de refrescar solo el div y no toda la pagina, lo hice para que los compañer@s supiesen que es lo que tenia antes y a donde queria llegar, porque antes cuando lo tenia todo en la misma pagina me la refrescaba y que era eso lo que queria evitar y por ello solicite vuestra ayuda.

Ahora que el código ya esta partido y siguiendo las pautas del link que me aconsejaste que viera de Jquery ya no me refresca la página solo el div id='contenido' que llama a Pagina1.php, esto es correcto, aparentemente funciona bien, lo que ocurre hasta donde he llegado implementado el código que vi en ese link con el código que yo tenia son los siguientes y primeros problemas que reproduzco del post anterior:

El primer problema es que al entrar en la página por primera vez el div no se rellena con todos los registros ya que en ese momento todavia no he filtrado nada, se queda vacio, deberian aparecer todos los registros sin ningún filtraje, tal como esta sencillamente no aparece nada.

El evento Onchange del select parece que si funciona ya que al seleccionar algo para filtrar (no importa lo que seleccione) me muestra todos los registros, (cosa que deberia hacer al entrar en la página por primera vez, que como he dicho anteriormente se queda vacia) por supuesto de momento no pido que me filtre ya que no estoy pasandole ningun valor a la variable de la consulta.

Y el segundo problema, el evento onClick del checkbox no hace absolutamente nada, pero no me aparece ningún error de sintaxis, posiblemente el código del evento este mal puesto.

Pense que iba a se mas facil pero me están surgiendo dificultades por mi desconocimiento del tema, espero solucionarlas una a una.

Gracias a tí y al resto, un saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Refrescar div sin refrescar la página

Publicado por xve (557 intervenciones) el 30/11/2012 07:45:37
Mil disculpas Unexes, no te entendí bien...

Bien, intento explicarte los temas que me comentas...

1.- El problema de al entrar por primera vez en la pagina.

Al no haber seleccionado nada en el select, lógicamente tienes que ejecutar la función ajax cargarContenidoReloj automáticamente una vez cargada la pagina.
Para ello, puedes utilizar la función de jquery ready(), que se ejecuta una vez cargada la pagina. Podria ser algo así:
1
2
3
$(document).ready(function(){
    cargarContenidoReloj('Pagina1.php');
});


2.- problema con el onClick

Aquí tienes un problema de sintaxis...
Tal y como tu lo tienes puesto, para el navegador queda así:
1
... onClick='cargarContenidoReloj('Pagina1.php')'/>

No puedes cargar entre comillas simples el contenido del onclick y también los valores pasados a la función cargarContenido... uno de los dos los tienes que poner con comilla doble para diferenciar.

Tu código debería de quedar algo así:
1
echo "<label><input type='checkbox' name='aireacond' value='1' onClick=\"cargarContenidoReloj('Pagina1.php')\"/> Aireacond</label>";}


Espero que te sirva... coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Refrescar div sin refrescar la página

Publicado por Unexes (7 intervenciones) el 30/11/2012 10:41:22
Gracias como siempre xve, funciona perfecto

Creo que poco a poco con tu ayuda y la de algún que otro compañero lo conseguire.

Ahora viene la parte en la cual no me entero nada, tengo que pasar las variables ( valor seleccionado del select y del checkbox ) que tengo en "Coches.php" a la consulta que tengo en "Pagina1.php. para que me filtre los registros dependiendo de lo seleccionado, he buscado en la red pero todo lo que encuentro me suena a chino, la verdad es que nunca habia utilizado el Jquery es la primera vez. los comentarios de esas páginas dicen que es supersencillo hacerlo pero yo no lo entiendo, sera que no lo esplican claramente o que yo como he dicho anteriormente no me entero.

¿Como lo hago?.

Un saludo y gracias por todo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Refrescar div sin refrescar la página

Publicado por Unexes (7 intervenciones) el 02/12/2012 21:38:58
Bueno llevo todo el fin de semana intentando hacerlo por mi cuenta y no lo consigo, he leido en la red mucho sobre pasar variables por Jquery pero no he encontrado nada que entienda lo suficiente como para implementarlo en mi código.

Encontre este código y lo implemente en mi página Coches.php despues de cerrar el </form> y antes del <div id='contenido'> pero no se si funciona y si es correcto ya que no hace aparentemente nada, supongo que tendre que modificar el código de mi página Pagina1.php pero no se como, el codigo que pongo lo saque de la red de un tutorial y veo que tiene una funcion "enviar" que por supuesto como no se lo que estoy haciendo no llamo desde ningún sitio y tambien tiene un alert que creo que en mi código no sirve , en fin que no tengo ni idea.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script language="javascript" type="text/javascript">
function enviar(){
var selciudad = $('#selciudad').val();
var aireacond = $('#aireacond').val();
 
$.ajax({
type: "GET",
data: "selciudad="+selciudad+"&aireacond="+aireacond,
url: "Pagina1.php",
success: function(respuesta){
alert (respuesta);
}
});
}

En fín necesito que me ayudeis, porque si no no voy a poder hacerlo.
Gracias a tod@s por vuestro esfuerzo.
Un saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Refrescar div sin refrescar la página

Publicado por xve (557 intervenciones) el 03/12/2012 07:29:12
Hola Unexes, desde donde llamas a la función enviar()?

Te sugiero que siempre que puedas utilices el envío por POST en vez del GET...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Refrescar div sin refrescar la página

Publicado por Unexes (7 intervenciones) el 03/12/2012 09:18:05
Hola xve, buenos días

El problema es que no la llamo de ningún sitio porque no se desde donde llamarla, ni se si ese código es correcto y hace lo que se supone que quiero hacer, que es enviar el valor de las variables a mi consulta que se encuentra en Pagina1.php, este código lo encontre en un tutorial, pero no esplicaba practicamente nada, por eso te commente que no se muy bien lo que estoy haciendo y la parte del "alert" creo que en mi código sobra.

La verdad ahora mismo estoy perdido.

Un saludo y perdona por abusar de tu confianza y de tu tiempo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar