Foros del Web » Programando para Internet » Javascript »

cambiar consulta de sql con javascript

Estas en el tema de cambiar consulta de sql con javascript en el foro de Javascript en Foros del Web. Hola no tengo mucho conocimiento con javascript tengo una table y quiero crear un filtro con javascript para mostrar los datos de la tabla Esto ...
  #1 (permalink)  
Antiguo 20/02/2016, 11:25
 
Fecha de Ingreso: enero-2016
Ubicación: barquisimeto
Mensajes: 14
Antigüedad: 3 años, 9 meses
Puntos: 0
cambiar consulta de sql con javascript

Hola no tengo mucho conocimiento con javascript tengo una table y quiero crear un filtro con javascript para mostrar los datos de la tabla

Esto es una opcion desplegable que muestrar los estados que hay:
Código PHP:
<select class="form-control" name="estados" onchange="recargarS2(this.value)">
                            <option value="">Filtrar:</option>
                            
                            <?php
                                $estados
=listarEstados();
                                foreach(
$estados as $estados){
                                    if (
$estados['id_estado'] == 0) {
                                    echo 
'<option value="0'.$estados['id_estado'].'" >'.$estados['nombre'].'</option>';
                                    }
                                    elseif (
$estados['id_estado'] == 1) {
                                        echo 
'<option value="1"'.$estados['id_estado'].'" >'.$estados['nombre'].'</option>';
                                    }

                                    elseif (
$estados['id_estado'] == 2) {
                                        echo 
'<option value="2"'.$estados['id_estado'].'" >'.$estados['nombre'].'</option>';
                                    }

                                    elseif (
$estados['id_estado'] == 3) {
                                        echo 
'<option value="3"'.$estados['id_estado'].'" >'.$estados['nombre'].'</option>';
                                    }

                                    else {
                                        echo 
'<option value="4"'.$estados['id_estado'].'" >'.$estados['nombre'].'</option>';
                                    }
                                    
                                }
                            
?>
                        </select>
