PHP - Refrescar solo el Div no la página entera

   
Vista:

Refrescar solo el Div no la página entera

Publicado por Unexes (124 intervenciones) el 28/11/2012 00:45:41
Buenas a tod@s, el titulo practicamente lo dice todo.

Vereis tengo esta página que funciona perfectamente, tengo en la parte izquierda de mi página un "<div id="DivFiltrado">" que contiene un formulario para filtrar y el la parte derecha un "<div class="Contenedor"> y un <div class="Prueba">" que me muestra los registros que he filtrado, pues bien cada vez que selecciono algo en el formulario de filtrar con el evento "Onchange" se ejecuta, y me refresca toda la página mostrandome los registros que cumplen dichas condiciones, todo esto es correcto.

Lo que quiero es que solo se refresque el "<div class="Contenedor"> o el <div class="Prueba">" ( no se cual de los dos es el que se tendria que refrescar) que son los que contienen los registros filtrados y no toda la página, así evitare el tipico parpadeo cuando se refresca la página entera.
He leido varias cosas en la red pero no las he entendido, me podeis ayudar.

Este es mi código al completo:
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<?php
		require_once('Connections/ConexionCoches.php');
		$selciudad = isset($_GET["selciudad"])? $_GET["selciudad"]: '';
		$selnacionalidad = isset($_GET['selnacionalidad'])?$_GET['selnacionalidad']:'';
        $aireacond = isset($_GET["aireacond"])? $_GET["aireacond"]: '';
		$llantas = isset($_GET["llantas"])? $_GET["llantas"]: '';
 
		// Número de registros que se debe mostrar en una página?
		$records_per_page = 12;
        // Incluye la clase de paginación
        require 'Zebra_Pagination/Zebra_Pagination.php';
        // Instancia del objeto paginación
        $pagination = new Zebra_Pagination();
		// Registros por página
       $pagination->records_per_page($records_per_page);
?>
<body>
<div id="DivContenido">
<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="this.form.submit()" >
    <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="192" height="30" border="0">
  <tr>
  <td align="center">
  <select name="selnacionalidad" id="selnacionalidad" class="Guias3" onchange="this.form.submit()" >
		<option value="-1" selected>&nbsp;Nacionalidad Chicas&nbsp;</option>
<?php
	$tablanacionalidad = mysql_query("SELECT * FROM nacionalidad ORDER BY Nacionalidad ASC");
	while ($registronacionalidad = mysql_fetch_array($tablanacionalidad))
        if(empty($_GET['selnacionalidad']))		{
		  ($_GET['selnacionalidad'] = '-1');
		}elseif
		  ($_GET["selnacionalidad"]==$registronacionalidad['Nacionalidad'])		{
           echo "<option value='".$registronacionalidad['Nacionalidad']."' selected>&nbsp;&nbsp;".$registronacionalidad['Nacionalidad']."</option>";
       }else{
          echo "<option value='".$registronacionalidad['Nacionalidad']."' >&nbsp;&nbsp;".$registronacionalidad['Nacionalidad']."</option>";      }
	mysql_free_result($tablanacionalidad);
		?> 	</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='submit();'/> Aireacond</label>";
}else{
    echo "<label><input type='checkbox' name='aireacond' value='1' onClick='submit();'/> Aireacond</label>";}
?>
       </td>
      </tr>
      <tr>
        <td align="left" height="22">
<?php
if (isset($_GET["llantas"])){
    echo "<label><input type='checkbox' name='llantas' value='1' checked onClick='submit();'/> Llantas</label>";
}else{
    echo "<label><input type='checkbox' name='llantas' value='1' onClick='submit();'/> Llantas</label>";}
?>
        </td>
      </tr>
   </table>
