entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

Hola, tengo un select que contiene categorías, y al lado un div con las productos.
Lo que quiero hacer mediante AJAX es que cuando haga click sobre una categoría me aparezcan los productos que pertenecen a dicha categoría en ese DIV.

Gracias de antemano.
Aquí una captura de la web:

http://jacholpas.files.wordpress.com/2014/02/captura-de-pantalla-2014-02-10-a-las-00-21-14.png

2 Respuestas

3votos

Leonardo-Tadei Puntos227320

Hola Jabixo,

es una pregunta un poco más genérica de lo que parece, ya que muchas cosas dependen de la implementación del resto de las cosas.

Por un lado, debés hacer que el evento onchange del select dispare las acciones:

<select id="seciones" name="seciones" onchange="javascript: actualzarProductos();">
  <option value="1">Informática</option>
  <option value="2">Electrodométicos</option>
  <option value="3">Hogar</option>
  ...
</select>

y el lugar en dónde se verán las respuestas:

<div id="anuncios"></div>

Luego el código JavaScript en el head de la página que implementa la llamada AJAX que se dispara en la función actualzarProductos():

// crea el ambiente JS para recibir la respuesta dinámica
function Conectar(){
    if (window.XMLHttpRequest){
        return new XMLHttpRequest()
    } else {
        var xmlHttp = false;
        try {
            return new ActiveXObject("Msxml2.XMLHTTP");
        }catch (e) {
            try {
            return ActiveXObject("Microsoft.XMLHTTP");
            } catch (e2) {
                xmlHttp = false;
            }
        } // try
    } // else
} // Conectar()
var xmlHttp = Conectar();

function actualzarProductos() {
   // Obtiene el value del select
   unSelect = document.getElementById("secciones");
   valor = unSelect.ooptions[unSelect.selectedItem].value;
   // Limpia la respeusta anterior
   document.getElementById('anuncios').innerHTML = '';
   // Arma el URL para llamar al script que devuelve los anuncios de una sección
   url = 'anunciosPorSeccion.php?seccion='+valor;
   // Configura la llamada asincrónica
   xmlHttp.open("GET", url);
   xmlHttp.onreadystatechange = function() {
                // Cuando la llamada termina, muestra los datos
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            document.getElementById('anuncios').innerHTML = xmlHttp.responseText;
        }
   }
   xmlHttp.send(null);
}

Con esto, basta que el script anunciosPorSeccion.php devuelva el HTML correspondiente para mostrar los productos de la sección solitada vía $_GET['seccion']

Se puede hacer de formas más complicadas para generalizarlo, como pasar como parámetro el select del que se parte, pasar como parámetro el ID del DIV de destino, devolver XML en vez de HTML en el script PHP, etc.

Podrías en vez de usar JavaScript vanila usar algún framework, si es que estás familiarizado copn alguno, pero el proceso siempre será: ver cual selecciona el usuario, hacer la llamada a tu script para obtener la respuesta, mostrar la respuesta dada.

Saludos!

1voto

jabixo comentado

Muchas gracias!

0voto

Leonardo-Tadei comentado

Por nada!

Por favor, editá la respuesta que escribiste aquí arriba para convertirla en un comentario de mi respuesta, ya que si no pareciera que tu consulta tiene dos respeutas, cuando en realidad tiene solo una (y cuanto menos respuestas tengas, más gente interesada habrá en responderte).

Luego de pasado un tiempo prudencial, seleccioná alguna de las respuestas que te han dado, para que tu pregunta quede marcada como "solucionada". Si ninguna respuesta te sirve, volvé a preguntar con más detalles, y marcá como respuesta la que et haya servido para darte cuanta de cómo reformular tu pregunta.

Saludos!!!

2votos

Eso es muy pero muy fácil con jquery

tienes el id de tu combo:

lo mandas llamar con el evento change de jquery:

$( "#idDelSelect" ).change(function() {
    //aqui va ir tu codigo ajax, del cual tienes que regresar un .json desde php
    // por ejemplo asi:   echo json_encode($tuvariable);
   //entonces mandas llamar el php de esta manera

        $.post("archivo.php").done(function(data) {
                    data = JSON.parse(data);
        for(var i=0; i<data.length;i++){
              $("#tuDiv").append('<div>'+data[i].variable+'</div>');
        }
});

});

si te interesa mi propuesta puedo hacerte un ejemplo funcional... Saludos

0voto

jabixo comentado

Justo eso es lo que buscaba, si me puedes hacer el ejemplo funcional te lo agradecería porque voy un poco perdido con el tema de AJAX.. Muchas gracias! Un saludo :)

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta