[SOLUCIONADO] Gestión de contenido dinámico

[millita88]

Hola! Estoy trabajando en una web mas que nada por interés académico y para aprender, y me he encontrado con algo que no se muy bien como hacer, paso a explicar lo que quiero hacer a ver si alguien puede ayudarme:

La idea es gestionar una lista de personas para hacer "equipos". Ya tengo implementado un select en el que tengo todas las personas introducidas, con una serie de filtros para que las personas mostradas sean las que me interesan. Una vez seleccionada en el select la idea es que esa persona sea añadida a la lista del "equipo", que se modifica en tiempo real en la misma pagina obviamente.

Hablando un poco mas claro, seria añadir texto a la pagina en función de lo que vaya añadiendo, o quitarlo si saco gente del equipo.

Cargo todas las personas existentes en el select, y en tiempo real dinámicamente, muestro o oculto los que me interesan en relación a los filtros introducidos. Pero no se como gestionar la lista del equipo de forma dinámica... Alguien puede ayudarme?


Saludos.

[Alexis88]

Cuando mencionas lo de "dinámico", supongo que te refieres a tener una lista de datos variables, la cual será alimentada manualmente o desde una base de datos. Supongamos que sea mediante una BD, entonces, lo que podrías hacer es recolectar todos los datos encontrados en la BD y devolver un array de objetos en donde cada uno contendrá a cada nombre de la tabla en la BD. Un ejemplo:

Código PHP:

/******************** personas.php ********************/
 
//Acá realizas tu conexión a la BD y luego viene el resto
$query = mysqli_query($conexion, 'SELECT nombre FROM personas') or exit ('¡Error!');
if (mysqli_num_rows($query)){
    $nombres = array();
    while ($row = mysqli_fetch_array($query)){
        $nombres[] = array('nombre' => $row['nombre']);
    }
    mysqli_free_result($query);
    echo json_encode($nombres);
}
 

El proceso es simple. Hago una búsqueda en la BD y, si obtengo resultados, creo un array al cual alimentaré con otros arrays en donde cada uno contendrá a cada nombre de tabla de la BD. Al final, retorno este conjunto en forma de objeto JSON. La idea es que este proceso se ejecute como respuesta a una petición asíncrona (Ajax) desde el archivo inicial (en donde está el combo) y ya con estos datos, alimentas al <select> con los resultados obtenidos:

Código Javascript:

var lista = document.getElementById("id_select"), //El combo de opciones
    ajax = function(){
        var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP");
        xhr.open("GET", "personas.php", true);
        xhr.onreadystatechange = function(){
            if (xhr.readyState == 4 && xhr.status == 200){
                var nombres = JSON.parse(xhr.responseText),
                    total = nombres.length;
                for (var i = 0; i < total; i++){
                    var opcion = document.createElement("option");
                    opcion.value = nombres[i].nombre;
                    opcion.innerHTML = nombres[i].nombre;
                    lista.appendChild(opcion);
                }
            }
        };
        xhr.send(null);
    };
 

Creo al objeto XMLHttpRequest (para hacer la petición asíncrona), realizo la petición y recibo una respuesta a la cual decodifico para obtener un array al cual pueda recorrer y así tomar los valores que contiene para añadirlos al combo. Con lo anterior, ya tienes listo al combo y sus opciones traídas desde la BD. Ahora, nos haría falta un botón que, al pulsarlo, tomará al valor seleccionado en el combo y lo listará, además de un elemento en el cual se listarán los nombres seleccionados.

Código HTML:

Listado: <select id = "lista"></select>
<button onclick = "agregar()">Agregar</button>
Seleccionados: <p id = "seleccionados"></p>
 

Como verás, al pulsar el botón, se ejecutará la función agregar(), la cual tendrá una estructura como esta:

Código Javascript:

var agregar = function(){
    var seleccionados = document.getElementById("seleccionados");
    seleccionados.innerHTML += "<br />" + lista.value;
    lista.removeChild(lista[lista.selectedIndex]);
};
 

De esta forma, vamos mostrando los nombres seleccionados en el párrafo 'seleccionados' y, a la vez, retiramos el mismo nombre del combo. Todo junto quedaría así:

Código Javascript:

var lista = document.getElementById("lista"), //El combo de opciones 
    seleccionados = document.getElementById("seleccionados"), //El párrafo
    agregar = function(){
        seleccionados.innerHTML += "<br />" + lista.value;
        lista.removeChild(lista[lista.selectedIndex]);
    },
    ajax = function(){
        var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP");
        xhr.open("GET", "personas.php", true);
        xhr.onreadystatechange = function(){
            if (xhr.readyState == 4 && xhr.status == 200){
                var nombres = JSON.parse(xhr.responseText),
                    total = nombres.length;
                for (var i = 0; i < total; i++){
                    var opcion = document.createElement("option");
                    opcion.value = nombres[i].nombre;
                    opcion.innerHTML = nombres[i].nombre;
                    lista.appendChild(opcion);
                }
            }
        };
        xhr.send(null);
    };
 

Saludos

[millita88]

O.O

Grandísimo aporte! Muchas gracias, creo que ya podré hacer lo que pretendo sin problemas. Si algún día termino la web no me olvidaré de poner "Con la colaboración de www.forosdelweb.com" jaja siempre que he tenido una duda he podido resolverla aquí, gran comunidad!!



Saludos.