Select multiple con DIV pasando arrays a Javascript

Vamos a aprovechar el código Javascript creado en el post anterior para crear un campo <select> dinámico que contendrá una serie de artículos recuperados de la base de datos. Muy útil para la selección de varios articulos en varias listas desplegables.

Como siempre el código habla por sí solo:

  1. &lt;!-- Importamos del port de php a javascript&gt;
  2. &lt;script language="javascript" src="php.js"&gt;&lt;/script&gt;
  3. &lt;!-- Importamos el js creado en el post anterior&gt;
  4. &lt;script language="javascript" src="generar_fila.js"&gt;&lt;/script&gt;
  5. &lt;?php
  6.     // Si se ha pulsado el submit, procesamos datos que nos llegan
  7.     if ($_POST)
  8.     {
  9.       echo var_dump($_POST);
  10.       echo "&lt;br/&gt;";
  11.       echo "&lt;br/&gt;";
  12.       echo "&lt;b&gt;Articulos recibidos:&lt;/b&gt;&lt;br/&gt;";
  13.       for ($i=0;$i&lt;count($_POST['articulos']);$i++)
  14.         echo "id del articulo: " . $_POST['articulos'][$i] . "&lt;br/&gt;";
  15.      
  16.       echo "&lt;br/&gt;";
  17.     }
  18. ?&gt;
  19.  
  20. &lt;!-- Formulario principal de la pagina --&gt;
  21. &lt;form name="formulario" id="formulario" action="listas.php" method="post" enctype="multipart/form-data"&gt;
  22. &lt;?php
  23.  
  24. // imaginemos que esto lo sacamos de la base de datos,
  25. // pero ahora vamos a hacer un array de prueba
  26. $articulos_bd[] = array('id_articulo' =&gt; '1', 'nombre' =&gt; 'Powered');  
  27. $articulos_bd[] = array('id_articulo' =&gt; '2', 'nombre' =&gt; 'by');  
  28. $articulos_bd[] = array('id_articulo' =&gt; '3', 'nombre' =&gt; 'Linux');  
  29.  
  30. // creamos dos listas, una con los ids de los articulos recogidos presuntamente de la BD ($ids),
  31. // y otra lista con los nombres de dichos articulos ($array)
  32. $lista_articulos = '&lt;select id="articulos_0" name="articulos[]"&gt;
  33.  &lt;option selected value=""&gt;-Seleccione un art&iacute;culo-&lt;/option&gt;';
  34.   $ids[] = "";
  35.   $ids[] = "-Seleccione un art&iacute;culo-";
  36.   $array[] = "";
  37.   $array[] = "-Seleccione un art&iacute;culo-";
  38.  
  39.   // recorremos la lista de articulos del array supuestamente extraido de la BD
  40.   for ($i=0;$i&lt;count($articulos_bd);$i++)
  41.   {
  42.     // montamos un elemento &lt;select&gt;&lt;/select&gt; normal de HTML con los datos
  43.     // de los articulos recogidos de la BD
  44.     $lista_articulos.='&lt;option id="'.$articulos_bd[$i]['id_articulo'].'" name="'.$articulos_bd[$i]['id_articulo'].'"  value="'.$articulos_bd[$i]['id_articulo'].'"&gt;'.$articulos_bd[$i]['nombre'].'&lt;/option&gt;';
  45.     $ids[] = $articulos_bd[$i]['id_articulo'];
  46.     $array[] = $articulos_bd[$i]['nombre'];
  47.   }
  48.   $lista_articulos.='&lt;/select&gt;';  
  49.  
  50. // creamos un div que contendra los diferentes campos &lt;select&gt;&lt;/select&gt;
  51. // con todos los productos y sus datos asociados  
  52. echo '
  53.   &lt;div id="tabla"&gt;
  54.   &lt;b&gt;Art&iacute;culo relacionado:&lt;/b&gt;
  55.   '.
  56.    $lista_articulos;
  57.    ?&gt;
  58.    &lt;!-- A la funcion addCampo le voy a pasar el evento originado,
  59.         una cadena con los nombres de los articulos separados por comas,
  60.         y otra cadena con los ids de los articulos tambien separados por comas --&gt;
  61.    &lt;input type="button" class="boton" value="Añadir" onClick="addCampo(event,'&lt;?php echo implode(",", $array); ?&gt;', '&lt;?php echo implode(",", $ids); ?&gt;')" alt="Insertar"&gt;&nbsp;
  62.  
  63.   &lt;!-- continuamos la generacion del formulario --&gt;
  64.    &lt;?php echo '        
  65.   &lt;/div&gt;
  66.   &lt;br/&gt;
  67.   &lt;input type="submit" value="Submit"/&gt;
  68. &lt;/form&gt;';

