Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Experimento

Estas en el tema de Experimento en el foro de Javascript en Foros del Web. Buenos dias compañeros. Estoy intentando hacer un experimento, de plano no me doy ni la mas minima idea de como hecharlo a andar. He aqui ...
  #1 (permalink)  
Antiguo 23/06/2014, 10:40
Avatar de adelazeroth  
Fecha de Ingreso: junio-2014
Mensajes: 31
Antigüedad: 10 años
Puntos: 1
Experimento

Buenos dias compañeros.

Estoy intentando hacer un experimento, de plano no me doy ni la mas minima idea de como hecharlo a andar.

He aqui una imagen para ilustrar



aun no he agregado los botones, pero este es el motivo voy pasito a pasito.

Lo que pretendo es que mediante PHP al yo seleccionar un cliente del lado izquierdo me muestre del lado derecho las ubicaciones relacionadas a este cliente.

Para hacer una consulta en vivo de que hay para cada uno.

El siguiente nivel, pero ese yo ya creo poder hacerlo despues es interactuar con esta informacion.

No solicito que me pasen un copy paste del codigo para hacerlo, sino que simplemente no se por done empezar, se que tengo que hacer consultas de mi database de MySQL pero no se como tenerlas en vivo para que se muestren asi como les comento, saben como puedo trabajar las consultas?

Saludos.
__________________
No Sign, No responsability ;D
  #2 (permalink)  
Antiguo 23/06/2014, 11:06
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 7 meses
Puntos: 977
Respuesta: Experimento

Podrías usar Ajax. La consulta se realizaría de manera asíncrona, de este modo, la información se actualizaría y la ventana no recargaría.

Revisa este ejemplo, la única diferencia está en que el valor que enviarás será el de la opción seleccionada en la lista de la izquierda. Adáptalo.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #3 (permalink)  
Antiguo 23/06/2014, 11:23
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 17 años, 2 meses
Puntos: 292
Respuesta: Experimento

Hola Alexis88:

Revisa mi comentario final de ese post que citas..... creeria humildemente estas haciendo las cosas mal porque creas el objeto para el Ajax request con una evento y en un caso tan simple no justifica tampoco registrar una y otra vez la funcion para onreadystatechange


No es por proponer otra cosa... pero mira mi implementacion de Ajax

Un abrazo...... y cualquier cosa me la dices con la misma confianza
__________________
Salu2!

Última edición por Italico76; 23/06/2014 a las 11:29
  #4 (permalink)  
Antiguo 23/06/2014, 11:43
Avatar de adelazeroth  
Fecha de Ingreso: junio-2014
Mensajes: 31
Antigüedad: 10 años
Puntos: 1
Respuesta: Experimento

GRACIAS POR SUS RESPUESTAS AMBOS DOS =D.

Pero me intereso un poco mas la de ITALICO. Estaba viendo que estas manejando JS y PHP. Entonces mi duda seria mejor hacerlo con AJAX o PHP?

Saludos.
__________________
No Sign, No responsability ;D
  #5 (permalink)  
Antiguo 23/06/2014, 11:44
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 7 meses
Puntos: 977
Respuesta: Experimento

En realidad, no es un error, es algo totalmente válido y que además me permite evitar tener problemas de sobre-escritura de datos en el objeto Ajax, como el que se le presentó a este caballero. Si no mejoras tu función en ese aspecto, vas a tener los mismos problemas que aquel usuario.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #6 (permalink)  
Antiguo 23/06/2014, 11:51
Avatar de adelazeroth  
Fecha de Ingreso: junio-2014
Mensajes: 31
Antigüedad: 10 años
Puntos: 1
Respuesta: Experimento

Bueno esta quiza sea una pregunta estupida, pero al ser AJAX de JS, debo guardar mi pagina en .jsp o puedo mandar a llamar un archivo .js desde php? O mejor aun puedo combinar PHP y JS en un archivo .php?

Saludos.
__________________
No Sign, No responsability ;D
  #7 (permalink)  
Antiguo 23/06/2014, 11:58
Avatar de adelazeroth  
Fecha de Ingreso: junio-2014
Mensajes: 31
Antigüedad: 10 años
Puntos: 1
Respuesta: Experimento

