[SOLUCIONADO] Mostrar info en la misma pagina, al seleccionar opcion desde el menú creado con while

[agustinpak]

Buenas Gente! Creo un menú con info de una tabla y hasta ahí todo bien. Lo que intento realizar, es que desde el menú creado, al seleccionar una opción, muestre la info correspondiente en la misma pagina. Como podría hacerlo? Este es mi trabajo:

TABLA: 'LOCALES', COLUMNA 'NOMBRE' (MCDONALD, BURGER, ETC).

Código PHP:

<script>
$(document).ready(function(){
 
$('#opcion').click(function(){       
    $("#base").load("plantilla.php"); 
});
});
</script> 
 
<div id="posbarra">
<ul id="barra">
 
<?php
 
$consulta = mysqli_query($db,"SELECT nombre from locales");
while ($registro=mysqli_fetch_array($consulta))
 
{ ?>
    <li id="opcion"><a href="#"><?php echo $registro['nombre']; ?></a</li>
 
<?php 
    }   
?> 
     
</ul>
</div>
 
<section id="base">
/*AQUI MUESTRO LA INFO*/
<div class="">
        
</div>
 </section>
 

Bueno, y aquí me quede. Llamo a la pagina plantilla.php, aquí estaría la info. Se me ocurre algo así como realizar una consulta en la pagina plantilla.php, donde nombre = $registro['nombre'], pero no se como hacerlo sin un metodo post. Podrían guiarme con lo que se les ocurra?

Gracias! Saludos!

[rbczgz]

Hola agustinpak,

Con info ¿te refieres a algo relacionado con lo que seleccionas en el menú? Si es así, tal vez con AJAX, pasando como parámetro por URL a plantilla.php algo que te permita mostrar esa info y no el resto.

No sé si te he entendido bien, pero con lo que explicas, es lo que se me ocurre...

[manuparquegiralda]

Como bien ha dicho rbczgz lo ideal es que utilices la función ajax de jQuery, ya que estás usando jQuery.

La función $.load(), lo que hace es cargar una página utilizando ajax. Te recomiendo leer la info de load(). :http://api.jquery.com/load/

Yo en tu lugar utilizaría la función $.ajax() de jquery a la que le puedes pasar parámetros por POST o por GET y es muy simple de usar:

Código Javascript:

$( '#opcion' ).click( function() {
    var name = $( this ).children( 'a' ).html();
 
    var parametros = {
        nombre: name
    };
 
    $.ajax( {
        url: 'plantilla.php',
        type: 'POST',
        data: parametros,
        success: function( response ) {
            $( '#base' ).html( response );
        }
    });
});
 

Con este código, obtienes el nombre que hay dentro del link que hay en el <li> clicado. Lo intoduces en un objeto llamado parámetros.

Por medio de ajax llamas al archivo plantilla.php y a través del método POST definido en el type (por defecto GET) le pasas los parámtros a plantilla.php.

La función success() te devuelve la respuesta si todo fue correctamente. La respuesta que te devolverá será todo lo que sea visible en plantilla.php. Es decir, el HTML que haya o bien lo que pongas con un echo en PHP.

Lo ideal para evaluar bien la respuesta es devolver un objeto en json y evaluarlo en la función respuesta de manera que puedes traer muchos datos en lugar de solo lo impreso en plantilla.php, pero eso al gusto.

Por ejemplo si tu plantilla.php tuviera este código, el div hola sería lo que recibirías en la variable response de la función success().

Plantilla.php

Código PHP:

<div id="hola">
    Hola soy la respuesta ajax, me has pasado la variable <?php echo $_POST[ 'nombre' ];?>
</div>
 

Espero que te sirva.

[agustinpak]

Hola! Me super sirvió!! Excelente esa función, no conozco para nada ajax pero ahora me pongo a estudiar mas sobre el tema.

Muchas gracias a ambos por su tiempo y ayuda.

Saludos!!