Y como siempre, para estas cosas es necesaria una demostración

La lista de referencias utilizadas ha sido la siguiente:
http://www.trans4mind.com/personal_development/JavaScript2/createSelectDynamically.htm
http://www.cristalab.com/tips/32381/subir-multiples-archivos-con-php.html

A 1 persona le gusta esta entrada

Port de funciones PHP ejecutando en Javascript

Os pongo en situación. Quería pasar desde PHP un array a una función Javascript. En esa función Javascript necesitaba hacer un bucle que me recorriera desde el primer elemento hasta el último, por lo que necesitaba conocer el número total de elementos.

Sin percatarme de los sabios consejos de Moisés acerca de la existencia de la propiedad length existente también para arrays, busco funciones como sizeof o count (existentes en PHP) para desarrollar en Javascript de forma más cómoda.

Por curiosidad busqué referencia sobre el asunto y me topé con el sitio Web de Kevin Vanzonneveld, en el que ofrecen un archivo php.js que contiene una serie de funciones PHP portadas a Javascript de manera impecable. En el sitio de Kevin se relatan las 212 funciones portadas hasta ahora.

En mi caso, sólo tuve que descargar el mencionado fichero php.js, enlazarlo con una etiqueta script y utilizar la función count como si lo hiciera con PHP de forma normal para contar el número de elementos de un array o descomponer cadenas en array seccionando según un carácter. Os dejo con un ejemplo que completaré en una próxima entrada. Lógicamente se podrían haber utilizado las propiedades nativas de Javascript length y split para desarrollar el ejemplo, pero así vemos una prueba para otras funciones de esta librería que no estén desarrolladas de forma nativa en Javascript.

[Javascript]var numero = 0;

// esta funcion añade un nuevo 'dd' al div principal con el contenido especificado
// recibe el evento disparado y dos arrays: el primero con las IDs de los campos
// select y el segundo con las IDs de las opciones que irán dentro de cada select

function addCampo(evento, array, ids) {
newID = 'articulos_' + (++numero) // genero una nueva ID
nDD = document.createElement('dd')
nDD.id = 'dd_' + numero
bold = document.createElement('b') // creo una etiqueta en negrita
bold.innerHTML = "Artículo relacionado: "

myselect = document.createElement("select") // creo un elemento <select>
myselect.name = "articulos[]" // le pongo de nombre el de un array previamente inicializado en PHP
myselect.id = newID

// aquí puedo utilizar la función explode al haber importado php.js, obteniendo los mismos
// resultados que en PHP, es decir, me separará en un array el resultado de descomponer
// la cadena separada por comas
var newArray = explode(',', array)
var newIDs = explode(',', ids)

// aquí puedo utilizar la función count de forma normal porque he incluido en el archivo .php
// correspondiente la importación de php.js. Como puede verse, puedo recorrer de forma normal
// el array incluyendo la funcion count dentro de mi for de Javascript
for (i=0;i<count(newArray);i++)
{
if (newArray[i] != ',' && newArray[i] != '')
{
// voy creando dinamicamente las opciones (<option>) para el <select>
// en base a los datos que he recibido como parámetros de la función
theOption = document.createElement("OPTION")
theText = document.createTextNode(newArray[i])
theOption.appendChild(theText)
theOption.id = newIDs[i]
theOption.name = newIDs[i]
theOption.value = newIDs[i]
myselect.appendChild(theOption)
}
}

// creo un enlace que me servirá para eliminar elementos <select>
// incluidos dentro de un DD
a = document.createElement('a')
a.name = nDD.id
a.href = '#'
a.onclick = elimCamp
a.innerHTML = ' Eliminar'

// adjunto todos los elementos al DD
nDD.appendChild(bold)
nDD.appendChild(myselect)
nDD.appendChild(a)

// al contenedor que tengo en la página PHP le adjunto el DD creado
container = document.getElementById('tabla')
container.appendChild(nDD)
}

