No recargar toda la página al consultar una bd con Ajax

[salvador86]

Hola, a groso modo explico mi problema tengo un formulario que consta de una lista o combo con unos datos y segun los datos q se seleccione debajo se imprime una tabla de 4 columnas x 3 filas o en algunos casos de 2 x 3 para esto me vali de php y mysql pues la lista se llena de una base de datos y los datos igual, mi formulario ya esta ok funcionando como deseo, el problema es que cada vez que se imprime los datos se recarga toda la página, y en eso me enfoco, como evitar que recargue toda la pagina cada vez que haga una consulta a la base de datos, me han dicho y he buscado información que lo puedo hacer en ajax pero no he encontrado la instrucción precisa, los ejemplos que he encontrado solo me dicen como llamar a otra trozo de pagina, tal como llamaría a una página con un iframe. me prodrian ayudarme como lo puedo hacer, necesito algunos pasos y concejos yo estoy dispuesto a buscar mas información. Este es mi seudocódigo de mi formulario.

Código PHP:

  <?php
$id_padre=$_POST['id_padre'];
echo " <form action=\"".$_SERVER['PHP_SELF']."\" method=\"POST\">\n\n";
$SQLconsulta_padre="SELECT * FROM tabla_salidas WHERE des_tour ='$des_tour' AND DATE(date_fecha)>=CURDATE();";
$consulta_padre = mysql_query($SQLconsulta_padre,$conexion) or die(mysql_error());
 
//Esto llena mi lista que permitira que segun el valor seleccionado cambie los datos de una tabla que se creará debajo de la list        
While($registro_padre=mysql_fetch_assoc($consulta_padre)){
    if ($id_padre == $registro_padre['id_salidas']){
     echo "<option value=\"".$registro_padre['id_salidas']."\" selected>".$registro_padre['des_fecha']."</option>\n";
    } else {
     echo "<option value=\"".$registro_padre['id_salidas']."\">".$registro_padre['des_fecha']."</option>\n";
    }
}
// la opción de la lista determina los datos a mostrar de una tabla hija 
if (!empty($id_padre)){
    $SQLconsulta_hija="SELECT * FROM tabla_datos WHERE id_salidas='$id_padre'";
    $consulta_hija = mysql_query($SQLconsulta_hija,$conexion) or die(mysql_error());
    if (mysql_num_rows($consulta_hija) != 0){
        While ($registro_hija=mysql_fetch_assoc($consulta_hija)){
            //si hay datos los mostrara en una tabla
            echo "tabla con datos"
        }
    }else{
            //si no datos mustra la tabla vacia
            echo "tabla vacia"
        }
} else {
  //en caso de lo contratio mostrara tambien la tabla vacia
    echo "tabla vacia"
}    
echo'</form>';
?>   

y este es mi formulario en si que ya funciona recargandose toda la página (Es el formulario de colo morado) http://www.peru-expeditions.com/Peru...g_4x4-5-10.php

[Absalon]

veamos. la forma más rapida y simple que se me ocurre es la siguiente, usando jquery.

- obtienes todos los valores de los campos:

Código:

  formData = $("#id_del_formulario").serialize()

- ahora, en el evento submit del formulario, agregas la peticion ajax y cancelas el evento sumit para que no recargue la pagina.

Código:

   $('#id_del_formulario').submit(function() {
          
          $.post(
              URL_DEL_FORM,  
              formData, 
              function(data){
                  // esta parte es un poco sucia.               
                  // como la peticion devuelte otra vez TODA la pagina, es
                  // necesario extraer el formulario nuevo que se genero    
                  nuevoForm = jQuery.("<div />").append(data).find('#id_del_formulario');

                  $('#id_del_formulario').replaceWith(nuevoForm);                  

              },"html"
          );

          return false;
   });

y de esta forma no tendrias que cambiar nada en tu php y solo agregar el codigo javascript.

ojala funcione

[salvador86]

Gracias Absalon por ayudarme lo probare inmediatamente y te cuaento como me va

[salvador86]

Hola Absalon este es mi enlace donde se muestra mi formulario, es de color morado http://www.peru-expeditions.com/Peru...g_4x4-5-10.php y he probado el código jquery de este manera ya que mi formulario le llame "precios"

Código PHP:

  <script type="text/javascript">
var formData = $("#precios").serialize();
$('#precios').submit(function() {
          $.post(
              "http://www.peru-expeditions.com/Peru-Expeditions-4x4/c-pg_4x4-5-10.php",  
              formData, 
              function(data){   
                  nuevoForm = jQuery.("<div />").append(data).find('#precios');
 
                  $('#precios').replaceWith(nuevoForm);                  
 
              },"html"
          );
 
          return false;
   });
</script> 
  

llame a un jquery que tenia en mi libreria, pero mi consulta es si tengo que bajar una versión en especial porque el que tengo es jQuery 1.0.3 y este código lo coloque en dentro de head, si he pasado por alto algo espero tu gran ayuda muchas gracias pues no hay cambio aún.

[catpaw]

Iniciado por Absalon

- ahora, en el evento submit del formulario, agregas la peticion ajax y cancelas el evento sumit para que no recargue la pagina.

Hola disculpen, tengo un problema que probablemente pueda solucionar con este ejemplo, pero mis pocos conocimientos de ajax no me permiten estructurar bien el codigo y la verdad ando un poco desesperada ya que e buscado muchos ejemplos y no atino a ponerlos en forma, se que igual lo que necesito tambien no es facil, pero imagino que debe ser algo que ya se haya resuelto antes...

Bueno mi pregunta es donde pones la funcion ajax, para que intercepte el submit?? y otra... si en mi formulario tengo un arreglo de checkbox, como hago para que en mi pagina php sepa los valores de estos y pueda actulizar a la bd???

[salvador86]

Hola Catpaw bueno lamentablemente no te puedo ayudar, no deseo que que se cambie de tema pues aún no he resuelto con la recargada de mi formulario que no deseo, gracias, este Absalon habra algo que pase por alto en mi código pues no me esta resultando muchas gracias.

[Absalon]

llame a un jquery que tenia en mi libreria, pero mi consulta es si tengo que bajar una versión en especial porque el que tengo es jQuery 1.0.3 y este código lo coloque en dentro de head, si he pasado por alto algo espero tu gran ayuda muchas gracias pues no hay cambio aún.

yo lo use con la ultima version de jquery (v1.4.2) y no tengo idea si las funciones serán compatibles con la version que mencionas. prueba!

Bueno mi pregunta es donde pones la funcion ajax, para que intercepte el submit?? y otra... si en mi formulario tengo un arreglo de checkbox, como hago para que en mi pagina php sepa los valores de estos y pueda actulizar a la bd???

todo el codigo javascript (que es el que hace el trabajo de ajax) se coloca dentro de un archivo .js que se enlaza en la cabecera del html:

Código HTML:

<head>
    <script type="text/javascript" src="ruta/nombre_de_archivo.js"></script>
    ...
</head> 

y en jquery especificamente existe un metodo que se llama cuando la pagina se ha cargado:

Código:

$(document).ready(function(){
     
         // aqui va todo el codigo

})

para interceptar eventos de los objetos de la pagina, en jquery se hace lo siguiente:

Código:

$('SELECTOR_CSS_DEL_OBJETO').NOMBRE_DEL_EVENTO(function(event){

});

// por ejemplo

$('#alerta').click(function(event){
     alert('hola mundo');
}

// para el caso del submit de un formulario

$('#mi_form').submit(function(event){

    // codigo que se ejecuta en el evento submit

});

php recibe los datos como cualquier dato enviado desde un formulario, tomando los valores de las variables desde $_POST['NOMBRE_DE_VARIABLE'] o $_GET['NOMBRE_DE_VARIABLE']. para formularios se usa POST.

por ejemplo, si un checkbox tuyo es asi:

Código HTML:

<input type="checkbox" name="suscribirse" value="si" /> 

entonces en php obtienes su valor asi:

Código PHP:

  $valor = $_POST['suscribirse']; 
   

puedes encontrar muchos tutorialos en google. pej.:

http://www.cristalab.com/tutoriales/...-jquery-c214l/

http://www.cristalab.com/tutoriales/...-jquery-c226l/

http://www.forosdelweb.com/f18/ayuda...on-php-524564/

http://www.elwebmaster.com/articulos...e-ajax-con-php

http://net.tutsplus.com/javascript-a...-using-jquery/

http://www.noupe.com/php/20-useful-p...tutorials.html

espero haber sido de ayuda.
saludos

[catpaw]

Gracias Absalon me pondre a estudiar los links que me pusiste...

Mientras ojala puedas echarle un ojo a mi problema, para que te des la idea de lo que trato de hacer especificamente:

http://www.forosdelweb.com/f77/pasar...ax-php-844155/

y me puedas seguir echando una mano

Gracias...

[salvador86]

Hola Absalon he probado también con la versión del Jquery que probaste pero sigue refrescando la página hay algo mal en el código que cambie al tuyo??,

[salvador86]

Absalón un favor no manejo ajax es la primera vez que se me pide hacer algo con ajax por eso no lo manejo, por fa si me puedes ayudar con el código es lo unico que me falta para terminar con mi aplicación.

Por ejemplo veo esta instrucción que has puesto: "$.post(" pero no veo donde se cierra ese parentesis.

Esta otra instrucción "formData = $("#id_del_formulario").serialize()" yo asumo que formData es una variable por eso yo le antecedo un "var" y lo termino con ;

Ahora yo también llamo en la url bueno a la misma página donde esta el formulario, espro me des una mano realmente solo eso me falta para terminar y ya llevo una semana solo en esto, muchas gracias Absalón