Les comparto la pagina final con los botones que interectuaran entre estos 2 SELECT BOX y en que consiste, ya mas o menos me estoy dando la idea de como hacerlo con AJAX.

El usuario final podra asignar ubicaciones libres o y asignadas a un cliente, esto mediante seleccion, de hecho el SELECT de clientes nada mas permite hacer una seleccion a la vez, mientras que el de ubicaciones es de selecciones multiples, entonces dadas unas ubicaciones seleccionadas y un cliente seleccionado se puede cumplir la funcion del boton asignar ubicacion a cliente o cambiar ubicaciones a cliente o dadas unas ubicaciones seleccionadas estas puedan ser eliminadas.

Esto respetando dos condiciones, una de ellas es que la ubicacion no este ligada a un producto o sease que no almacene algo y que muestre una ventana de confirmacion para eliminar o mover ubicaciones

Una cuestion adicional que debo de agregar y creo que es obvia es que segun seleccione yo el cliente las ubicaciones que se mostraran seran solo las asignadas a ese cliente. De hecho para mostrar las ubicaciones que este sin cliente asignadas las agregare a un cliente llamado: UBICACION SIN ASIGNAR que tambien vendra relacionado y asi el usuario final sabra de que ubicaciones disponer para hacer los respectivos cambios.



Saludos.
__________________
No Sign, No responsability ;D

Última edición por adelazeroth; 23/06/2014 a las 12:03 Razón: Me falto dar mas detalles ^^
  #8 (permalink)  
Antiguo 23/06/2014, 12:13
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 17 años, 2 meses
Puntos: 292
Respuesta: Experimento

Cita:
Iniciado por Alexis88 Ver Mensaje
En realidad, no es un error, es algo totalmente válido y que además me permite evitar tener problemas de sobre-escritura de datos en el objeto Ajax, como el que se le presentó a este caballero. Si no mejoras tu función en ese aspecto, vas a tener los mismos problemas que aquel usuario.
Amigo Alexis88: llevo 1 dia con Ajax por eso ayer estaba preguntando cosas basicas y puedo estar equivocado en MUCHAS cosas.

Serias tan amable de darme un ejemplo donde mi implementacion falla ? eso que dices de sobre-escritura....... y como es que la tuya logra superar ese problema ?


Las criticas que te hice se las hago a cada implementacion que he visto en realidad... y creo podrias tomar a bien el comentario mejorar la tuya pero claro debo entender primero eso que me dices!


Gracias... y espero tu respuesta .. si quieres seguimos en tu hilo o en el mio la "discusion" jeje
__________________
Salu2!
  #9 (permalink)  
Antiguo 23/06/2014, 12:16
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 7 meses
Puntos: 977
Respuesta: Experimento

Revisa el enlace que adjunté, ahí está el caso que buscas.
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #10 (permalink)  
Antiguo 23/06/2014, 12:18
Avatar de adelazeroth  
Fecha de Ingreso: junio-2014
Mensajes: 31
Antigüedad: 10 años
Puntos: 1
Respuesta: Experimento

y yo on quede?

T_T
__________________
No Sign, No responsability ;D
  #11 (permalink)  
Antiguo 23/06/2014, 16:42
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 17 años, 2 meses
Puntos: 292
Respuesta: Experimento

Te pregunto...... debes relacionar UNO A UNO.. clientes con ubicaciones ? como si los estubieras uniendo con flechas ?
__________________
Salu2!
  #12 (permalink)  
Antiguo 23/06/2014, 16:54
Avatar de adelazeroth  
Fecha de Ingreso: junio-2014
Mensajes: 31
Antigüedad: 10 años
Puntos: 1
Respuesta: Experimento

bueno seria mas bien un uno a varios. por ejemplo el cliente1 tiene un rango de A-F el cliente2 tiene un rango de G-R, solo por decir algo. Y segun sea el cliente seleccionado del lado izquierdo del lado derecho veremos el rango que le corresponde, pero si seleccionamos algo del lado derecho, el lado izquierdo se mantiene igual
__________________
No Sign, No responsability ;D
  #13 (permalink)  
