ProDev http://prodev.cl Ingeniería Informática Fri, 02 Oct 2009 15:56:26 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Como agregar filas o rows a una tabla dinamicamente mediante jQuery http://feedproxy.google.com/~r/Prodev/~3/WUpu9aMJ_NY/ http://prodev.cl/2009/09/como-agregar-filas-o-rows-a-una-tabla-dinamicamente-mediante-jquery/#comments Wed, 09 Sep 2009 20:04:00 +0000 eALL http://prodev.cl/?p=158

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>';

Una vez hecho esto procedemos a agregar la fila al formulario y luego le asignamos el HTML creado anteriormente

		var strHtmlTr = "<tr id='rowDetalle_" + oId + "'></tr>";
        	var strHtmlFinal = strHtml1 + strHtml2 + strHtml3 + strHtml4 + strHtml5 + strHtml6;
		$("#tbDetalle").append(strHtmlTr);
		$("#rowDetalle_" + oId).html(strHtmlFinal);

y para eliminar una fila

	function eliminarFila(oId){
	    $("#rowDetalle_" + oId).remove();	
		return false;
	}

Muy sencillo y no requiere grandes conocimiento en ningún lenguaje en particular.
Espero le sea de ayuda y recuerden que estoy atento a sus comentarios.

Este ejemplo lo puedes ver en el siguiente enlace:

Ver Ejemplo ejemplo funcionando de Agregar Filas con JavaScript

Tambien puedes decargar estos ejemplos:

Ver Ejemplo archivos de Agregar Filas con JavaScript
Si te gustó o te sirvió, ya sabes que hacer ;-)
]]> http://prodev.cl/2009/09/como-agregar-filas-o-rows-a-una-tabla-dinamicamente-mediante-jquery/feed/ 2 http://prodev.cl/2009/09/como-agregar-filas-o-rows-a-una-tabla-dinamicamente-mediante-jquery/ Como agregar filas o rows a una tabla dinamicamente mediante javaScript http://feedproxy.google.com/~r/Prodev/~3/23d6tFP9kSw/ http://prodev.cl/2009/09/como-agregar-filas-o-rows-a-una-tabla-dinamicamente-mediante-javascript/#comments Thu, 03 Sep 2009 19:55:23 +0000 eALL http://prodev.cl/?p=154

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á.

La solución es muy similar a la anterior. Se crea una fila mediante el comando createElement y luego se añade al DOM mediante appendChild. Por supuesto he agregado un control de filas para poder eliminar una fila desde cualquier posición.
un ejemplo de lo que digo es el siguiente:

function agregarFila(obj){
	obj.value = parseInt(obj.value) + 1;  //aumentamos el id de los campos
	var oId = obj.value;
//esto hay que hacerlo para cada campo.
	var nombre = document.getElementById("txtNombre");  //uno de los campos
	var strHtml1 = nombre.value + '
<input id="hdnNombre_' + oId + '" name="hdnNombre_' + oId + '" type="hidden" value="' + nombre.value + '" />' ; // html a agregar
	var objTr = document.createElement("tr");  //se crea una fila
	objTr.id = "rowDetalle_" + oId;  //asignamos una id para manipularlo despues.
	var objTd1 = document.createElement("td");  //creamos cada td
	objTd1.id = "tdDetalle_1_" + oId;  //asignamos una id
	objTd1.innerHTML = strHtml1;  // asignamos el html al td
	objTr.appendChild(objTd1); // agregamos el td a la fila
	var objTbody = document.getElementById("tbDetalle");  //Seleccionamos el contenedor de las filas
	objTbody.appendChild(objTr); // agregamos la fila al contenedor
	return false;	//evita que haya un submit por equivocacion.
}

Para eliminar una de las filas el proceso es algo similar aunque no por ello más complicado. Se debe seleccionar el objeto a eliminar, averiguar su pardre y decirle a este que elimine el objeto deseado mediante el metodo removeChild. veamos como se hace

function cancelar(){
	var obj = document.getElementById('tbDetalle');
	var objPadre = obj.parentNode;
	objPadre.removeChild(obj);
	obj = document.createElement("tbody");
	obj.id = 'tbDetalle';
	objPadre.appendChild(obj);
	return false;
}

Espero que les sirva y que lo puedan utilizar. Si se les ocurre alguna mejora, o quieren comentar algo, solo haganlo.

Este ejemplo lo puedes ver en el siguiente enlace:

Ver Ejemplo ejemplo funcionando de Agregar Filas con JavaScript

Tambien puedes decargar estos ejemplos:

Ver Ejemplo archivos de Agregar Filas con JavaScript
Si te gustó o te sirvió, ya sabes que hacer ;-)
]]> http://prodev.cl/2009/09/como-agregar-filas-o-rows-a-una-tabla-dinamicamente-mediante-javascript/feed/ 2 http://prodev.cl/2009/09/como-agregar-filas-o-rows-a-una-tabla-dinamicamente-mediante-javascript/ Actualizando Wordpress http://feedproxy.google.com/~r/Prodev/~3/TsbpsBRuvS4/ http://prodev.cl/2009/07/actualizando-wordpress/#comments Thu, 23 Jul 2009 12:29:27 +0000 eALL http://prodev.cl/?p=150

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.

]]> http://prodev.cl/2009/07/actualizando-wordpress/feed/ 0 http://prodev.cl/2009/07/actualizando-wordpress/ Como utilizar autocompletex (suggest) de jQuery y no morir en el intento. http://feedproxy.google.com/~r/Prodev/~3/13mLHOqJ5Q0/ http://prodev.cl/2009/04/como-utilizar-autocompletex-suggest-de-jquery-y-no-morir-en-el-intento/#comments Mon, 13 Apr 2009 19:27:00 +0000 eALL http://prodev.cl/?p=138

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
        })

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

Las acciones a realizar una vez devuelto los valores:

        result(function(event, data, formatted) {
            $('#txtNombre').val(data[1]);
            $('#txtEdad').val(data[2]);
            $('#txtDireccion').val(data[3]);
            $('#selSexo').val(data[4]);
            $('#selEstCivil').val(data[5]);
        });

La llamada completa desde jQuery es:

<script type="text/javascript" >
 
$(document).ready(function(){
 
        $('#txtNombre').autocomplete('search.php?tip=a&opt=1', {
            width: 260,
            selectFirst: false
        }).result(function(event, data, formatted) {
            $('#txtNombre').val(data[1]);
            $('#txtEdad').val(data[2]);
            $('#txtDireccion').val(data[3]);
            $('#selSexo').val(data[4]);
            $('#selEstCivil').val(data[5]);
        });
});
</script>

Como ves, los limites pueden crecer al limite de tu imaginación. Solo hay que saber como organizar los datos y presentarlos en tu formulario.

Espero que les sirva.

Disfrútenlo y cualquier duda o comentario no teman en escribir.

Éxito.


Este ejemplo lo puedes ver en el siguiente enlace:

Ver Ejemplo ejemplo funcionando de Como utilizar autocompletex (suggest) de jQuery y no morir en el intento.

Tambien puedes decargar estos ejemplos:

Ver Ejemplo archivos de Como utilizar autocompletex (suggest) de jQuery y no morir en el intento.
Si te gustó o te sirvió, ya sabes que hacer ;-)
]]> http://prodev.cl/2009/04/como-utilizar-autocompletex-suggest-de-jquery-y-no-morir-en-el-intento/feed/ 37 http://prodev.cl/2009/04/como-utilizar-autocompletex-suggest-de-jquery-y-no-morir-en-el-intento/ Guardar en Base de Datos las filas agregadas dinamicamente con xajax http://feedproxy.google.com/~r/Prodev/~3/kTDnys7ten4/ http://prodev.cl/2009/03/guardar-datos-en-base-de-datos-las-filas-agregadas-dinamicamente-con-xajax/#comments Wed, 11 Mar 2009 00:01:26 +0000 eALL http://prodev.cl/?p=114

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);}"/>';

Además debemos agregar un campo oculto que contenga el número de línea correspondiente y le damos el nombre hdnIdCampos[] esto hará que se cree un arreglo de inputs llamados “hdnIdCampos” los cuales accederemos desde PHP. Lo podemos agregar a la última línea.

$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);}"/>';
    $str_html_td6 .= '
<input type="hidden" id="hdnIdCampos_'. $id_campos .'" name="hdnIdCampos[]" value="'. $id_campos .'" />

Aquí podemos ver el HTML generado dinámicamente por nuestra aplicación.

<table id="tblDetalle" class="listado" width="100%">
<tbody id="tbDetalle">
<tr id="rowDetalle_0">
<th id="tdDetalle_01">Nombre</th>
<th id="tdDetalle_02">Edad</th>
<th id="tdDetalle_03">Direccion</th>
<th id="tdDetalle_04">Sexo</th>
<th id="tdDetalle_05">Estado Civil</th>
<th id="tdDetalle_06">Eliminar</th>
</tr>
<tr id="rowDetalle_1">
<td id="tdDetalle_11">eall
<input id="hdnNombre_1" name="hdnNombre_1" value="eall" type="hidden"></td>
<td id="tdDetalle_12">25
<input id="hdnEdad_1" name="hdnEdad_1" value="25" type="hidden"></td>
<td id="tdDetalle_13">mi casa
<input id="hdnDireccion_1" name="hdnDireccion_1" value="mi casa" type="hidden"></td>
<td id="tdDetalle_14">Hombre
<input id="hdnSexo_1" name="hdnSexo_1" value="Hombre" type="hidden"></td>
<td id="tdDetalle_15">Soltero
<input id="hdnEstCivil_1" name="hdnEstCivil_1" value="Soltero" type="hidden"></td>
<td id="tdDetalle_16"><img src="images/delete.png" alt="Eliminar" onclick="if(confirm('Realmente desea eliminar este detalle?')){xajax_eliminarFila(1, proyecto.cant_campos.value);}" height="16" width="16">
<input id="hdnIdCampos_1" name="hdnIdCampos[]" value="1" type="hidden"></td>
</tr>
</tbody>
</table>

Lo que sigue es crea una función que tome los valores de cada una de las filas o rows agregados y los guarde en la Base de Datos. Para esto aprovecharemos la bondad de PHP que nos permite tener arreglos con índices de tipo string y, construiremos los índices tomando el nombre del campo más el número de línea que guardamos en “hdnIdCampos”.

function guardar($formulario){
//comentaré todo lo que tenga que ver con la Base de Datos
    $flag = 0;
    extract($formulario);
    $respuesta = new xajaxResponse();
//    $conn = new conexionBD ( ); //Genera una nueva coneccion
//	$conn->EjecutarSQL("BEGIN TRANSACTION A1");
 
    foreach($hdnIdCampos as $id){      // Así recorro cada campo en cada linea
//	Guardo la consulta en una cadena
        $Str_SQL = "INSERT INTO PERSONAS(
                        NOMBRE, EDAD, DIRECCION,
                        SEXO, ESTCIVIL)
                        VALUES(
                        " . $formulario['hdnNombre_' . $id] . ", " . $formulario['hdnEdad_' . $id] . ", " . $formulario['hdnDireccion_' . $id] . ",
                        " . $formulario['hdnSexo_' . $id] . ", ". $formulario['hdnEstCivil_' . $id] . ")";
 
//        if(!$conn->EjecutarSQL($Str_SQL)){  //CONTROL DE ERRORES.  muy importante, si no guarda uno, no guarda nada.
//            $conn->EjecutarSQL("ROLLBACK TRANSACTION A1");
//            $flag = 1;
//            $MSG = "Ha ocurrido un error al insertar los datos de la persona.\nPor favor, intentelo nuevamente.";
//        }
    $respuesta->addAlert($Str_SQL);
	}
    if($flag == 0){
//		$conn->EjecutarSQL("COMMIT TRANSACTION A1");
		$MSG = "Datos guardados con exito";
	}
 
    $respuesta->addAlert($MSG);
    return $respuesta;
 
}

Si bien puede que no sea la mejor forma de realizarlo pero es lo mejor que se me ocurrió y lo más importante es que funciona.

Espero que les sirva.

Disfrútenlo y cualquier duda o comentario no teman en escribir.

Éxito.


Este ejemplo lo puedes ver en el siguiente enlace:

Ver Ejemplo ejemplo funcionando de Guardar en Base de Datos las Filas agregadas con xajax y PHP

Tambien puedes decargar estos ejemplos:

Ver Ejemplo archivos de Guardar en Base de Datos las Filas agregadas con xajax y PHP
Si te gustó o te sirvió, ya sabes que hacer ;-)
]]> http://prodev.cl/2009/03/guardar-datos-en-base-de-datos-las-filas-agregadas-dinamicamente-con-xajax/feed/ 34 http://prodev.cl/2009/03/guardar-datos-en-base-de-datos-las-filas-agregadas-dinamicamente-con-xajax/ Como agregar filas o rows a una tabla dinamicamente mediante xajax http://feedproxy.google.com/~r/Prodev/~3/CC7USS5O-ms/ http://prodev.cl/2009/01/como-agregar-filas-rows-tabla-dinamicamente-mediante-xajax/#comments Tue, 20 Jan 2009 23:11:43 +0000 eALL http://prodev.cl/?p=104

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()

function agregarFila($formulario){
    $respuesta = new xajaxResponse();
	extract($formulario);
	$id_campos = $cant_campos = $num_campos+1;
	$str_html_td1 = "$txtNombre" ;
    $str_html_td2 = "$txtEdad";
    $str_html_td3 = "$txtDireccion";
    $str_html_td4 = "$selSexo";
    $str_html_td5 = "$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);}"/>';
 
	if($num_campos == 0){ // creamos un encabezado de lo contrario solo agragamos la fila
		$respuesta->addCreate("tbDetalle", "tr", "rowDetalle_0");
        $respuesta->addCreate("rowDetalle_0", "th", "tdDetalle_01");    //creamos los campos
        $respuesta->addCreate("rowDetalle_0", "th", "tdDetalle_02");
        $respuesta->addCreate("rowDetalle_0", "th", "tdDetalle_03");
        $respuesta->addCreate("rowDetalle_0", "th", "tdDetalle_04");
        $respuesta->addCreate("rowDetalle_0", "th", "tdDetalle_05");
        $respuesta->addCreate("rowDetalle_0", "th", "tdDetalle_06");
 
        $respuesta->addAssign("tdDetalle_01", "innerHTML", "Nombre");   //asignamos el contenido
        $respuesta->addAssign("tdDetalle_02", "innerHTML", "Edad");
        $respuesta->addAssign("tdDetalle_03", "innerHTML", "Direccion");
        $respuesta->addAssign("tdDetalle_04", "innerHTML", "Sexo");
        $respuesta->addAssign("tdDetalle_05", "innerHTML", "Estado Civil");
        $respuesta->addAssign("tdDetalle_06", "innerHTML", "Eliminar");
	}
    $idRow = "rowDetalle_$id_campos";
    $idTd = "tdDetalle_$id_campos";
	$respuesta->addCreate("tbDetalle", "tr", $idRow);
    $respuesta->addCreate($idRow, "td", $idTd."1");     //creamos los campos
    $respuesta->addCreate($idRow, "td", $idTd."2");
    $respuesta->addCreate($idRow, "td", $idTd."3");
    $respuesta->addCreate($idRow, "td", $idTd."4");
    $respuesta->addCreate($idRow, "td", $idTd."5");
    $respuesta->addCreate($idRow, "td", $idTd."6");
/*
 *     Esta parte podria estar dentro de algun ciclo iterativo  */
 
    $respuesta->addAssign($idTd."1", "innerHTML", $str_html_td1);   //asignamos el contenido
    $respuesta->addAssign($idTd."2", "innerHTML", $str_html_td2);
    $respuesta->addAssign($idTd."3", "innerHTML", $str_html_td3);
    $respuesta->addAssign($idTd."4", "innerHTML", $str_html_td4);
    $respuesta->addAssign($idTd."5", "innerHTML", $str_html_td5);
    $respuesta->addAssign($idTd."6", "innerHTML", $str_html_td6);
 
/*  aumentamos el contador de campos  */
 
	$respuesta->addAssign("num_campos","value", $id_campos);
	$respuesta->addAssign("cant_campos" ,"value", $id_campos);
	return $respuesta;
}

El HTML para esta aplicacion:

<form name="proyecto" id="proyecto" action="" method="post">
<input type="hidden" id="num_campos" name="num_campos" value="0" />
<input type="hidden" id="cant_campos" name="cant_campos" value="0" />
<div id="cont" class="container">
<fieldset>
	<legend>El formulario</legend>
<div class="top">
	<label class="label" for="txtNombre">Nombre:</label>
<div class="div_texbox">
<input type="text" id="txtNombre" name="txtNombre" value="" class="textbox" /></div>
 
        <label class="label" for="txtEdad">Edad:</label>
<div class="div_texbox">
<input type="text" id="txtEdad" name="txtEdad" value="" class="textbox txtUser" /></div>
 
        <label class="label" for="txtDireccion">Direccion:</label>
<div class="div_texbox">
<input type="text" id="txtDireccion" name="txtDireccion" value="" class="textbox txtCmt" /></div>
 
        <label class="label" for="selSexo">Sexo:</label>
<div class="div_texbox">
<select id="selSexo" name="selSexo" class="textbox txtFec">
                <option value="-">Seleccione</option>
                <option value="Hombre">Hombre</option>
                <option value="Mujer">Mujer</option>
            </select>
</div>
 
        <label class="label" for="selEstCivil">Estado Civil:</label>
<div class="div_texbox">
<select id="selEstCivil" name="selEstCivil" class="textbox txtFec">
                <option value="-">Seleccione</option>
                <option value="Soltero">Soltero</option>
                <option value="Casado">Casado</option>
                <option value="Viudo">Viudo</option>
            </select>
</div>
</div>
 
</fieldset>
<div class="button_div">
<input type="reset" id="btnCancel" name="btnCancel" value="Cancelar" class="buttons_CANCEL" onclick="xajax_cancelar();" />
<input type="button" id="btnAgregar" name="btnAgregar" value="Agregar Persona" class="buttons_aplicar" onclick="xajax_agregarFila(xajax.getFormValues('proyecto'));" />
</div>
 
<fieldset class="fieldset">
    <legend class="legend">
        Detalle de Personas
    </legend>
<div class="clear"></div>
<div id="form3" class="form-horiz">
<table width="100%" id="tblDetalle" class="listado">
<tbody id="tbDetalle"></tbody>
</table>
</div>
 
</fieldset>
</div>
</form>

Y como sabroso entremes, le traemos… la función que elimina las filas agregadas por la función anterior.

function eliminarFila($id_campo, $cant_campos){
	$respuesta = new xajaxResponse();
	$respuesta->addRemove("rowDetalle_$id_campo"); //borro el detalle que indica el parametro id_campo
	-- $cant_campos; //Resto uno al numero de campos y si es cero borro todo
	if($cant_campos == 0){
		$respuesta->addRemove("rowDetalle_0");
		$respuesta->addAssign("num_campos", "value", "0"); //dejo en cero la cantidad de campos para seguir agregando si asi lo desea el usuario
		$respuesta->addAssign("cant_campos", "value", "0");
	}
    $respuesta->addAssign("cant_campos", "value", $cant_campos);
	return $respuesta;
}

Así de facil y bonito es agregar filas a las tablas dinamicamente usando xajax… las opciones son muchas y las dejo a su imaginación o necesidad…
Espero les sirva y cualquier duda o comentario responderé a la brevedad.
Adios.

Este ejemplo lo puedes ver en el siguiente enlace:

Ver Ejemplo ejemplo funcionando de Agregar Filas con xajax y PHP

Tambien puedes decargar estos ejemplos:

Ver Ejemplo archivos de Agregar Filas con xajax y PHP
Si te gustó o te sirvió, ya sabes que hacer ;-)
]]> http://prodev.cl/2009/01/como-agregar-filas-rows-tabla-dinamicamente-mediante-xajax/feed/ 56 http://prodev.cl/2009/01/como-agregar-filas-rows-tabla-dinamicamente-mediante-xajax/ Como crear combo box o select dinámico con jQuery http://feedproxy.google.com/~r/Prodev/~3/9KlvOL53AKk/ http://prodev.cl/2008/11/como-crear-combo-box-o-select-dinamico-con-jquery/#comments Mon, 10 Nov 2008 19:20:37 +0000 eALL http://prodev.cl/?p=94

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”.

Primero debemos descargar la librería desde su página de descarga e incluirla en nuestro archivo HTML al igual que cualquier librería javascript.

<script src="js/jquery.js" type="text/javascript"></script>

luego generamos nuestro primer select (el estático) que filtrará los resultados de nuestro segundo select (el dinámico) dentro de un DIV con un id específico.

<div class="div_texbox" id="divSelMeses">
<select name="selMeses" id="selMeses" class="textbox">
  <option value="0">-Mes-</option>
  <option value="1">Enero</option>
  <option value="2">Febrero</option>
  <option value="3">Marzo</option>
  <option value="4">Abril</option>
  <option value="5">Mayo</option>
  <option value="6">Junio</option>
  <option value="7">Juilo</option>
  <option value="8">Agosto</option>
  <option value="9">Septiembre</option>
  <option value="10">Octubre</option>
  <option value="11">Novienbre</option>
  <option value="12">Diciembre</option>
 </select>
</div>
<div class="div_texbox" id="divSelDias">
<select name="selDias" class="textbox" onChange="">
  <option value="0">-Día-</option>
 </select>
</div>

Hecho esto, crearemos nuestro script PHP (o el lenguaje que ustedes deseen) que genere nuestro select dinamico.
Como dije al principio se debe crear una condición para saber a que parte del código dirigirnos si es que queremos utilizar nuestro archivo en más de una ocación con más de una función dentro. Esto lo haremos recibiendo, en este caso, variables mediante el metodo POST.

function obtieneDias($mes){
 $valorAAsignar = ""; //indicamos el nuevo valor que este tendrá. Cadena HTML
//obtengo el ultimo día del mes para generar las opciones del selector.
 $ultimoDiaMes = date("t m", mktime(0, 0, 0, $mes, 1, date("y")));
 $valorAAsignar = "
<select name='selDias' class='textbox' onChange=''><option value='0'>-Día-</option>";
 for($i = 1; $i <= $ultimoDiaMes; $i++){
  $valorAAsignar .= "<option value='$i'> $i </option>";
 }
 $valorAAsignar .= "</select>
 
";
 echo $valorAAsignar; //se 'imprime' el HTML para que sea tomado por la funcion load
}

Lo siguiente es crear nuestra función javascript basada en jQuery. Para ello utilizaremos la función load que nos permite llamar a un archivo mandando parametros mediante el método POST. la función increiblemente secilla es esta:

<script type="text/javascript">
 $(document).ready(function(){ //así es como se crean las funciones jQuery. solo cree
  $("#selMeses").change(function(){ //se ejecuta con el evento onChange
   var varMes = $(this).val()  //Devuelve el valor del campo, en este caso el select estatico
   $("#divSelDias").load("generaHTML.php", {paramTipo : 1, paramMes : varMes}); //paramTipo es el parametro pasado por metodo POST
  });//change
});//ready
</script>

Esta pequeña función nos sirve para incluir cualquier elemento HTML dentro de nuestra página dinamicamente.

Este ejemplo lo puedes ver en el siguiente enlace:

Ver Ejemplo ejemplo funcionando de select dependientes con jQuery

Tambien puedes decargar estos ejemplos:

Ver Ejemplo archivos de select dependientes con jQuery
Si te gustó o te sirvió, ya sabes que hacer ;-)
]]> http://prodev.cl/2008/11/como-crear-combo-box-o-select-dinamico-con-jquery/feed/ 17 http://prodev.cl/2008/11/como-crear-combo-box-o-select-dinamico-con-jquery/ Como crear combo box o select dinámico con xajax parte II http://feedproxy.google.com/~r/Prodev/~3/ebMKj9xTs18/ http://prodev.cl/2008/11/como-crear-combo-box-o-select-dinamico-con-xajax-parte-ii/#comments Thu, 06 Nov 2008 18:56:41 +0000 eALL http://prodev.cl/?p=76

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.

La logica es sencilla. Lo primero que hay que hacer es conservar la estructura del ejemplo anterior y añadir un nuevo select que filtre los resultados del segundo. Yo elegí que el primer select fueran las estaciones del año, ya saben, verano, invierno, otroño y promavera.
Pues bien, como cada estación del año abarca practicamente 3 meses cada una (sin tomar en cuenta los ultimos dias cuando cambia la estación), por lo tanto, cada vez que seleccionemos una estación, mi select mostrará los meses con los que se compone la estación seleccionada (Primer nivel de dependencia). Luego, al seleccionar alguno se los meses filtrados, se llenará el tercer combo con los dias que ese mes tiene (Segundo nivel de dependencia).

Para logar que cada select rellene el siguiente select, debemos crear una funcion xajax para cada uno e indicarle al selecet que cuando selecciones una opción (onChange) llame a nuestra función.

Los select quedarían así:

<select name="selMeses" class="textbox" onChange="xajax_obtieneMeses(this.value)">
  <option value="0">-Estación-</option>
  <option value="1">Verano</option>
  <option value="2">Otoño</option>
  <option value="3">Invierno</option>
  <option value="4">Primavera</option>
</select>
function obtieneMeses($estacion){
  $respuesta = new xajaxResponse(); //Creamos el objeto xajax
  $inputDestino = "divSelMes";			//indicamos el ID del tag HTML de destino. en este caso el DIV que contiene el selector
  $propiedadInputDestino = "innerHTML";	//indicamos la propiedad que deseamos que se modifique. Colocaremos el selector dentro del DIV
  $valorAAsignar = "";				//indicamos el nuevo valor que este tendrá. Cadena HTML
  switch ($estacion){ //genero el array de meses dependiendo de la estación seleccionda
    case 1:
      $array_estacion = array("Enero", "Febrero", "Marzo");
      break;
    case 2:
      $array_estacion = array("Abril", "Mayo", "Junio");
      break;
    case 3:
      $array_estacion = array("Julio", "Agosto", "Septiembre");
      break;
    case 4:
      $array_estacion = array("Octubre", "Noviembre", "Diciembre");
      break;
  }
  $valorAAsignar = "
<select name='selMes' class='textbox' onChange='xajax_obtieneDias(this.value)'><option value='0'>-Mes-</option>";
  $i = $estacion; //parto desde la estación seleccionada
  foreach($array_estacion as $est){
    $valorAAsignar .= "<option value='$i'> $est </option>";
    $i++;
  }
  $valorAAsignar .= "</select>
 
";
  $respuesta->addAssign($inputDestino, $propiedadInputDestino, $valorAAsignar);
  return $respuesta;
}

Otra cosa interesante que podemos desear hacer es un select dinamico que dependa de otros 2 select no anidados, o sea, que sean independientes el uno del otro.
En este caso, lo que debemos hacer es llamar a la funcion que genera el select desde los otros 2 select de los cuales depende el primero, verificando, eso si, que ambos select tienen datos, ya que si falta algun dato puede que nos devuelva información errornea, en el mejor de los casos, o que nuestro programa se caiga.

El codigo es el que sigue:

El HTML

<select name="selAno" class="textbox" onChange="javascript: if(document.proyecto.selMeses.value != 0){xajax_obtieneDias(document.proyecto.selMeses.value, this.value);}">
  <option value="0">-Año-</option>
<?
  for($i = 1990; $i <= 2010; $i++){
?>
    <option value="<? echo $i ?>"><? echo $i ?></option>
<?
  }
?>
</select>
<select name="selMeses" class="textbox" onChange="javascript: if(document.proyecto.selAno.value == 0){alert('Debe seleccionar el año.');}else{xajax_obtieneDias(this.value, document.proyecto.selAno.value);}">
  <option value="0">-Mes-</option>
  <option value="1">Enero</option>
  <option value="2">Febrero</option>
  <option value="3">Marzo</option>
  <option value="4">Abril</option>
  <option value="5">Mayo</option>
  <option value="6">Junio</option>
  <option value="7">Juilo</option>
  <option value="8">Agosto</option>
  <option value="9">Septiembre</option>
  <option value="10">Octubre</option>
  <option value="11">Novienbre</option>
  <option value="12">Diciembre</option>
</select>

El PHP

function obtieneDias($mes, $ano){
  $respuesta = new xajaxResponse(); //Creamos el objeto xajax
  $inputDestino = "divSelDias";			//indicamos el ID del tag HTML de destino. en este caso el DIV que contiene el selector
  $propiedadInputDestino = "innerHTML";	//indicamos la propiedad que deseamos que se modifique. Colocaremos el selector dentro del DIV
  $valorAAsignar = "";				//indicamos el nuevo valor que este tendrá. Cadena HTML
  //obtengo el ultimo día del mes para generar las opciones del selector.
  $ultimoDiaMes = date("t", mktime(0, 0, 0, $mes, 1, $ano));
  $valorAAsignar = "
<select name='selDias' class='textbox' onChange=''><option value='0'>-Día-</option>";
  if($mes != 0){
    for($i = 1; $i <= $ultimoDiaMes; $i++){
      $valorAAsignar .= "<option value='$i'> $nomDia </option>";
      $nomDia = date("D, d", mktime(0, 0, 0, $mes, $i, $ano));;
    }
  }
  $valorAAsignar .= "</select>
 
";
  $respuesta->addAssign($inputDestino, $propiedadInputDestino, $valorAAsignar);
  return $respuesta;
}

Ambos ejemplos los puedes ver en los siguientes enlace:

Ver Ejemplo ejemplo funcionando de select dependiente de select relacionados (1° caso)
ejemplo funcionando deselect dependiente de select relacionados (2° caso)

Tambien puedes decargar estos ejemplos:

Ver Ejemplo archivos de select dependiente de select relacionados (1° caso)
archivos de select dependiente de select relacionados (2° caso)
Si te gustó o te sirvió, ya sabes que hacer ;-)
]]> http://prodev.cl/2008/11/como-crear-combo-box-o-select-dinamico-con-xajax-parte-ii/feed/ 2 http://prodev.cl/2008/11/como-crear-combo-box-o-select-dinamico-con-xajax-parte-ii/ Como agregar imagen de precarga con xajax http://feedproxy.google.com/~r/Prodev/~3/HsZjbQkvFjU/ http://prodev.cl/2008/11/como-agregar-imagen-de-precarga-con-xajax/#comments Wed, 05 Nov 2008 17:19:27 +0000 eALL http://prodev.cl/?p=69

Cada vez que generamos una llamada a una metodo xajax se genera un tiempo de espera que es inperceptible para el usuario, lo que muchas veces hace que este vuelva a generar acciones que pueden acabar en consecuencias desagradables para nosotos. Esto se puede evitar indicando al usuario que el sistema está “Trabajando” o está “Cargando”.
El proceso es bastante sencillo, cuando xajax envia una petición llama a un metodo llamado “loadingFunction” y cuando se completa la carga llama al metodo “doneLoadingFunction” por lo que nosotros aprovecharemos estos eventos para generar nuestro mensaje “Cargando…”.Para empesar debemos crear un div en nuestro código HTML en donde queremos que se muestre nuestro mensaje de carga y lo dejaremos invisible. Luego dentro del div, al cual obviamente le asignamos una ID, colocamos la tipica imagen de precarga que sea de nuestro agrado. Pueden obtener algunas desde http://www.loadinfo.net/ o http://www.ajaxload.info/ .
Nuestro div quedaría como este:

<div id="loading" style="display:none">
  <img src="../images/load.gif" align="absmiddle" alt="Cargando...">
</div>

Luego le indicamos al metodo xajax que cuando se ejecute llame a una funcion nuestra, la cual hará visible u ocultará el div que contiene la imagen. las funciones quedarán como sigue:

<script type="text/javascript">
<!--
xajax.loadingFunction = function(){xajax.$('loading').style.display='block';}; //creamos la función que se llamará cuando comience la carga.
function hideLoadingMessage() //creamos la función que se ejecutará cuando acabe la carga.
{
  xajax.$('loading').style.display = 'none';
}
xajax.doneLoadingFunction = hideLoadingMessage;
--></script>

Ahora es cosa de probar que tal quedó.

Los creditos no son para mi, solo que no recuerdo de donde lo saque. :P

Este ejemplo lo puedes ver en el siguiente enlace:

Ver Ejemplo ejemplo funcionando de Como agregar imagen de precarga con xajax

Tambien puedes decargar estos ejemplos:

Ver Ejemplo archivos de Como agregar imagen de precarga con xajax
Si te gustó o te sirvió, ya sabes que hacer ;-)
]]> http://prodev.cl/2008/11/como-agregar-imagen-de-precarga-con-xajax/feed/ 3 http://prodev.cl/2008/11/como-agregar-imagen-de-precarga-con-xajax/ Como crear combo box dinámico con xajax http://feedproxy.google.com/~r/Prodev/~3/somyT2dH6o0/ http://prodev.cl/2008/10/como-crear-combo-box-dinamico-con-xajax/#comments Thu, 30 Oct 2008 18:28:26 +0000 eALL http://prodev.cl/?p=48

Una de las tareas típicas de un programador es crear comos dinámicos o dependientes. Para esta tarea habia que nesesariamente recargar la pagina. Gracias a la tecnología Ajax eso es parte de la historia.
En este articulo esplicaré como hacerlo mediante la libreria xajax.
Básicamente lo que haremos será llamar a nuestra función PHP mediante xajax y generaremos el código HTML que incrustaremos en una etiqueta div.

Lo primero que debemos hacer es incluir todas las librerias necesaria y crear las instrucciones que harán que xajax funciones correctamente. (encabezados)

1
2
3
4
5
6
7
8
9
10
11

<?php
require_once('xajax/xajax.inc.php'); //incluimos la librelia xajax
/*
     Funciones PHP
*/
$xajax=new xajax(); // Crea un nuevo objeto xajax
$xajax->setCharEncoding("iso-8859-1"); // le indica la codificación que debe utilizar
$xajax->decodeUTF8InputOn(); // decodifica los caracteres extraños
$xajax->registerFunction("obtieneDias"); //Registramos la función para indicar que se utilizará con xajax.
$xajax->processRequests();
?>

En el selector debemos llamar a la función xajax en el evento onChange y pasamos por parametro el numero del mes seleccinado. Además debemos crear un DIV en el cual recepcionar el selector creado dinamicamente. (selector)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<label for="txtDia">Meses</label>
<div class="div_texbox" id="divdia">
<select name="selMeses" class="textbox" onChange="xajax_obtieneDias()">
  <option value="0">-Mes-</option>
  <option value="1">Enero</option>
  <option value="2">Febrero</option>
  <option value="3">Marzo</option>
  <option value="4">Abril</option>
  <option value="5">Mayo</option>
  <option value="6">Junio</option>
  <option value="7">Juilo</option>
  <option value="8">Agosto</option>
  <option value="9">Septiembre</option>
  <option value="10">Octubre</option>
  <option value="11">Novienbre</option>
  <option value="12">Diciembre</option>
</select>
</div>
 
<br>
<label for="txtDia">Dias</label>
<div class="div_texbox" id="divSelDias">
<select name="menu1" class="textbox" onChange="">
  <option value="0">-Día-</option>
</select>
</div>

Ahora creamos la función php que generará los numeros del mes seleccionado y crea un nuevo selector que será insertado en el DIV creado anteriormente. (Funcion PHP)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function obtieneDias($mes){
  $respuesta = new xajaxResponse(); //Creamos el objeto xajax
  $inputDestino = "divSelDias";    //indicamos el ID del tag HTML de destino. en este caso el DIV que contiene el selector
  $propiedadInputDestino = "innerHTML";    //indicamos la propiedad que deseamos que se modifique. Colocaremos el selector dentro del DIV
  $valorAAsignar = "";    //indicamos el nuevo valor que este tendrá. Cadena HTML
  //obtengo el ultimo día del mes para generar las opciones del selector.
  $ultimoDiaMes = date("t", mktime(0, 0, 0, $mes, 1, date("y")));
  $valorAAsignar = "
<select name='selDias' class='textbox' onChange=''>
    <option value='0'>-Día-</option> ";
  for($i = 1; $i <= $ultimoDiaMes; $i++){
    $valorAAsignar .= "<option value='$i'> $i </option>";
  }
  $valorAAsignar .= "</select>
 
";
  $respuesta->addAssign($inputDestino, $propiedadInputDestino, $valorAAsignar);
  return $respuesta;
}

Ahora cada vez que se seleccione un mes, muestra función php generará el selector con el número de días que corresponda.
El ejemplo completo lo vemos a continuación:

PHP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<?php
require_once('xajax/xajax.inc.php'); //incluimos la librelia xajax
function obtieneDias($mes){
  $respuesta = new xajaxResponse(); //Creamos el objeto xajax
  $inputDestino = "divSelDias";//indicamos el ID del tag HTML de destino. en este caso el DIV que contiene el selector
  $propiedadInputDestino = "innerHTML"; //indicamos la propiedad que deseamos que se modifique. Colocaremos el selector dentro del DIV
  $valorAAsignar = "";    //indicamos el nuevo valor que este tendrá. Cadena HTML
  //obtengo el ultimo día del mes para generar las opciones del selector.
  $ultimoDiaMes = date("t", mktime(0, 0, 0, $mes, 1, date("y")));
  $valorAAsignar = "
<select name='selDias' class='textbox' onChange=''>
      <option value='0'>-Día-</option>";
  for($i = 1; $i <= $ultimoDiaMes; $i++){
      $valorAAsignar .= "<option value='$i'> $i </option>";
  }
  $valorAAsignar .= "</select>
 
";
  $respuesta->addAssign($inputDestino, $propiedadInputDestino, $valorAAsignar);
  return $respuesta;
}
$xajax=new xajax();     // Crea un nuevo objeto xajax
$xajax->setCharEncoding("iso-8859-1"); // le indica la codificación que debe utilizar
$xajax->decodeUTF8InputOn();    // decodifica los caracteres extraños
$xajax->registerFunction("obtieneDias"); //Registramos la función para indicar que se utilizará con xajax.
$xajax->processRequests();
?>

HTML

<html>
<meta http-equiv="Pragma"content="no-cache">
<meta http-equiv="expires"content="0">
<head>
<?php $xajax->printJavascript("xajax"); //imprime el codigo javascript necesario para que funcione todo.?>
<link href="CSS/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<form name="proyecto" id="proyecto" action="" method="post">
<div id="cont" class="container">
<fieldset>
  <legend>El formulario</legend>
<div class="top">
  <label for="txtDia">Meses</label>
<div class="div_texbox" id="divdia">
<select name="selMeses" class="textbox" onChange="xajax_obtieneDias(this.value)">
      <option value="0">-Mes-</option>
      <option value="1">Enero</option>
      <option value="2">Febrero</option>
      <option value="3">Marzo</option>
      <option value="4">Abril</option>
      <option value="5">Mayo</option>
      <option value="6">Junio</option>
      <option value="7">Juilo</option>
      <option value="8">Agosto</option>
      <option value="9">Septiembre</option>
      <option value="10">Octubre</option>
      <option value="11">Novienbre</option>
      <option value="12">Diciembre</option>
    </select>
</div>
 
  <br>
  <label for="txtDia">Dias</label>
<div class="div_texbox" id="divSelDias">
<select name="menu1" class="textbox" onChange="">
      <option value="0">-Día-</option>
    </select>
</div>
</div>
 
</fieldset>
</div>
</form>
 
</body>
</html>

Puedes ver un ejemplo funcionando aquí
Puedes descargar este ejemplo aquí

Si te gustó o te sirvió, ya sabes que hacer ;-)

]]> http://prodev.cl/2008/10/como-crear-combo-box-dinamico-con-xajax/feed/ 9 http://prodev.cl/2008/10/como-crear-combo-box-dinamico-con-xajax/