[SOLUCIONADO] Experimento

[adelazeroth]

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.

[Alexis88]

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

[Italico76]

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

[adelazeroth]

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.

[Alexis88]

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

[adelazeroth]

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.

[adelazeroth]

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.

[Italico76]

Iniciado por Alexis88

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

[Alexis88]

Revisa el enlace que adjunté, ahí está el caso que buscas.

[adelazeroth]

y yo on quede?

T_T

[Italico76]

Te pregunto...... debes relacionar UNO A UNO.. clientes con ubicaciones ? como si los estubieras uniendo con flechas ?

[adelazeroth]

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

[Alexis88]

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

[adelazeroth]

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?

[Alexis88]

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

[Italico76]

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

Código Javascript:

<style>
    div.selecciones {display:block;}
    div.containerSel1 {float:left;}
    div.outputAjax {float:left;}
    select {min-width:8em;}
</style>
 
<form action="../pruebas/test_selecciones.php" name="frm" id="frm">
 
<div id="selecciones">  
    <div id="containerSel1">
        <SELECT name="clientes" id="clientes" size="3">
            <option value="34">Juan Perez</option>
            <option value="12">Maria Juarez</option>
        </SELECT>
    <div>
 
    <div id="outputAjax">
        <SELECT name="ubicaciones" id="ubicaciones" size="3">   
        </SELECT>
    </div>
</div>
 
</form>
 
<script>
 
/* 
    Construye query para Ajax
    
    @param objeto literal con las referencias a los elementos del formulario
    @return query de la forma "edad= + edad + &peso= + peso + ..."
*/  
function queryBuilder(o,encode)
{
    encode = encode || false;
    
    var params='',
        c=0,
        val;        
    
    for (prop in o)
    {
        if (prop == '__form__')
            val = o[prop];
        else    
            val = encode ? o[prop].value : encodeURIComponent(o[prop].value);
        
        if (c==0)
            params += prop+'='+val;
        else    
            params += '&'+prop+'='+o[prop].value;
            
        c++;
    }
         
    return params;   
}           
    
    
function ajaxPrepare(){     
    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){                
                alert("Error en Ajax");
                return false;
            }
        }
    }               
}
 
 
 
/*
    @param objeto literal con referencia a los elementos del formulario
    @param action (url to submit)
    @param async
*/
function ajaxByPost(object,action,async){
 
    async   = async     || true;
 
    var params = queryBuilder(object,true); 
    ajaxRequest.open("POST", action, async);    
    
    ajaxRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    ajaxRequest.send(params); 
}
 
 
 
/*
    @param objeto literal con referencia a los elementos del formulario
    @param action (url to submit)
    @param async
*/
function ajaxByGet(object,action,async){
 
    async   = async     || true;
 
    var params = queryBuilder(object,false);    
    ajaxRequest.open("GET", action + '?' + params,  async);     
    
    ajaxRequest.send(null); 
}
 
 
/* 
  Comienzo del programa como tal 
*/
window.onload = function ()
{
    var ajaxForm    = ajaxForm || {},   
        ubicaciones = document.getElementById('ubicaciones'),
        outputAjax  = document.getElementById('outputAjax');
        
    /* Inicializo ajaxRequest   */
    ajaxPrepare();
 
    
    /* Defino callback de Ajax */
    ajaxRequest.onreadystatechange = function()
    {
            if(ajaxRequest.readyState == 4  && ajaxRequest.status == 200 ){ 
                outputAjax.innerHTML = ajaxRequest.responseText;
            }
    };          
    
    /* Registro evento onChange para el Select de clientes */
    document.getElementById('clientes').addEventListener("change", function (event)
    {       
    
        var id      = event.target.id;      
        ajaxForm[id]= event.target;                 
        
        ajaxByGet(ajaxForm,frm.action);     
        
    });
    
    
}
 
</script>
 

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

Código PHP:

<?php
 
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

[Italico76]

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

Prueba que pasaria si tu PHP fuera esto:

Código PHP:

<?php
/*
    @author Pablo Bozzolo (italico76)
*/
$id_cliente = isset($_GET['clientes']) ? $_GET['clientes'] : null;
 
// simulo DB
 
$clientes = [];
$clientes[12]['nombre'] = 'Juan Perez';
$clientes[12]['ubicaciones'] = [101=>'Rosario',502=>'Buenos Aires'];
$clientes[34]['nombre'] = 'Mery Pinto';
$clientes[34]['ubicaciones'] = [150=>'Cordoba',701=>'Santa Fe',502=>'Buenos Aires'];
 
$out = "<select name=\"ubicaciones\" id=\"ubicaciones\" size=\"3\">\n";
 
$cliente = $clientes[$id_cliente];  
$ubicaciones = $cliente['ubicaciones'];
    
    foreach ($ubicaciones as $id_ubicacion => $ubicacion)
        $out .= "\t<option value=\"$id_ubicacion\">$ubicacion</option>\n";  
 
$out .= '</select>';
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:

<form action="clientes_controller.php?action=listar" name="frm" id="frm">
<div id="selecciones">  
    <div id="containerSel1">
        <SELECT name="clientes" id="clientes" size="3">
            <?php foreach ($clientes as $id => $cliente): ?>                
                <option value="<?= $id ?>"><?= $cliente['nombre']; ?></option>  
            <?php endforeach; ?>
        </SELECT>
    <div>
        
    <div id="outputAjax">
        <SELECT name="ubicaciones" id="ubicaciones" size="3">       
        </SELECT>
    </div>
    
</div>
</form>
 

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

[Italico76]

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"

[adelazeroth]

oke doke gracias italico, solo sigo con una duda, se puede meter javascript dentro de php?

[Italico76]

Iniciado por adelazeroth

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)

[adelazeroth]

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

Saludos. ^^

[Italico76]

Otra opcion seria usar el metodo add() y enviar los datos como "Json" ... ahorrarias asi algo de transferencia

[adelazeroth]

sorry post equivocado