Antiguo 23/06/2014, 16:59
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 7 meses
Puntos: 977
Respuesta: Experimento

La consulta a la BD sería sencilla. Al seleccionar la opción de la lista de la izquierda y luego pulsar el botón, realizas la petición asíncrona, enviando el valor seleccionado. Para que no suceda nada raro al seleccionar una opción de la lista de la derecha, bien puedes tenerla como de solo lectura o deshabilitarla o bien comprobar en el código JS que sea la lista de la izquierda la que tenga el enfoque y no la de la derecha. Eso ya es un tema de lógica que creo que lo podrás implementar sin problemas.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #14 (permalink)  
Antiguo 23/06/2014, 17:02
Avatar de adelazeroth  
Fecha de Ingreso: junio-2014
Mensajes: 31
Antigüedad: 10 años
Puntos: 1
Respuesta: Experimento

Gracias Alexis88, solo que no se nada de Java, como les pregunte mientras discutian XD

para insertar java en php, como le hago, creo un archivo .js y lo mando a llamar o puedo consolidar java, php y html en un archivo .php?
__________________
No Sign, No responsability ;D
  #15 (permalink)  
Antiguo 23/06/2014, 17:08
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 7 meses
Puntos: 977
Respuesta: Experimento

Para empezar, Java y JavaScript son dos lenguajes distintos, acá estamos tratando sobre realizar el envío de los datos de manera asíncrona con JavaScript. Revisa el ejemplo que mostré en el primer comentario, pero si quieres profundizar más en el tema de Ajax, será mejor que abras un nuevo hilo en el foro de JavaScript o que pidas que muevan este hacia dicho foro.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #16 (permalink)  
Antiguo 23/06/2014, 17:58
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 17 años, 2 meses
Puntos: 292
Respuesta: Experimento

La primera parte (Ajax) seria mas o menos asi:

Código Javascript:
Ver original
  1. <style>
  2.     div.selecciones {display:block;}
  3.     div.containerSel1 {float:left;}
  4.     div.outputAjax {float:left;}
  5.     select {min-width:8em;}
  6. </style>
  7.  
  8. <form action="../pruebas/test_selecciones.php" name="frm" id="frm">
  9.  
  10. <div id="selecciones"> 
  11.     <div id="containerSel1">
  12.         <SELECT name="clientes" id="clientes" size="3">
  13.             <option value="34">Juan Perez</option>
  14.             <option value="12">Maria Juarez</option>
  15.         </SELECT>
  16.     <div>
  17.  
  18.     <div id="outputAjax">
  19.         <SELECT name="ubicaciones" id="ubicaciones" size="3">  
  20.         </SELECT>
  21.     </div>
  22. </div>
  23.  
  24. </form>
  25.  
  26. <script>
  27.  
  28. /*
  29.     Construye query para Ajax
  30.    
  31.     @param objeto literal con las referencias a los elementos del formulario
  32.     @return query de la forma "edad= + edad + &peso= + peso + ..."
  33. */ 
  34. function queryBuilder(o,encode)
  35. {
  36.     encode = encode || false;
  37.    
  38.     var params='',
  39.         c=0,
  40.         val;       
  41.    
  42.     for (prop in o)
  43.     {
  44.         if (prop == '__form__')
  45.             val = o[prop];
  46.         else   
  47.             val = encode ? o[prop].value : encodeURIComponent(o[prop].value);
  48.        
  49.         if (c==0)
  50.             params += prop+'='+val;
  51.         else   
  52.             params += '&'+prop+'='+o[prop].value;
  53.            
  54.         c++;
  55.     }
  56.          
  57.     return params;   
  58. }          
  59.    
  60.    
  61. function ajaxPrepare(){    
  62.     try{
  63.         // Opera 8.0+, Firefox, Safari
  64.         ajaxRequest = new XMLHttpRequest();
  65.     } catch (e){
  66.         // Internet Explorer
  67.         try{
  68.             ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
  69.         } catch (e) {
  70.             try{
  71.                 ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
  72.             } catch (e){               
  73.                 alert("Error en Ajax");
  74.                 return false;
  75.             }
  76.         }
  77.     }              
  78. }
  79.  
  80.  
  81.  
  82. /*
  83.     @param objeto literal con referencia a los elementos del formulario
  84.     @param action (url to submit)
  85.     @param async
  86. */
  87. function ajaxByPost(object,action,async){
  88.  
  89.     async   = async     || true;
  90.  
  91.     var params = queryBuilder(object,true);
  92.     ajaxRequest.open("POST", action, async);   
  93.    
  94.     ajaxRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  95.     ajaxRequest.send(params);
  96. }
  97.  
  98.  
  99.  
  100. /*
  101.     @param objeto literal con referencia a los elementos del formulario
  102.     @param action (url to submit)
  103.     @param async
  104. */
  105. function ajaxByGet(object,action,async){
  106.  
  107.     async   = async     || true;
  108.  
  109.     var params = queryBuilder(object,false);   
  110.     ajaxRequest.open("GET", action + '?' + params,  async);    
  111.    
  112.     ajaxRequest.send(null);
  113. }
  114.  
  115.  
  116. /*
  117.   Comienzo del programa como tal
  118. */
  119. window.onload = function ()
  120. {
  121.     var ajaxForm    = ajaxForm || {},  
  122.         ubicaciones = document.getElementById('ubicaciones'),
  123.         outputAjax  = document.getElementById('outputAjax');
  124.        
  125.     /* Inicializo ajaxRequest   */
  126.     ajaxPrepare();
  127.  
  128.    
  129.     /* Defino callback de Ajax */
  130.     ajaxRequest.onreadystatechange = function()
  131.     {
  132.             if(ajaxRequest.readyState == 4  && ajaxRequest.status == 200 ){
  133.                 outputAjax.innerHTML = ajaxRequest.responseText;
  134.             }
  135.     };         
  136.    
  137.     /* Registro evento onChange para el Select de clientes */
  138.     document.getElementById('clientes').addEventListener("change", function (event)
  139.     {      
  140.    
  141.         var id      = event.target.id;     
  142.         ajaxForm[id]= event.target;                
  143.        
  144.         ajaxByGet(ajaxForm,frm.action);    
  145.        
  146.     });
  147.    
  148.    
  149. }
  150.  
  151. </script>


Del lado de PHP lo primero es ve que te llega:

Código PHP:
Ver original
  1. <?php
  2.  
  3. var_dump($_REQUEST);


¿ Que debes hacer ahora ?

Enviar en lugar de ese volcado de $_REQUEST lo que necesitas a Javascript para construir el SELECT..OPTIONS de UBICACIONES o bien (no es tan buena la segunda opcion) generar en PHP todo ese HTML e imprimirlo
__________________
Salu2!

Última edición por Italico76; 23/06/2014 a las 18:52
  #17 (permalink)  
Antiguo 23/06/2014, 19:01
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 17 años, 2 meses
Puntos: 292
Respuesta: Experimento

Me toca repetir porque cada vez que edito me manda a Capcha :\

Prueba que pasaria si tu PHP fuera esto:

Código PHP:
Ver original
  1. <?php
  2. /*
  3.     @author Pablo Bozzolo (italico76)
  4. */
  5. $id_cliente = isset($_GET['clientes']) ? $_GET['clientes'] : null;
  6.  
  7. // simulo DB
  8.  
  9. $clientes = [];
  10. $clientes[12]['nombre'] = 'Juan Perez';
  11. $clientes[12]['ubicaciones'] = [101=>'Rosario',502=>'Buenos Aires'];
  12. $clientes[34]['nombre'] = 'Mery Pinto';
  13. $clientes[34]['ubicaciones'] = [150=>'Cordoba',701=>'Santa Fe',502=>'Buenos Aires'];
  14.  
  15. $out = "<select name=\"ubicaciones\" id=\"ubicaciones\" size=\"3\">\n";
  16.  
  17. $cliente = $clientes[$id_cliente]; 
  18. $ubicaciones = $cliente['ubicaciones'];
  19.    
  20.     foreach ($ubicaciones as $id_ubicacion => $ubicacion)
  21.         $out .= "\t<option value=\"$id_ubicacion\">$ubicacion</option>\n"; 
  22.  
  23. $out .= '</select>';
  24. echo $out;