//con esta función eliminamos el campo cuyo link de eliminación sea presionado
function elimCamp(evt){
evt = evento(evt)
nCampo = rObj(evt)
div = document.getElementById(nCampo.name)
div.parentNode.removeChild(div)
}

//con esta función recuperamos una instancia del objeto que disparo el evento
rObj = function (evt) {
return evt.srcElement ? evt.srcElement : evt.target;
}

//esta funcion nos devuelve el tipo de evento disparado
evento = function (evt) {
return (!evt) ? event : evt;
}
[/Javascript]

Sé el primero en valorar positivamente

‘Cannot redeclare pclziputilpathreduction’ en WordPress 2.7

Algunos habréis notado que al actualizar de forma automática con la nueva herramienta que nos ofrece WordPress 2.7 nos aparece un error Cannot redeclare pclziputilpathreduction, justo al intentar desempaquetar la nueva versión de WordPress.

La solucion es bien sencilla. Hay que desactivar el plugin WordPress Automatic Upgrade, con el que ya disfrutábamos de esta características que ahora WordPress integra de forma interna.

Sé el primero en valorar positivamente

Breve recordatorio de expresiones regulares

Os ofrezco 3 referencias que me han venido muy bien a la hora de reactivar mis neuronas para que recordasen el manejo correcto de expresiones regulares.

En la web txt2re podemos escribir la cadena de texto que deseemos y, en un segundo paso, elegir para cada ítem cómo queremos procesarlo. Por ejemplo, podemos elegir que algo empiece por la subcadena «blog» o podemos elegir que empiece por 4 letras.

Continuando con el repaso, os hago referencia a una página perteneciente a la Universidad de Oviedo, en la que podemos validar una cadena de texto cualquiera frente a un patrón determinado por el usuario. Se nos indican alrededor de la página algunos ejemplos útiles de patrones.

Terminamos el repaso con una librería bastante extensa de expresiones regulares, con prácticamente todos los tipos de patrones utilizados más frecuentemente: urls a páginas Web, direcciones de correo electrónico, nombrado de ficheros de imagen, etc. La única pega es que todo el contenido se encuentra en el idioma de Shakespeare.

Sé el primero en valorar positivamente

Solucionar error «La página no está redirigiendo adecuadamente» en OsCommerce

Al intentar meter una nueva opción del box Clientes,

me he encontrado con un problema que me resultaba familiar y para el que no recordaba la solución:

se soluciona incluyendo el fichero que integra la nueva opción (en mi caso requests.php) en el array $aADMPages del fichero /admin/includes/functions/administrators.php, diciéndole cuál es su fichero superior (en mi caso customers.php, porque estoy dentro del box de clientes).

A 1 persona le gusta esta entrada

Uploader múltiple de ficheros con Javascript y PHP

En un post anterior os hablaba de cómo crear un upload múltiple de ficheros en HTML. Ahora rizamos el rizo y lo metemos todo dentro de una página PHP, en la que recogeremos en variables PHP los valores de los elementos que vamos a subir a un hipotético servidor, teniendo así terminado el uploader de ficheros.

Os dejo el código, igualmente comentado:

javascript

  1. &lt;script language="javascript"&gt;
  2. var numero = 0;
  3.  
  4. function addNewRow()
  5. {
  6.   // obtenemos acceso a la tabla por su ID
  7.   var TABLE = document.getElementById("tabla");
  8.   // obtenemos acceso a la fila maestra por su ID
  9.   var TROW = document.getElementById("celda");
  10.  
  11.   // tomamos la celda
  12.   var content = TROW.getElementsByTagName("td");
  13.  
  14.   // creamos una nueva fila
  15.   var newRow = TABLE.insertRow(-1);
  16.   newRow.className = TROW.attributes['class'].value;
  17.  
  18.   // creamos una nueva celda
  19.   var newCell = newRow.insertCell(newRow.cells.length)
  20.  
  21.   // creamos una nueva ID para el examinador
  22.   newID = 'file_' + (++numero);
  23.  
  24.   // creamos un nuevo control
  25.   txt = '&lt;input type="file" id="' + newID  + '" name="files[]" size="40"/&gt;'
  26.  
  27.   // y lo asignamos a la celda
  28.   newCell.innerHTML = txt
  29.  
  30.   // aviso ;)
  31.   //alert(txt)
  32.  
  33.   // creamos una nueva celda
  34.   var newCell = newRow.insertCell(newRow.cells.length)
  35.  
  36.   // creamos un nuevo campo de descripcion
  37.   txt = '&lt;input type="text" name="description[]" size="40""/&gt;';
  38.  
  39.   // y lo asignamos a la celda
  40.   newCell.innerHTML = txt
  41.  
  42.   // creamos una nueva celda
  43.   var newCell = newRow.insertCell(newRow.cells.length)
  44.  
  45.   // creamos un nuevo boton que eliminara una fila en concreto!
  46.   txt = '&lt;input type="button" name="button[]" value="eliminar" onClick="removeRow(this)"/&gt;';
  47.  
  48.   // y lo asignamos a la celda
  49.   newCell.innerHTML = txt
  50. }
  51.  
  52. function removeRow(r)
  53. {
  54.   // recogemos el indice de la fila donde esta situado el boton
  55.   var i = r.parentNode.parentNode.rowIndex;
  56.  
  57.   // eliminamos esa fila de la tabla utilizando el indice recogido
  58.   document.getElementById("tabla").deleteRow(i);  
  59. }
  60.  
  61. function verElementos(evento)
  62. {
  63.   for (i=0; i&lt;=numero; i++)
  64.   {
  65.     var my_id = "file_" + i;
  66.     var my_file = document.getElementById(my_id);
  67.     alert ("id: " + my_id + " value: " + my_file.value);
  68.   }
  69. }
  70. &lt;/script&gt;
  1. &lt;body&gt;
  2. &lt;?php
  3.    //Preguntamos si nuetro arreglo 'files' fue definido
  4.    //$_FILES es para los input type="file" y $_POST normal para los
  5.    // input type="text" de toda la vida ;)
  6.     if (isset ($_FILES["files"]) &amp;&amp; isset ($_POST["description"])) {
  7.       //obtenemos la cantidad de elementos que tiene el arreglo files
  8.       $total = count($_FILES["files"]["name"]);
  9.  
  10.       // construimos una tabla para presentar los datos      
  11.       echo "&lt;table&gt;";      
  12.      
  13.       //este for recorre el arreglo
  14.       //hacemos una impresion tabulada de los datos que recibimos
  15.       for ($i = 0; $i &lt; $total; $i++)
  16.       {
  17.         //con el indice $i, podemos obtener la propiedad que deseemos de cada archivo
  18.         $name = $_FILES["files"]["name"][$i];
  19.         $description = $_POST["description"][$i];
  20.         echo("&lt;tr&gt;");
  21.         echo("&lt;td&gt;&lt;b&gt;Archivo: &lt;/b&gt;");
  22.         echo($name);
  23.         echo("&lt;/td&gt;&lt;td width="5px"&gt;&lt;/td&gt;");
  24.         echo("&lt;td&gt;&lt;b&gt;Descripcion: &lt;/b&gt;");
  25.         echo($description);
  26.         echo("&lt;/td&gt;");
  27.         echo("&lt;/tr&gt;");
  28.       }
  29.      
  30.       // terminamos la construccion de la tabla
  31.       echo "&lt;/table&gt;";
  32.     }      
  33. ?&gt;
  1. &lt;form name="formulario" id="formulario" action="upload_multiple.php" method="post" enctype="multipart/form-data"&gt;
  2. &lt;table border="0" id="tabla" width="90%"&gt;
  3. &lt;tr class="celda"&gt;
  4. &lt;td colspan="3"&gt;Pulse [+] para añadir un examinador de archivos&lt;br/&gt;
  5. Desarrolladores =&gt; Pulse [v] para ver el contenido de los examinadores&lt;br/&gt;
  6. Desarrolladores =&gt; Pulse [s] para ejecutar el submit del formulario y recoger las variables con PHP
  7. &lt;/td&gt;
  8. &lt;td&gt;
  9. &lt;input type="button" class="boton" value="[+]" onClick="addNewRow(event)" alt="Insertar"&gt;&nbsp;
  10. &lt;input type="button" class="boton" value="[v]" onClick="verElementos(event)" alt="Ver elementos"&gt;
  11. &lt;input type="submit" class="boton" value="[s]" alt="Hacer submit"&gt;
  12. &lt;/td&gt;
  13. &lt;/tr&gt;
  14. &lt;tr id="celda" class="celda"&gt;
  15. &lt;td&gt;
  16. &lt;input id="file_0" name="files[]" type="file" size="40"&gt;
  17. &lt;/td&gt;
  18. &lt;td&gt;
  19. &lt;input name="description[]" type="text" size="40""/&gt;
  20. &lt;/td&gt;
  21. &lt;/tr&gt;
  22. &lt;/table&gt;
  23. &lt;/form&gt;
  24. &lt;/body&gt;

Y aquí una demo, que no puede faltar con este tipo de cosas.

A 3 personas les gusta esta entrada

Problema de sonido en Firefox 3 con Ubuntu

Me ha ocurrido que no tenia sonido en Youtube una vez instalado Ubuntu Intrepid Ibex, a pesar de que había instalado el Flash Player desde el mismo Firefox 3. La solución ha sido cerrar Firefox y escribir en consola:

neonigma@neonigma-laptop:~$ sudo apt-get install flashplugin-nonfree-extrasound

Este comando instalará una versión del plugin de Flash para Firefox 3 en la que sí me funciona el sonido.

Conviene también revisar los complementos haciendo clic en Herramientas => Complementos en Firefox 3.

Como puede verse en la imagen, se me han quedado dos complementos Shockwave Flash, así que pulsé el botón Desactivar del segundo y reinicié Firefox 3 para evitar problemas.

A 1 persona le gusta esta entrada

Crear tablas dinámicas con Javascript

Estoy trabajando en una empresa de desarrollador Web. Sí. Lo he hecho. Así que me toca enfrentarme a mi querido Javascript. Y lo he hecho haciendo una pequeña página para crear controles de subida de ficheros de forma dinámica, al estilo gmail, pero pulsando en un botoncito.

Sin más os lo dejo, el código está muy comentado así que no es necesario decir mucho más ;).

javascript

  1. &lt;script language="javascript"&gt;
  2. var numero = 0;
  3.  
  4. function addNewRow()
  5. {
  6.   // obtenemos acceso a la tabla por su ID
  7.   var TABLE = document.getElementById("tabla");
  8.   // obtenemos acceso a la fila maestra por su ID
  9.   var TROW = document.getElementById("celda");
  10.  
  11.   // tomamos la celda
  12.   var content = TROW.getElementsByTagName("td");
  13.  
  14.   // creamos una nueva fila
  15.   var newRow = TABLE.insertRow(-1);
  16.   newRow.className = TROW.attributes['class'].value;
  17.  
  18.   // creamos una nueva celda
  19.   var newCell = newRow.insertCell(newRow.cells.length)
  20.  
  21.   // creamos una nueva ID para el examinador
  22.   newID = 'file_' + (++numero);
  23.  
  24.   // creamos un nuevo control
  25.   txt = '&lt;input type="file" id="' + newID  + '" size="50" /&gt;'
  26.  
  27.   // y lo asignamos a la celda
  28.   newCell.innerHTML = txt
  29.  
  30.   // aviso ;)
  31.   alert(txt)
  32. }
  33.  
  34. function removeLastRow()
  35. {
  36.   // obtenemos la tabla
  37.   var TABLE = document.getElementById("tabla");
  38.  
  39.   // si tenemos mas de una fila, borramos
  40.   if(TABLE.rows.length &gt; 2)
  41.   {
  42.   TABLE.deleteRow(TABLE.rows.length-1);
  43.   --numero;
  44.   }
  45. }
  46.  
  47. function verElementos(evento)
  48. {
  49.   for (i=0; i&lt;=numero; i++)
  50.   {
  51.     var my_id = "file_" + i;
  52.     var my_file = document.getElementById(my_id);
  53.     alert ("id: " + my_id + " value: " + my_file.value);
  54.   }
  55. }
  56. &lt;/script&gt;
  1. &lt;body&gt;
  2. &lt;table border="0" id="tabla" width="100%"&gt;
  3. &lt;tr class="celda"&gt;
  4. &lt;td colspan="3"&gt;Pulse [+] para añadir un examinador de archivos&lt;br/&gt;
  5. Pulse [-] para eliminar un examinador de archivos&lt;br/&gt;
  6. Desarrolladores =&gt; Pulse [v] para ver el contenido de los examinadores&lt;br/&gt;
  7. &lt;/td&gt;
  8. &lt;td&gt;
  9. &lt;input type="button" class="boton" value="[+]" onClick="addNewRow(event)" alt="Adicionar"&gt;&nbsp;
  10. &lt;input type="button" class="boton" value="[-]" onClick="removeLastRow(event)" alt="Remover"&gt;
  11. &lt;input type="button" class="boton" value="[v]" onClick="verElementos(event)" alt="Ver elementos"&gt;
  12. &lt;/td&gt;
  13. &lt;/tr&gt;
  14. &lt;tr id="celda" class="celda"&gt;
  15. &lt;td&gt;
  16. &lt;input id="file_0" name="files" type="file" size="50"&gt;
  17. &lt;/td&gt;
  18. &lt;/tr&gt;
  19. &lt;/table&gt;
  20. &lt;/body&gt;

Y aquí una demo, que molesta no tenerlas para este tipo de ocasiones.

Más tarde pondré las referencias que he utilizado, que las tengo en favoritos en otro equipo que no está ahora a mi alcance.

A 57 personas les gusta esta entrada

Librerías QT portadas a S60

Esta noticia lleva ya un tiempo por la blogosfera, aún así la comento por mi especial interés por la miniaturización de la informática en general y de las comunicaciones.

Ni más ni menos que las famosas librerías QT de Trolltech han visto la luz en versión Symbian S60. Esto se debe en parte a que Qt Software (que así se llama ahora Trolltech) ha sido adquirida por el gigante finlandés Nokia. Las librerías salen con soporte extendido para Linux, aunque también han sido portadas a ¡Windows Mobile! justo antes de la mencionada adquisición de Nokia.

Sobran el resto de palabras al ver el video

A 1 persona le gusta esta entrada