</form>
</div> <!-- Cierre MenuLatIzq -->
<div id="Banner-1">
<div class="Contenedor">
<?php
//$sql = "SELECT SQL_CALC_FOUND_ROWS * FROM escortschicas";		
$sql = "SELECT SQL_CALC_FOUND_ROWS * FROM coches WHERE Activacion = '1'";
 
        if (isset($_GET['selnacionalidad'])and $_GET['selnacionalidad'] <>'-1') {
		$sql .= "AND coches.Nacionalidad = '$selnacionalidad' ";
	   }else {$sql .= "AND coches.Nacionalidad <> '-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')";
}
       if (isset($_GET['llantas'])and $_GET['llantas'] ='1') {
		$sql .= "AND coches.Llantas = '$llantas' ";
	   }else {$sql .= "AND (coches.Llantas = '1' or coches.Llantas = '0')";
}
        $sql .= 'LIMIT ' . (($pagination->get_page()- 1) * $records_per_page) . ', ' . 	$records_per_page . '';
   //Si la consulta no puede ser ejecutada
        if (!($result = @mysql_query($sql))) {
  // Parada de la ejecución y el mensaje de error de visualización
            die(mysql_error()); }
         //Recuperar el número total de registros en la tabla
        $rows = mysql_fetch_assoc(mysql_query('SELECT FOUND_ROWS() AS rows'));
         //Pasar el número total de registros a la clase de paginación
         $pagination->records($rows['rows']);
        //Registros por página
         $pagination->records_per_page($records_per_page);
$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);
?>
<?php echo $sql; ?>
  </div>
  </div> <!-- Cierre Banner-1 -->
<div id="Control">
		<div id="NumPaginacion">
		<?php
         // Genera los enlaces de paginación
		$pagination->render();
		?>
		</div> <!-- Cierro NumPaginacion -->
		<div id="CabPaginacion2">
  		<?php
echo "Página:  " . $pagination->get_page() . "   de   " . $pagination->_total_pages;
        ?>
		</div> <!-- Cierro CabPaginacion2 -->
 		<div id="CabPaginacion3">
  		<?php
echo "Escorts encontradas: ". $rows['rows']
 
        ?>
		</div> <!-- Cierro CabPaginacion3 -->
</div> <!-- Cierro Control -->
</div> <!-- Cierro Fondo -->
</div><!-- Cierro DivContenido -->
</body>


P.D. Para que el formulario de filtrado y la consulta fueran mas cortos he eliminado parte del código.

Un saludo y 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

Refrescar solo el Div no la página entera

Hola, para no refrescar una pantalla tendrias que usar ajax para traer las consultas de mysql.
Saludos
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 solo el Div no la página entera

Publicado por Miguel (3 intervenciones) el 28/11/2012 07:22:59
Busca información sobre la función ajax de jquery. Ten en cuenta que tu archivo .php al que llamaras con la función ajazx debera retornar un json y ya con javascript escribes ese el contenido de ese json en tu div.
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 solo el Div no la página entera

Publicado por Unexes (124 intervenciones) el 28/11/2012 09:57:00
Gracias a los dos Fernando BalderramayMiguel.

Estoy pillao porque de ajax ni idea y no creo que leyendome algun manual o mirando por la red lo pueda hacer por mi mismo en un plazo relativamente corto, no obstante estoy buscando en la red información sobre la función ajax de jquery, así que si podeis ayudarme de alguna otra manera os quedaria muy agradecido.

Espero que me podais ayudar, 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

Refrescar solo el Div no la página entera

Lamentablemente no te puedo ayudar con el codigo. Seria algo de varios dias entre pregunta y respuesta hasta terminarlo.
Te recomiendo empieces haciendo pruebas pequeñas. Una consulta con pocos campos a actualizar, sin muchas vueltas ni validaciones, para poder entender mejor el funcionamiento y luego poder adaptarlo a tu codigo.
En esta web hay foros tambien de ajax, javascript y demas para consultar. Seguramente ellos te podran dar algunas indicaciones de como comenzar haciendo las pruebas y luego ayudarte a adaptarlo al codigo.
Con buena predisposicion seguramente en unos dias lo tendras.
Espero lo puedas realizar.
Saludos
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 solo el Div no la página entera

Publicado por xve (5520 intervenciones) el 28/11/2012 13:05:53
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 solo el Div no la página entera

Publicado por Unexes (124 intervenciones) el 28/11/2012 15:06:35
xve como siempre genial, que hariamos algunos si no estuvieras tu por aqui.

En principio el enlace que has puesto al verlo me a parecido muy facil, otra cosa es implementarlo dentro de mi código, así que si te parece voy a intentarlo siempre acompañado de los consejos y los comentarios tuyos y del resto de compañeros. Porque quiero hacer el código yo, así aprendo.

Primero voy a crear una página aparte con el código que se tiene que mostrar en el div, y mi primera pregunta y unica de momento es que parte de mi código deberia ir en esa página todo el contenido de mi "<div class="Contenedor"> o solo el contenido de mi <div class="Prueba, por supuesto en la página "coches.php" incluire la function "cargarContenido(pagina), he visto que esta funcion esta entre <body>y</body> supongo que funcionara igual entre los <head>>/head>, ¿Sera cuestion de probar?.

En fin gracias de nuevo y comentame mi pregunta.

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 solo el Div no la página entera

Publicado por xve (5520 intervenciones) el 28/11/2012 15:51:38
Gracias por tus comentarios... me alegra que te sirva, y que quieras aprenderlo tu mismo...

sobre tu pregunta, no te entiendo mucho... El contenido que tienes que poner en la pagina php que cargaras desde el ajax, sera lo que tu quieras que se modifique... es decir si pone todo el código de Contenedor, sera lo que te reemplazara en la pagina...

Perdona, pero no he entendido muy bien...
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 solo el Div no la página entera

Publicado por Unexes (124 intervenciones) el 28/11/2012 19:21:09
Perdona, despues de decidir coger el toro por los cuernos lo siento me esplique mal.

Lo de aprender es porque algunos ya sabeis que el ajax y yo estamos peleados porque se me atraganta, pero el saber me apasiona, lo que ocurre es que me hace maldita la gracia tener que aprender un lenguaje nuevo a mi edad, así que recurro a vosotros para con vuestra ayuda y mis ganas de hacer las cosas las pueda llevar a buen termino.

Dicho lo anterior vamos a ello, veras dentro de <div class="Contenedor"> se encuentra la parte correspondiente a la consulta y al mismo tiempo se encuentra dentro del mismo el <div class="Prueba>que contiene el resultado de esa consulta, algo así:
1
2
3
4
5
6
<div class=Contenedor>
//Aqui esta la consulta
<div class="Prueba">
//Aqui muestra el resultado de la consulta
</div> // Aqui cierro el div class="Prueba"
</div> // Aqui cierro el div class="Contenedor"

Ver código principio post:
La pregunta es, la parte correspondiente a la consulta <div class="Contenedor"> crees que debe seguir en coches.php que es la página que contiene el formulario de filtrado y no se refresca o la consulta tambien tiene que estar en la página que recarga el div.

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

Refrescar solo el Div no la página entera

Publicado por Unexes (124 intervenciones) el 29/11/2012 00:21:05
xve como creo que lo voy a poder hacer con vuestra ayuda con Jquery y creo que este post no esta en el foro adecuado voy a darlo por cerrado aqui, y seguire planteando los problemas que me surjan en el foro de Jquery.
Con respecto a la pregunta anterior ya lo tengo resuelto tengo que pasar la consulta y el resultado de la consulta ambas cosas, de momento funciona mal pero ya veo algo, y a partir de aqui ya ire resolviendo los problemas uno a uno.

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 solo el Div no la página entera

Publicado por xve (5520 intervenciones) el 29/11/2012 08:19:14
Perfecto!!!... también sigo el foro de jquery... cualquier cosa te voy ayudando!!!
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