Creo hay formas mas eficientes..... como enviar los datos y construir el HTML desde el cliente... pero esta es la mas facil


.. y asi como esta no te va a funcionar lo que sugiero....... pero el formulario seria algo como:

Código PHP:
Ver original
  1. <form action="clientes_controller.php?action=listar" name="frm" id="frm">
  2. <div id="selecciones"> 
  3.     <div id="containerSel1">
  4.         <SELECT name="clientes" id="clientes" size="3">
  5.             <?php foreach ($clientes as $id => $cliente): ?>               
  6.                 <option value="<?= $id ?>"><?= $cliente['nombre']; ?></option> 
  7.             <?php endforeach; ?>
  8.         </SELECT>
  9.     <div>
  10.        
  11.     <div id="outputAjax">
  12.         <SELECT name="ubicaciones" id="ubicaciones" size="3">      
  13.         </SELECT>
  14.     </div>
  15.    
  16. </div>
  17. </form>


EDIT: te aconsejo uses la funcion Ajax() de Alexis88 ... finalmente es la mejor opcion
__________________
Salu2!

Última edición por Italico76; 24/06/2014 a las 06:44
  #18 (permalink)  
Antiguo 24/06/2014, 06:45
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 17 años, 2 meses
Puntos: 292
Respuesta: Experimento

He actualizado......... revisa el codigo...... y por favor si entiendes algo trata de adptar la funcion Ajax() de Alexis que la mia tiene un "bug"
__________________
Salu2!
  #19 (permalink)  
Antiguo 24/06/2014, 08:47
Avatar de adelazeroth  
Fecha de Ingreso: junio-2014
Mensajes: 31
Antigüedad: 10 años
Puntos: 1
Respuesta: Experimento

oke doke gracias italico, solo sigo con una duda, se puede meter javascript dentro de php?
__________________
No Sign, No responsability ;D
  #20 (permalink)  
Antiguo 24/06/2014, 09:26
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 17 años, 2 meses
Puntos: 292
Respuesta: Experimento

Cita:
Iniciado por adelazeroth Ver Mensaje
oke doke gracias italico, solo sigo con una duda, se puede meter javascript dentro de php?
Si bien te deje "funcional" toda la parte de Ajax incluida la parte de Javascript (JS), te aconsejo leas "algo"

- PHP se ejecuta en el servidor
- JS se ejecuta en el navegador del usuario (llamado "lado del cliente")


PHP puede generar codigo JS pero la idea no es esa en general sino pasarse datos de un lado al otro (me refiero a servidor<-->cliente)
__________________
Salu2!
  #21 (permalink)  
Antiguo 24/06/2014, 09:28
Avatar de adelazeroth  
Fecha de Ingreso: junio-2014
Mensajes: 31
Antigüedad: 10 años
Puntos: 1
Respuesta: Experimento

perdon ya voy entendiendo estoy empezandolo a trabajar, espero arrojar resultados y buenas noticias pronto.

Saludos. ^^
__________________
No Sign, No responsability ;D
  #22 (permalink)  
Antiguo 24/06/2014, 18:36
Avatar de Italico76  
Fecha de Ingreso: abril-2007
Mensajes: 3.303
Antigüedad: 17 años, 2 meses
Puntos: 292
Respuesta: Experimento

Otra opcion seria usar el metodo add() y enviar los datos como "Json" ... ahorrarias asi algo de transferencia
__________________
Salu2!
  #23 (permalink)  
Antiguo 30/06/2014, 10:19
Avatar de adelazeroth  
Fecha de Ingreso: junio-2014
Mensajes: 31
Antigüedad: 10 años
Puntos: 1
Respuesta: Experimento

sorry post equivocado
__________________
No Sign, No responsability ;D

Última edición por adelazeroth; 30/06/2014 a las 10:21 Razón: post equivocado ^^

Etiquetas: experimento, mysql, php
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




La zona horaria es GMT -6. Ahora son las 20:28.