Refrescar solo el div no la página entera

unexes · #1 (**permalink**) 27/11/2012, 17:44

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:

Código PHP:

Ver original<?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.

arianna_rr · #2 (**permalink**) 28/11/2012, 00:04

Para refrescar sólo una parte es necesario usar AJAX, te dejo este post que tiene unos links de utilidad, ahí puedes empezar a aprender.

[URL="http://www.forosdelweb.com/f127/ajax-para-principiantes-711558/"]http://www.forosdelweb.com/f127/ajax-para-principiantes-711558/[/URL]

unexes · #3 (**permalink**) 28/11/2012, 01:59

arianna_rr.

Voy a echarle un vistazo al link que me has puesto pero dudo de si sabre hacerlo solo porque de ajax no tengo ni idea, no obstante muchas gracias por tu ayuda.

Un saludo, ya te comentare algo.