y esta es la consulta
Código PHP:
 $result mysql_query(" SELECT*FROM guia WHERE estado_guia='$estados'");
        while(
$row mysql_fetch_array($result)){ 
yo lo que necesito es que dependiendo de que estado seleccione el usuario actualice el WHERE estado_guia sin tener que cargar nuevamente la pagina para eso quiero con javascript
  #2 (permalink)  
Antiguo 20/02/2016, 21:46
 
Fecha de Ingreso: diciembre-2015
Mensajes: 529
Antigüedad: 3 años, 9 meses
Puntos: 39
Respuesta: cambiar consulta de sql con javascript

Puedes realizarlo con jquery, cargar los datos de la consulta en un archivo aparte mediante la función "load".

Te explico como sería.
1.- Capturas el evento change de tu select.
2.- Dentro de dicho evento, haces
Código Javascript:
Ver original
  1. $("#divACargar").load("cambiarQuery.php?estados="estados);
Donde "estados" sería el valor que recibas del select.
Y ya en "cambiarQuery.php" de acuerdo al valor que recibas de $_GET['estados'] realizas la consulta correspondiente. Saludos
  #3 (permalink)  
Antiguo 20/02/2016, 23:23
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.427
Antigüedad: 7 años, 11 meses
Puntos: 929
Respuesta: cambiar consulta de sql con javascript

Lo que requieres se logra mediante una petición asíncrona, es decir, AJAX.

Como veo que pasas el valor seleccionado como argumento a la función que tienes hecha, solo necesitas implementar el algoritmo de la petición:
Código Javascript:
Ver original
  1. function recargarS2(valor){
  2.     var ajax = new XMLHttpRequest(), salida = document.querySelector("#id del elemento");
  3.     ajax.open("GET", "ejemplo.php?estado=" + valor, true);
  4.     ajax.addEventListener("load", function(){
  5.         if (this.status == 200){
  6.             salida.innerHTML = this.responseText;
  7.         }
  8.     }, false);
  9.     ajax.send();
  10. }

De esta manera, se crea una instancia del objeto XMLHttpRequest, el cual permite realizar la petición asíncrona, y realizas la petición utilizando el método HTTP GET el cual es constructor, es decir, es el método adecuado para realizar consultas al servidor y elaborar una vista de acuerdo a la información obtenida, la cual será —para este ejemplo—, la tabla con los datos obtenidos de la basa de datos. La salida hace referencia a un elemento HTML en el cual se mostrará el resultado; por ejemplo, un <div>.

En el archivo PHP, deberás recibir al dato de la siguiente manera:
Código PHP:
Ver original
  1. $estado = $_GET['estado']; //Si deseas, puedes filtrarlo

Y una vez realizada la consulta a la base de datos, procedes a imprimir la tabla HTML con los datos obtenidos. Dicha tabla será la respuesta que desde el lado del servidor se enviará hacia el lado del cliente, en donde se realizó la petición asíncrona.

Un saludo
__________________
«Laissez faire et laissez passer, le monde va de lui même»
  #4 (permalink)  
Antiguo 23/02/2016, 16:59
 
Fecha de Ingreso: enero-2016
Ubicación: barquisimeto
Mensajes: 14
Antigüedad: 3 años, 9 meses
Puntos: 0
Respuesta: cambiar consulta de sql con javascript

Hola gracias por responder como siempre responden rápido me desanime y no revise mas el foro, vamos a ver si te entendí ya que la parte de javascript y ajax y toda esa cuestión no entiendo casi

coloco lo siguiente como un script
Código PHP:
function recargarS2(valor){
    var 
ajax = new XMLHttpRequest(), salida document.querySelector("#id del elemento");
    
ajax.open("GET""ejemplo.php?estado=" valortrue);
    
ajax.addEventListener("load", function(){
        if (
this.status == 200){
            
salida.innerHTML this.responseText;
        }
    }, 
false);
    
ajax.send();

en #id del elemento coloco el del select cierto

pero que colocaría donde dice ejemplo.php la pagina donde esta el codigo cierto?
otra cosa yo quiero como quien dice dos criterios de busqueda es decir otro select la consulta quedaria como haria hay si solo seleccionan uno sea un solo criterio pero si seleccionan ambos como haria en ese caso yo lo hice con if pero solo con php mas no se como hacerlo con javascript
Código PHP:
 $result mysql_query(" SELECT*FROM guia WHERE estado_guia='$estados' AND tipo_envio='$estados2'"); 
  #5 (permalink)  
Antiguo 23/02/2016, 17:30
 
Fecha de Ingreso: enero-2016
Ubicación: barquisimeto
Mensajes: 14
Antigüedad: 3 años, 9 meses
Puntos: 0
Respuesta: cambiar consulta de sql con javascript

me puedes explicar un poco mejor ya que entiendo la logica mas no entiendo como aplicarlo de javascript tengo conocimientos muy minimos una que otra cosa
  #6 (permalink)  
Antiguo 23/02/2016, 17:35
 
Fecha de Ingreso: enero-2016
Ubicación: barquisimeto
Mensajes: 14
Antigüedad: 3 años, 9 meses
Puntos: 0
Respuesta: cambiar consulta de sql con javascript

Hice lo siguiente
Código PHP:
Ver original
  1. <script type="text/javascript">
  2.         function recargarS2(valor){
  3.     var ajax = new XMLHttpRequest(), salida = document.querySelector("#select_estado");
  4.     ajax.open("GET", "resumen.php?estado=" + valor, true);
  5.     ajax.addEventListener("load", function(){
  6.         if (this.status == 200){
  7.             salida.innerHTML = this.responseText;
  8.         }
  9.     }, false);
  10.     ajax.send();
  11. }
  12.         </script>
Código PHP:
Ver original
  1. <select class="form-control" id="select_estado" name="filtro" onchange="recargarS2(this.value)";>
  2.                                             <option value="null">
  3.                                                 Filtrar:
  4.                                                 <?php
  5.                                                 $estados=listarEstados();
  6.                                                 foreach($estados as $estados){
  7.                                                 echo '<option value="'.$estados['id_estado'].'" >'.$estados['nombre'].'</option>';
  8.                                                 }
  9.                                                 ?>
  10.                                         </select>

y la consulta la coloque asi

Código PHP:
$estado $_GET['estado'];
                                       
$sql "SELECT*FROM guia WHERE estado_guia='$estado'";
                            
$result mysql_query($sql);
                            while(
$row mysql_fetch_array($result)){ 
mas no me funciona orita se selecciona solo el primer select intento seleccionar otro y vuelve al primer select
  #7 (permalink)  
Antiguo 23/02/2016, 18:10
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.427
Antigüedad: 7 años, 11 meses
Puntos: 929
Respuesta: cambiar consulta de sql con javascript

Para que no te compliques más, puedes hacer lo siguiente:

En un formulario, ten a ambos <select>:
Código HTML:
Ver original
  1. <form id="busqueda" method="get" action="buscar.php">
  2.     <label>Primer select:</label>
  3.     <select id="primero">
  4.         <!-- Aquí irán las opciones que le asignes -->
  5.     </select>
  6.  
  7.     <label>Primer select:</label>
  8.     <select id="segundo">
  9.         <!-- Aquí irán las opciones que le asignes -->
  10.     </select>
  11.  
  12.     <input type="submit" value="Buscar" />
  13. </form>

Además, necesitas tener un elemento para mostrar el resultado. Por ejemplo:
Código HTML:
Ver original
  1. <section id="resultado"></section>

Luego, una vez que hayas seleccionado una opción en cada <select> y hayas pulsado el botón de búsqueda, se realizará el envío de los datos, disparándose así el evento submit en el formulario. Como deseas hacer esto mediante una petición asíncrona, necesitas cancelar la ejecución de dicho evento, para lo cual debes utilizar el método .preventDefault(). Fíjate también que el formulario tiene un identificador, un método de envío y un archivo de destino, el mismo en el que realizarás las consulta a la base de datos.

Adaptando esto al ejemplo anterior, el script quedaría así:
Código Javascript:
Ver original
  1. document.addEventListener("DOMContentLoaded", function(){ //Al cargar el documento
  2.     var formulario = document.querySelector("#busqueda"),
  3.         resultado = document.querySelector("#resultado");
  4.  
  5.     formulario.addEventListener("submit", function(event){ //Al realizarse el envío
  6.         event.preventDefault(); //Se cancela el envío
  7.  
  8.         var ajax = new XMLHttpRequest(); //Se crea la instancia al objeto XMLHttpRequest
  9.  
  10.         for (var i = 0, selects = this.elements, total = selects.length, query = []; i < total; i++){
  11.             if (selects[i].type != "submit"){
  12.                 query.push(selects[i].id + "=" + selects[i].value);
  13.             }
  14.         }
  15.  
  16.         ajax.open(this.method, this.action + "?" + query.join("&"), true);
  17.         ajax.send();
  18.         ajax.addEventListener("load", function(){
  19.             if (this.status == 200){
  20.                 resultado.innerHTML = this.responseText;
  21.             }
  22.         }, false);
  23.     }, false);
  24. }, false);

Una vez producido el evento DOMContentLoaded, el cual indica que ha terminado de cargar el modelo de objetos del documento (DOM), es decir, los elementos HTML que contiene el documento, procedemos a tomar al formulario y al elemento en el cual se mostrará el resultado y los asignamos a dos variables. Enseguida, registramos el evento submit en el formulario y, en la función manejadora o handler —que no es otra cosa que una función anónima la cual, luego de ocurrido el evento, ejecutará una serie de instrucciones que le indiquemos—, cancelamos la ejecución del evento, es decir, el envío de los datos del formulario, y creamos una instancia al objeto XMLHttpRequest para realizar la petición asíncrona.

Hecho esto, procedemos a crear la cadena de consulta (o query string), misma que contendrá los valores que enviaremos al lado del servidor. Para esto, recorremos al conjunto de elementos del formulario y, en cada iteración, guardamos en un arreglo el identificador de cada elemento y su valor en una misma cadena con la forma variable=valor, siempre y cuando el tipo del elemento evaluado sea diferente a submit, esto con el fin de evitar enviar el valor del botón de envío, el cual es irrelevante.

A continuación, establecemos los datos de la petición, empezando por el método de envío que, en este caso, será el establecido en el atributo method del formulario. Como estamos trabajando dentro de la función manejadora registrada en el formulario, este último es accesible mediante la palabra reservada this. Como utilizaremos el método de envío HTTP GET, la cadena de consulta deberá estar unida a la ruta del archivo hacia el cual se realizará el envío de los datos. Para esto, accedemos a dicha ruta mediante el valor establecido en el atributo action del formulario, lo concatenamos con el separador ? y el conjunto de valores contenidos en los elementos del formulario, pero como estos se encuentran dentro de un arreglo, debemos formar con ellos una cadena que tenga la forma a=1&b=2&c=3. Para esto, podemos utilizar el método .join() el cual permite unir a los elementos de un arreglo mediante una cadena, o con comas, si es que no se indica un elemento unificador. Establecemos la petición como asíncrona (argumento true) y realizamos el envío.

Finalmente, cuando se haya completado la petición (para lo cual se registró el evento load) en la instancia del objeto XMLHttpRequest), verificamos que esta haya sido exitosa; de ser así, asignamos como contenido del elemento en el cual se mostrará el resultado a la respuesta obtenida.

Todos los registros de eventos en los distintos elementos utilizados, se realizaron con el método .addEventListener().

Ten en cuenta que, en el archivo PHP, deberás acceder a los valores recibidos por medio de los nombres asignados a las variables de la cadena de consulta, es decir:
Código PHP:
Ver original
  1. $_GET['primero']
  2. $_GET['segundo']

Si tienes alguna duda al respecto, consulta los enlaces que te he dejado a lo largo de este comentario (son las palabras resaltadas en color anaranjado). También puedes consultar cualquiera de los distintos manuales que hay en la web, pero si solo vas a copiar y pegar y luego vas a volver a preguntar por algo que debiste resolver siguiendo las pautas que te dí, no cuentes conmigo.

Un saludo
__________________
«Laissez faire et laissez passer, le monde va de lui même»

Última edición por Alexis88; 23/02/2016 a las 18:20 Razón: Cambio de variable
  #8 (permalink)  
Antiguo 23/02/2016, 19:35
 
Fecha de Ingreso: enero-2016
Ubicación: barquisimeto
Mensajes: 14
Antigüedad: 3 años, 9 meses
Puntos: 0
Respuesta: cambiar consulta de sql con javascript

ok orita si me volvi un ocho te voy a decir lo que yo medio entendí te voy a explicar el código como tu muy amablemente lo hiciste de la manera que yo lo entendí. tarde en responde por que me puse leer las url que me diste.

empiezo con la primera linea del codigo script
Código PHP:
document.addEventListener("DOMContentLoaded", function(){ 
esto es para saber si ya cargo solo el codigo html es como que no le importa si los estilos css y imagenes allan cargado me imagino que es para acelerar el proceso.

aqui declaramos las variables para luego usarlas mas adelante
Código PHP:
var formulario document.querySelector("#busqueda"),
        
resultado document.querySelector("#resultado"); 
esto detecta el evento del envio y luego lo cancela, estuve intentando por que cancelamos ese evento mas no entiendo esa parte
Código PHP:
 formulario.addEventListener("submit", function(event){ //Al realizarse el envío
        
event.preventDefault(); //Se cancela el envío 
Esto es para que cuando detecte un cambio en la url actulice pero solo una parte que en este caso seria lo que este dentro del section
Código PHP:
 var ajax = new XMLHttpRequest(); 
este for es para detectar los elementos que se seleccionaron, si no me equivoco tampoco lo entendi mucho
Código PHP:
for (var 0selects this.elementstotal selects.lengthquery = []; totali++){
            if (
selects[i].type != "submit"){
                
query.push(selects[i].id "=" selects[i].value);
            }
        } 
esta es como para generar el url con los datos que obtuvimos a traves del select
Código PHP:
 ajax.open(this.methodthis.action "?" query.join("&"), true); 
que es lo que se muestra cuando envias un formulario mediante GET que deberia mostrar algo asi como buscar.php?primero="valor"&segundo="valor";

y de esto lo unico que entiendo es lo de responsetext que es para obtener la respuesta del servidor
Código PHP:
 if (this.status == 200){
                
resultado.innerHTML this.responseText

Muchas gracias por tu ayuda pero me cuesta un poco entender esto
  #9 (permalink)  
Antiguo 23/02/2016, 19:46
Avatar de Alexis88
Objetivista
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.427
Antigüedad: 7 años, 11 meses
Puntos: 929
Respuesta: cambiar consulta de sql con javascript

Si no entiendes algo, vuelve a leerlo todas las veces que sea necesario. Nada de lo que te he explicado es "de otro mundo", y aunque seas nuevo en esto o sepas poco, no es impedimento para que no logres entender, recuerda que todos pasamos por lo mismo; además, tienes las referencias y la vasta bibliografía que puedes encontrar en la web para despejar dudas al respecto.

Ahora, lo más importante, ¿pudiste implementar el ejemplo? Y, si lo hiciste, ¿funcionó?
__________________
«Laissez faire et laissez passer, le monde va de lui même»

Etiquetas: php, sql
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 23:45.