Espero que puedan disculparme todos aquellos quienes preguntaron en los post anteriores y nunca recibieron una respuesta. Desgraciadamente, por necesidades laborales tuve que cambiar de ambito de programación, dedicandome a .Net durante ya dos años, en un trabajo bastante absrobente… y sobre todo lo anterior, formé una nueva familia
Todo esto me mantuvo alejado del sitio, pero gracias a Dios, me han reasignado a un nuevo proyecto Web con Java y JQuery, por lo que comenzaré nuevamente a subir algunos tutoriales con ejemplos tan sencillos y útiles como hasta ahora.
Saludos!

Clasificado bajo: General | Sin comentarios »

TODO LO PUEDO EN CRISTO QUE ME FORTALECE

Clasificado bajo: General | Sin comentarios »

En el post anterior Como agregar filas o rows a una tabla dinamicamente mediante JavaScript mostré una manera como agregar filas a una tabla (aplicable a cualquier elemento) utilizando JavaScript. Ahora veremos de que manera podemos hacerlo con jQuery, un Framework bastante sencillo de utiliza, pero no menos potente por ello.
La base es crear una cadena con el HTML que irá dentro de la fila o TR de nuestra tabla. Queda más o menos así.

function agregarFila(obj){
        $("#cant_campos").val(parseInt($("#cant_campos").val()) + 1);
		var oId = $("#cant_campos").val();
        	var nombre = $("#txtNombre").val();
		var edad = $("#txtEdad").val();
		var direccion = $("#txtDireccion").val();
		var sexo = $("#selSexo").val();
		var estCivil = $("#selEstCivil").val();
        	var strHtml1 = "<td>" + nombre + '<input type="hidden" id="hdnNombre_' + oId + '"  name="hdnNombre_' + oId + '" value="' + nombre + '"/></td>';
		var strHtml2 = "<td>" + edad + '<input type="hidden" id="hdnEdad_' + oId + '" name="hdnEdad_' + oId + '" value="' + edad + '"/></td>' ;
		var strHtml3 = "<td>" + direccion + '<input type="hidden" id="hdnDireccion_' + oId + '" name="hdnDireccion_' + oId + '" value="' + direccion + '"/></td>' ;
		var strHtml4 = "<td>" + sexo + '<input type="hidden" id="hdnSexo_' + oId + '" name="hdnSexo_' + oId + '" value="' + sexo + '"/></td>' ;
		var strHtml5 = "<td>" + estCivil + '<input type="hidden" id="hdnEstCivil_' + oId + '" name="hdnEstCivil_' + oId + '" value="' + estCivil + '"/></td>' ;
    		var strHtml6 = '<td><img src="images/delete.png" width="16" height="16" alt="Eliminar" onclick="if(confirm(\'Realmente desea eliminar este detalle?\')){eliminarFila(' + oId + ');}"/>';
        	strHtml6 += '<input type="hidden" id="hdnIdCampos_' + oId +'" name="hdnIdCampos[]" value="' + oId + '" /></td>';

Leer el resto de la entrada »

Clasificado bajo: jQuery | 20 comentarios »

Uno de los post más visitados y más agradecidos es el de agregar filas dinamicamente con xajax. En este mucho se topan con la desdicha que no quieren utilizar xajax en sus proyecto proque no quieren o utilizan otro lenguaje para trabajar que no es PHP que es el lenguaje que se utiliza para xajax. Bueno, para todos aquellos que les sucede esto, he preparado un pequeño ejemplo de como se podría hacer lo mismo desde javascript sin ningún framework. Vamos allá.

Leer el resto de la entrada »

Clasificado bajo: JavaScript | 9 comentarios »

En pro de una apariencia un poco más corporativa, he desidido actualizar el blog y crear una nueva plantilla según los colores de mi pseudoempresa, por lo que si algo no anda como corresponde o la pagina cambia repentinamente es porque estoy trabajando.

Agradeciendo su comprensión y sus visitas, y esperando que me ayuden en cuanto a lo visual ya que no soy nada bueno en el diseño, me despido.

Exito.

Clasificado bajo: General | Sin comentarios »

Un aditivo para nuestras paginas webs o formularios es agregar la funcionalidad de autocompletar o sugerir los resultados en un campo de texto, especialmente cuando la cantidad de resultados es demasiado grande como para colocarla dentro de select.

Uno de los más completos que he podido ver y el cual he adoptado en la mayoría de los proyecto que he llevado a cabo es el plugin de jQuery autocompletex de Jörn Zaefferer http://plugins.jquery.com/project/autocompletex

Este plugin es muy completo. Te permite enviar parámetros extra, recibir más de un parámetro a través de un arreglo, soporte para hacer las consultas asincrónicamente, consultar desde prácticamente cualquier archivo o script que genere una salida formateada como lo indica el plugin, entre otras.

En este tutorial me enfocaré a las consultas a través de PHP y MySQL, rescatando las opciones desde una BD y devolviendo los resultados al formulario que lo solicita y llenaremos más de un campo con los resultados obtenidos.

Vamos a la acción. Utilizando uno de los formularios utilizados anteriormente rescataremos información de personas utilizando autocomplete en el campo nombre.

El funcionamiento es bastante sencillo. El plugin llama mediante ajax a un archivo que genera un arreglo. la clave de todo está en que envía un parametro por metodo GET con el nombre ‘q’ (supongo que viene del ingles query) el cual contiene los caracteres tipeados por el usuario. Con este valor podremos filtrar nuestra consulta y generar una especie de arreglo que despues llegará a JS con el nombre data. En la primera posición estará lo que se muestra en el listado desplegable y de la segunda en adelante podremos utilizarla a gusto. Veamos un ejemplo.

Para esto debemos agregar los script necesarios y lo típico para utilizar jQuery.

Las inclusiones:

<script type="text/javascript" src="js/jquery.js"></script>
<script type='text/javascript' src="js/jquery.autocomplete.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.autocomplete.css" />
<script type="text/javascript" src="js/jquerymenu/jqueryslidemenu.js"></script>
<script type='text/javascript' src="js/jquery.autocomplete.js"></script>

El código de la llamada:

<script type="text/javascript" >
 
$(document).ready(function(){
 
        $('#txtNombre').autocomplete('search.php?tip=a&opt=1', { //ID DEL CAMPO QUE SERA AUTOCOMPLETABLE
            width: 260,
            selectFirst: false
        })
</script>

El PHP que genera el resultado

 
< ?php
session_start();
require_once ("conexion/class.conexionDB.inc.php");
$conn = new conexionBD ( );
extract ( $_GET );
 
/* Consulta a Bases de datos. */
if (isset ( $tip ) && $tip == 'a'){
    if ($opt == 1) {
        $sql = " SELECT DISTINCT
                    PER_NOMBRE,
                    PER_EDAD,
                    PER_DIRECCION,
                    PER_SEXO,
                    PER_ESTCIVIL
                FROM
                    PERSONA";
        if($q != ""){
            $sql .= " WHERE
                        (PER_NOMBRE like N'%$q%')  ";
        }
        $sp = $conn->EjecutarSQL ( $sql );
        //$separador = "MOD: ";
        while ( $row5 = $conn->FetchArray( $sp ) ) {
            $str .= trim ( $row5 [PER_NOMBRE] ) . " $row5[PER_EDAD] - $row5[PER_SEXO]";  //LO QUE SERA MOSTRADO EN EL RECUADRO DESPLEGABLE
            $str .= '|';
            $str .= trim ( $row5 [PER_NOMBRE] ); //LO QUE ASIGNAREMOS AL CAMPO NOMBRE
            $str .= '|';
            $str .= trim ( $row5 [PER_EDAD] );
            $str .= '|';
            $str .= trim ( $row5 [PER_DIRECCION] );
            $str .= '|';
            $str .= trim ( $row5 [PER_SEXO] );
            $str .= '|';
            $str .= trim ( $row5 [PER_ESTCIVIL] );
            $str .= "\n";
        }
    }
}
 
echo $str;
?>

Leer el resto de la entrada »

Clasificado bajo: jQuery, PHP | 50 comentarios »

Para este tutorial utilizaremos el conocimiento adquirido en el tutorial anterior http://prodev.cl/2009/01/como-agregar-filas-rows-tabla-dinamicamente-mediante-xajax/ .
Lo que haremos será guardar los datos necesarios en campos ocultos y luego rescatarlos desde xajax y enviarlos a una función en PHP que los guarde en una Base de Datos.

Para comenzar, debemos modificar el código anterior y agregar en campos ocultos los valores extraídos del formulario añadiendo al nombre el número de línea al que corresponde el detalle de la siguiente manera:

hdn(nombreCampo)_(numeroLinea)

por lo que nuestro código quedaría de la siguiente forma:

$id_campos = $cant_campos = $num_campos+1;
	$str_html_td1 = $txtNombre . '
<input type="hidden" id="hdnNombre_' . $id_campos . '" name="hdnNombre_' . $id_campos . '" value="' . $txtNombre . '"/>' ;
    $str_html_td2 = "$txtEdad" . '
<input type="hidden" id="hdnEdad_' . $id_campos . '" name="hdnEdad_' . $id_campos . '" value="' . $txtEdad . '"/>' ;
    $str_html_td3 = "$txtDireccion" . '
<input type="hidden" id="hdnDireccion_' . $id_campos . '" name="hdnDireccion_' . $id_campos . '" value="' . $txtDireccion . '"/>' ;
    $str_html_td4 = "$selSexo" . '
<input type="hidden" id="hdnSexo_' . $id_campos . '" name="hdnSexo_' . $id_campos . '" value="' . $selSexo . '"/>' ;
    $str_html_td5 = "$selEstCivil" . '
<input type="hidden" id="hdnEstCivil_' . $id_campos . '" name="hdnEstCivil_' . $id_campos . '" value="' . $selEstCivil . '"/>' ;
    $str_html_td6 = '<img src="images/delete.png" width="16" height="16" alt="Eliminar" onclick="if(confirm(\'Realmente desea eliminar este detalle?\')){xajax_eliminarFila('. $id_campos .', proyecto.cant_campos.value);}"/>';

Leer el resto de la entrada »

Clasificado bajo: PHP, xajax | 44 comentarios »

Xajax se ha vuelto parte de mi trabajo a lo largo de este ya casi año de vida laboral, por lo que mi experiencia, aunque poca, ha ido evolucionando poco a poco. Si me hubieran preguntado como hacer para añadir una fila a una tabla les habria dicho que no se podía o que mejor agregaran una tabla completa mediante el comando addAssign. Hoy, con un poco más de experiencia, les mostraré como podemos agregar el número de filas y campos que queramos a una tabla.
El proceso es simple, iremos creando las etiquetas o tags HTML según su jerarquía y le iremos añadiendo dentro el contenido que corresponda. Para esto utilizaremos los comandos addCreate que crea nuevas etiquetas HTML, y addAssign que como ya deberían saber, agrega o inserta en el atributo indicado el valor que le pasemos por parametro. Primero crearemos el tag tr y luego cada uno de los tags td que necesitemos, para así, en ultima instancia, asignar el contenido de cada campo.

Veamos como quedaría nuestra función PHP agregaFila()

Leer el resto de la entrada »

Clasificado bajo: PHP, xajax | 69 comentarios »

jQuery en una librería javascript que nos permite hacer cosas muy interesantes de manera muy secilla. Además tiene un repositorio de plugins con muchas cosas ya escritas que solo hace falta utilizarlas.

Al igual que en el tutorial Como crear combo box dinámico con xajax la idea aquí es la misma, con la diferencia que podemos hacerlo con otro lenguaje que no sea PHP como por ejemplo ASP o CGI utilizar otros como C a través de CGI. Se trata de generar el codigo HTML del select e insertarlo en un DIV preestablecido al generar un evento en nuestro código.

A diferencia de xajax, en el cual llamabamos a una función específica dentro de nuestro código PHP, aquí se llama a un archivo completo, por lo que debemos crear un mecanismo para diferenciar a que función queremos que se acceda cada vez que se llame dinámicamente nuestro archivo. esto puede hacerse a través de condiciones “IF” o “switch – case”.

Leer el resto de la entrada »

Clasificado bajo: JavaScript, jQuery, PHP | 22 comentarios »

En la primera parte de este tutorial de Como crear combo box dinámico con xajax mostré como crear los combobox o select dinamicos dependientes. Ahora, que pasa si yo quiero hacer un select dinamico dependiente de otro select, que a su vez, es dependiente de otro select, o sea select dependientes com más de un nivel.

Leer el resto de la entrada »

Clasificado bajo: PHP, xajax | 5 comentarios »