JQuery UI: Como usar el control Tab con MySql

JQuery UI Logo

En esta ocasión quiero presentar a la librería JQuery UI y para esto he diseñado un sencillo ejemplo que básicamente despliega dos tablas de MySql; al dar click en una pestaña (tab) se muestra una tabla, al elegir la otra se muestra el contenido de otra segunda tabla.

¿Que es JQuery UI?

En resumen, JQuery UI es un subconjunto del FrameWork JQuery y fue creado para añadir nuevas y complejas funcionalidades a ésta. Este conjunto de nuevas funcionalidades pueden ser plug-ins, widgets, y efectos visuales (arrastrar, FadeIn, FadeOut, etc.), todos diseñados con la misma filosofía que JQuery; fácil de usar y compatible con los navegadores más populares.

Lo que necesitas para realizar este ejemplo

Para la realizacion de este ejemplo necesitas la siguiente lista de herramientas de desarrollo instaladas en tu computadora. Así que si alguna no la tienes, este el momento ideal para hacerlo:

  • PHP 5 (o superior).
  • Un servidor web (ej. IIS o Apache) que tenga soporte para PHP 5.
  • El FrameWork JQuery.
  • JQuery UI.
  • MySql 5 (o superior).
  • Gusto por aprender.

    • Como puedes ver he puesto un enlace a la página de descarga de cada herramienta. El servidor web puede ser el que tú gustes pero cuida que tenga soporte para reconocer y ejecutar código PHP, en mi caso uso el servidor Apache.

Diseñar la Base de datos en MySql

Para el ejemplo voy a suponer que tenemos una lista de productos organizados en categorías. Es por esto que utilizare una tabla de productos y otra tabla de categorías. Los datos que me interesan guardar sobre los productos son:

  • El nombre del producto.
  • Una breve descripción acerca del producto.
  • La fecha en que caduca el producto.
  • El precio al que se compra con el proveedor.
  • El precio al que se vende al público.
  • La categoría en la que se ha clasificado el producto.

    • Los productos estarán organizados en varias categorías, ejemplos de categorías pueden ser; Carnes frías, Perfumería, Abarrotes, Frituras, etc.
      Para que el ejemplo siga siendo muy sencillo y fácil de entender solo he considerado dos categorías y solamente tendré una lista de 3 productos.

Scripts para crear la base de Datos en MySql

A continuación pongo los scripts que debes usar para crear la base de datos del ejemplo, así como algunas inserciones que he realizado en las dos tablas:

/*Crear la base de datos*/
CREATE DATABASE jquerytabs_mysql;
USE jquerytabs_mysql;

/*Crear la tabla Productos*/
CREATE TABLE tbl_productos(id_producto INT NOT NULL AUTO_INCREMENT,
tx_NombreProducto VARCHAR(50),
tx_Descripcion VARCHAR(500),
dt_FechaCaducidad DATETIME DEFAULT NULL,
mn_PrecioCompra DECIMAL(5,2),
mn_PrecioPublico DECIMAL(5,2),
id_Categoria INT,
primary key(id_producto),
foreign key (id_Categoria) references cta_CategoriasProductos(id_CategoriaProducto)  );
  
/*Crear la tabla de Categorias*/
CREATE TABLE cta_CategoriasProductos(id_CategoriaProducto INT NOT NULL AUTO_INCREMENT,
tx_Nombre VARCHAR(50),
tx_Descripcion VARCHAR(500),
primary key(id_CategoriaProducto) );


/*Insertar 3 Productos de ejemplo*/
INSERT INTO tbl_productos (tx_NombreProducto,tx_Descripcion,dt_FechaCaducidad,mn_PrecioCompra,mn_PrecioPublico,id_Categoria) 
VALUES('Shampoo Ultra humectante','Shampoo caja/2 pzas marca patito','2013-07-04',245.50,315.00,1);

INSERT INTO tbl_productos (tx_NombreProducto,tx_Descripcion,dt_FechaCaducidad,mn_PrecioCompra,mn_PrecioPublico,id_Categoria)
VALUES('Papas refritas','Papas fritas bolsa 150 gr. superpapas','2012-11-22 10:45',3.50,6.50,2);

INSERT INTO tbl_productos (tx_NombreProducto,tx_Descripcion,dt_FechaCaducidad,mn_PrecioCompra,mn_PrecioPublico,id_Categoria)
VALUES('Jabon anti alopecia','Jabon higienico 1 pza 145 gr.','2013-04-16 07:57',8.50,10.50,1);

//Insertar 2 categorias para los productos
INSERT INTO cta_CategoriasProductos(tx_Nombre,tx_Descripcion) 
VALUES('Perfumeria','Todo tipo de productos de limpieza y productos de tocador');

INSERT INTO cta_CategoriasProductos(tx_Nombre,tx_Descripcion) 
VALUES('Frituras','Productos de frituras; palomitas, totopos, etc.');

INSERT INTO cta_CategoriasProductos(tx_Nombre,tx_Descripcion) 
VALUES('Abarrotes','Todo tipo de Productos de abarrotes; enlatados, veladoras, refrescos, etc .');

Con ayuda de algun cliente para MySql como Workbench o el PhpMyAdmin ejecuta los scripts anteriores para recrear la base de datos e insertar los datos de ejemplo. En mi caso he utilizado el Workbench.

Diseño de la pagina web

El diseño es muy sencillo y únicamente consiste de un solo documento HTML en el que se insertara el Widget Tab de JQuery, es muy similar al diseño que muestro a continuación:
Esbozo de la GUI del ejemplo.

Cuando el usuario elija la primera Pestaña se mostrara el contenido de la tabla de productos. En la Pestaña dos se mostrara la tabla de categorías. Existen varias formas de decirle a JQuery de donde debe tomar los datos que mostrara en cada Pestaña, tema que por ahora no tocare para no confundirte. En este caso el contenido de cada pestaña será cargado con ayuda de Ajax.

Vista de la estructura de carpetas y archivos del ejemplo

Para que entiendas mejor los archivos de código fuente que mostrare más adelante, a continuación pongo una imagen donde se observa claramente como he organizado en carpetas los archivos de este ejemplo:
Estructura de carpetas del ejemplo JQuery Tabs

Si observas la imagen te darás cuenta que dentro de la carpeta css hay una carpeta llamada cupertino; este es el nombre del tema que me descargue de JQuery UI, es el que más me gusto (azul claro tipo agua).

El código fuente de estos archivos los iré mostrando uno a uno junto con una breve explicación de la función que tiene cada uno. El orden en que los mostrare es el orden en el que teóricamente el navegador los íra cargando.

El código Fuente de los archivos

Para ver el ejemplo funcionando en el navegador debemos escribir la ruta a la carpeta ejemplo5 que a su vez está dentro de la carpeta jquery, la cual (como se observa en la imagen) es la raíz donde está guardado todo el ejemplo, cuando escribimos dicha URL (http://localhost/jquery/ejemplo5/) en el navegador se desplegara el documento HTML index.html. El código de este archivo lo muestro a continuación:
index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Ejemplo5 con JQuery :: UI Tabs y MySql</title>
	<!--Hoja de estilo-->
	<link rel="StyleSheet" type="text/css" href="../css/cupertino/jquery-ui-1.8.23.custom.css" />
	<link rel="StyleSheet" type="text/css" href="../css/css_ejemplo5.css" />
	
	<!--Archivos de script de JQuery-->
	<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="../js/jquery-ui-1.8.23.custom.min.js"></script>
	<!--Archivo de script del ejemplo-->
	<script type="text/javascript" src="../js/func_ejemplo5.js"></script>

   </head>
   <body>
	 <br/>
	 
		<TABLE WIDTH="95%" BORDER="0">
			<TR>
				<TD >
				<!-- Widget Tab -->
					<div id="fichass">
						<ul>
							<li><a href="ajax/listarProductos.php">Productos</a></li>
							<li><a href="ajax/listarCategorias.php">Categorias</a></li>
						</ul>
					</div>				
				</TD>
			</TR>
		</TABLE>		

   </body>
</html>

Espero que con la imagen de las carpetas que te mostré anteriormente puedas deducir el porqué de las rutas en las etiquetas para importar las hojas de estilo (LINK), y el porqué de las rutas en las etiquetas para importar los archivos de código JavaScript (SCRIPT). Como se observa el archivo está muy, muy corto, a continuación una breve explicación de las líneas más importantes de este archivo:

En la línea 7 y 8 se están importando dos hojas de estilos; el primer archivo .css (jquery-ui-1.8.23.custom.css) corresponde a la hoja de estilos de JQuery UI, el segundo archivo .css (css_ejemplo5.css) corresponde a una hoja que he creado para darle un poco de presentación a las tablas que mostraran el contenido de las tablas de MySql.

En la línea 11 se importa el Framework JQuery.
En la línea 12 se importa la librería JQuery UI.
En la línea 14 se importa un archivo que he creado para inicializar JQuery y el Widget Tab.

En el cuerpo del documento HTML (BODY) se observa cómo he creado una tabla con una sola fila y una sola columna y dentro de dicha columna e insertado el Widget Tab. El objetivo de la tabla es limitar el ancho que ocupa el Widget dentro del documento HTML.

css_ejemplo5.css
Este archivo es una hoja de estilos que he creado para hacer un RESET del CSS del documento HTML y crear unas cuantas clases para dar presentación a las tablas HTML que muestran los datos de las tablas Productos y Categorías (las tablas se crean en los archivos que se cargan con Ajax). Los archivos listarProductos.php y listarCategorias.php son los que hacen uso de las clases que se crean en este archivo.

@CHARSET "UTF-8";
/******* GENERAL RESET *******/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
 tfoot, thead, tr, th, td {
  border:0pt none;
  font-family:inherit;
  font-size: 100%;
  font-style:inherit;
  font-weight:inherit;
  margin:0pt;
  padding:0pt;
  vertical-align:baseline;
}

.celdaWhite {	background-color: #FFFFFF; }
.celdaGreen {	background-color: #E5FFE9; }

.filaEncabezado  { 
	background-color: #B5B5B5; 
	font-size: 9pt; 
	font-weight: bold; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
}

td { 
	color: #333333; 
	font-family: 'Comic Sans MS',Verdana, Arial, Helvetica, sans-serif; 
	font-size: 7.5pt; 
	vertical-align:middle;
	padding:3px;
}

En el archivo se observa lo siguiente:
Únicamente he creado 3 clases: celdaWhite, celdaGreen y filaEncabezado.
Asigne estilos para todas las celdas de una tabla HTML (línea 27 a línea 33).

func_ejemplo5.js
Este archivo se encarga de Inicializar el Framework JQuery y de especificar que la capa (DIV) que están dentro del cuerpo del archivo index.php debe convertirse en un Widget Tab:

/*
	Descripcion: 	Inicializacion de JQuery y el Widget Tab.
*/

	var miPagina;
	miPagina=$(document);
	miPagina.ready(inicializarEventos);

	function inicializarEventos()
	{
		var capaFichas = $("#fichass");
		capaFichas.tabs({ collapsible: true });
	}

Si has revisado mis anteriores ejemplos de JQuery te darás cuenta que estoy utilizando la misma sintaxis de siempre para inicializar JQuery. El parámetro collapsible del método tabs() es un valor booleano que indica si el contenido de la pestaña debe ocultarse al dar click en el nombre de la pestaña, en este caso he especificado que sí.

Te explicare un poco que pasa detrás del telón…
Recordemos que el método ready() solo se hace disponible después de que todo el contenido del documento HTML ha sido recibido del servidor, es por eso que dentro de este método he creado un objeto asociado a la capa "fichass" (línea 11) y a través de este objeto le indico a jQuery que a esta capa la convierta en un Widget del tipo Tab (linea 12).

Cuando el método tabs() se ejecuta y detecta que en el parámetro href de los nombres de las pestañas (líneas 26 y 27 de index.html) hay una URL a un archivo, entonces, automáticamente carga el archivo asociado a la primera pestaña a través de Ajax. Léase la documentación del Widget Tab, opción selected aquí.

Si deseáramos que al cargarse el Widget Tab se mostrara por defecto la pestaña 2 entonces deberíamos ejecutar este método con la opción selected: 1. Las fichas se numeran de 0 a n-1, donde n es el numero de pestañas del Widget Tab.

conectar_bd.php
Este archivo se encarga de hacer la conexión al DBMS MySql, o en caso de error, mostrar una descripción del porque no se pudo conectar (función mysql_error de MySql). Este archivo es insertado con la función include de PHP dentro de los archivos listarProductos.php y listarCategorias.php.

<?php
	
$conexio = null;
function conectar_bd() {
	global $conexio;
	//Definir datos de conexion con el servidor MySQL (local)	
	$elUsr = "root";
	$elPw  = "12345";
	$elServer ="localhost";
	$laBd = "jquerytabs_mysql";
	
	//Obtener link de conexion
	$conexio = mysql_connect($elServer, $elUsr , $elPw) or die (mysql_error());
	
	mysql_select_db($laBd, $conexio ) or die (mysql_error());
}
	
?>

Este script PHP en resumen; declara una variable global ($conexio, guardara el link de conexión a la bd) y define una función llamada conectar_bd() la cual al ser invocada hará la conexión a MySql y dejara esa conexión abierta en la variable global anteriormente mencionada.

listarProductos.php
Este archivo es solicitado al servidor a través de Ajax cada vez que se da click en la primera pestaña. Tiene la función de hacer una consulta a la base de datos para obtener los registros de la tabla productos y a través de un ciclo desplegarlos:

<?php
	include("../conectar_bd.php");
	conectar_bd();
	
	//Hacer una consulta de la tabla productos a la base de datos
	$queryProductos = "SELECT tbl_productos.*,cta_CategoriasProductos.tx_Nombre AS categoria 
						FROM tbl_productos
						INNER JOIN cta_CategoriasProductos
						ON tbl_productos.id_Categoria = cta_CategoriasProductos.id_CategoriaProducto;";
	$resProductos = mysql_query($queryProductos);
?>

	<TABLE WIDTH="95%" BORDER="0" >
		<TR class="filaEncabezado">
			<TD width="1%" align="left">ID</TD>
			<TD align="left">NOMBRE</TD>
			<TD align="left">DESCRIPCION</TD>
			<TD align="left">FECHA CADUCIDAD</TD>
			<TD align="left">PRECIO LISTA</TD>
			<TD align="left">PRECIO PUBLICO</TD>
			<TD align="left">CATEGORIA</TD>
		</TR>
<?php	
	$i=0;
	//Ciclo para obtener y desplegar cada registro de la tabla productos
	while( $filaProducto = mysql_fetch_array($resProductos) ) {
		$estilo = ( ($i%2)==0 ) ? "celdaWhite" : "celdaGreen";
?>
		<TR class="<?=$estilo; ?>"  >
			<TD><?=$filaProducto['id_producto']; ?></TD>
			<TD><?=$filaProducto['tx_NombreProducto']; ?></TD>
			<TD><?=$filaProducto['tx_Descripcion']; ?></TD>
			<TD><?=$filaProducto['dt_FechaCaducidad']; ?></TD>
			<TD><?="$".$filaProducto['mn_PrecioCompra']; ?></TD>
			<TD><?="$".$filaProducto['mn_PrecioPublico']; ?></TD>
			<TD><?=$filaProducto['categoria']; ?></TD>
		</TR>
<?php
	$i++;
	}	//Fin de ciclo
?>
	</TABLE>
<?php
	mysql_close($conexio);
?>

Observa como he realizado un match entre la tabla Productos y la tabla de Categorías a través del campo id_Categoria. Este match lo hago para desplegar el nombre de la categoría en vez de su ID; pues al usuario no le interesa el Id, sino el nombre de la categoría en la que se ha clasificado el producto. Si no entiendes muy bien mi consulta de SQL te recomiendo leer acerca de la instrucción INNER JOIN.

En la línea 44 se cierra conexión a la base de datos, misma que se abrió al invocar a la función conectar_bd() en la línea 3.

listarCategorias.php
Este archivo al igual que el archivo listarProductos.php es solicitado al servidor a través de Ajax, pero ahora cuando se da click en la segunda pestaña (Categorias):

<?php
	include("../conectar_bd.php");
	conectar_bd();
	
	//Hacer una consulta de la tabla categorias a la base de datos	
	$queryCategorias = "SELECT * FROM cta_CategoriasProductos; ";
	$resCategorias = mysql_query($queryCategorias);
?>

	<TABLE WIDTH="95%" BORDER="0" >
		<TR class="filaEncabezado">
			<TD width="1%" align="left">ID</TD>
			<TD align="left">NOMBRE</TD>
			<TD align="left">DESCRIPCION</TD>
		</TR>
<?php	
	$i=0;
	//Ciclo para obtener y desplegar cada registro de la tabla categorias
	while( $filaCategoria = mysql_fetch_array($resCategorias) ) {
		$estilo = ( ($i%2)==0 ) ? "celdaWhite" : "celdaGreen";
?>
		<TR class="<?=$estilo; ?>"  >
			<TD><?=$filaCategoria['id_CategoriaProducto']; ?></TD>
			<TD><?=$filaCategoria['tx_Nombre']; ?></TD>
			<TD><?=$filaCategoria['tx_Descripcion']; ?></TD>
		</TR>
<?php
	$i++;
	}	//Fin del ciclo
?>
	</TABLE>
<?php
	mysql_close($conexio);
?>

Como puedes observar en el código, se hace un barrido completo de la tabla Categorías y a través de un ciclo while se mandan al navegador cada uno de los registros.

En la línea 33 se cierra la conexión a la base de datos, misma que se abrió al invocar a la función conectar_bd() en la línea 3.

Screenshots del ejemplo

A continuación muestro pantallazos del ejemplo en el navegador Chrome de Google.
Ficha Productos:
Ejemplo JQuery Tabs en ejecucion; Pestaña productos.
Ficha Categorias;
Ejemplo JQuery Tabs en ejecucion: Pestaña Categorias.

Demo

Si gustas ver el ejemplo en ejecución da Click en este enlace.

 

Eso es todoo, espero que te haya gustado y principalmente que ojalá te sirva. Si deseas el código basta con que dejes tu email y en cuanto vea tu mensaje te hago llegar el ejemplo en un archivo comprimido. Si te gusto el articulo, te invito a que me dejes un comentario, así me motivas a escribir más.

Saludos cordiales.

 
 

Enlaces relacionados:

 
 

Acerca de gonzasilve
Freelance Web Developer.

59 Responses to JQuery UI: Como usar el control Tab con MySql

  1. Hola. podrias enviarme el codigo por favor?

    Gracias..Pedro

  2. VICENTE ROMERO CASTRO dice:

    Excelente articulo, ayudame por favor con el codigo este es mi correo: vfromero@hotmail.com

  3. William Daza dice:

    Hola me gustaría tener el código 🙂 gracias muy interesante william.daza.66@gmail.com

  4. Tu web es buena, hace poco he comenzado con php, y es bueno ver ejemplos como este. Por favor me podrías enviar el código de este ejemplo al correo: lsolisonofre@gmail.com

    Gracias

  5. Pingback: JQuery | Annotary

  6. Jorge Alfonso Villanueva Galvis dice:

    Muy buen material, Podrías enviarme el código de estos ejemplos. Muchas Gracias.

    j.villanueva1968@hotmail.com

  7. Mairim dice:

    muy buen tutorial…
    este es mi correo
    ediv_mir@live.com.mx

  8. Mairim dice:

    muy buen tutorial..melo podrias enviar te lo agradeceria ..

  9. peter3518 dice:

    Hola Gonzalo:
    Muy buenos los ejemplos, me podrias enviar JQuery UI: Como usar el control Tab con MySql??

    Muchas gracias!

  10. Willian Velez dice:

    Hola como vas., si acabo de ver tu ejemplo y me sirve muchusimo y me gustaria que me enviaras el codigo para implementarlo en el desarrollo que estoy haciendo., pero queria preguntarte esoy haciendo un formulario que debe tener dos tabs
    la idea del proyecto es tener una forma de captura de informacion de datos basicos de un paciente, con unos datos mininos., como cedula fecha nombre direccion telefono y algunos otros datos mas pero aparte de eso necesito incluir dos tabs que maneje en el primero me llene la informacion de ls datos que se requieren para la toma de muestra de sangro como la bilirubina phd y otras datos mas y en el otro tab necesito que me registren informacion de la muestra de orina y que con un solo boton cuando el usuario vaya a registrar registre en tres tablas la primera los datos basicos del paciente la segunda los datos basicos de la muestra de sangre y la tercera los datos basicos de la muestra de orina y estoy colado con esto porque no soy muy experto en php e puedes ayudar

  11. Edwin dice:

    Estimado:
    Junto con saludar, muy bueno el tutorial. Descargue los archivos, segui la proforma del orden y archivos en sus carpetas respectivas; pero no se como instalar:
    El FrameWork JQuery.
    JQuery UI.

    Favor indicar como se hace, porque cuando clikeo en esos programas me salen muchos hipervínculos y no se cual es? Recalcar que nunca utilize esos programas anteriores.
    Mi email es: e.hualti@gmail.com

    Miles de gracias Anticipados. Saludos

    • gonzasilve dice:

      Que tal Edwin, te envie los fuentes de este ejemplo ahi ya va el framework JQuery UI,

      Saludos.

  12. Daniel dice:

    Muy Buen Código Puedes enviarmelo

    • gonzasilve dice:

      ok ya te lo envie amigo

  13. leonermn92 dice:

    Muchísimas gracias por el aporte, excelente! Envíame el archivo please

    • gonzasilve dice:

      …Por nada, Claro que si amigo ya te lo envie,

      Saludos

  14. Geralfo dice:

    Muy buen aporte, decearia tambien el cod. saludos

    • gonzasilve dice:

      Claro que si,. ya te lo envie

      Gracias por tu visita.

  15. Oscar dice:

    Me pueden pasar el codigo fuente a mi correo. oschefer@hotmail.com
    Como se pueden modificar, eliminar o agregar campos

    • gonzasilve dice:

      Hola Oscar,

      ya te lo envie, saludos!

  16. peter3518 dice:

    Hola, me podrias enviar el ejemplo Jquery Ui control Tab con Mysql?

    Gracias
    Pedro

    • gonzasilve dice:

      Ok, te lo acabo de adjuntar y enviar,

      Saludos Peter

  17. Edwin dice:

    Excelente material, podrías enviarlmelo, y tambien saber si tienen algún ejemplo sobre select dependientes, así como país, departamento y ciudad

    saludos

    • gonzasilve dice:

      Ok, te lo envie Edwin.

      Saludos

  18. frankie dice:

    muy bueno podrias enviarme el codigo

    • gonzasilve dice:

      ok te lo envie amigo.

      Saludosss

  19. frankie dice:

    muy bueno la aplicacion si no seria molestia enviarme el codigo mi correo ffigueroa2803@gmail.com .. le agradecere.

    • gonzasilve dice:

      Ok, te lo mande. Saludos

  20. Oscar dice:

    Excelente puedes enviarme los archivos ozotto@hotmail.com

    • gonzasilve dice:

      Ok, te lo acabo de mandar. Saludos Oscar!

  21. Juan dice:

    muy bueno… puedes enviarme los archivos fuente a mi email: cdi731@yahoo.com
    Agradecido con tu ayuda 😉

    • gonzasilve dice:

      Ok, te lo acabo de adjuntar y enviar en un correo. Saludos y prospero 2013!

      • Juan dice:

        ok… lo pondre en practica, gracias por facilitarnos algunos detalles.
        Que este 2013, sea de exitos personales y profesionales para tu vida y kienes te rodean 😉

  22. Carlos dice:

    Hola Gonzalo, excelente explicación y funciona perfecto tambien con jsp. Pero tengo un problena desde hace 2 semanas y no lo puedo resolver, a ver si me puedes dar una mano. Tengo un tab con 4 solapas.que van a 4 jsp distintas. la primera se llena desde un BD sin problemas. El problema es el siguiente: yo tengo que hacer click en una de las filas de las tabla de la 1ra solapa y por medio del id, tengo que ir a la BD para buscar los datos que lleno en la 2da, 3ra y 4ta solapa. Hasta recuperar el id está perfecto. ahora, no se como enviarles los parámetros a las otras solapas de jsp ya que si se los mando por href me dice que no se puede resolver esa variable (y claro está porque la variable está en la jsp a la que hago referencia en el primer tab). Muchas gracias por tus aportes

    • gonzasilve dice:

      …ummm es un problema muy especifico. Por ahora no puedo ayudarte, si gustas esperar al fin de semana.

      Saludos cordiales

  23. Paul dice:

    se ve precioso…prolijo trabajo de desarrollador, muchas gracias Master por el buen aporte…eres genial!!!

    • gonzasilve dice:

      Gracias. Saludos

  24. Edwin Michael dice:

    Hola la verdad que como se ve el articulo esta realizado de mnera muy buena

    Si puedieras mandarme el codigo te lo agredeceria

    Esta fantastico

    • gonzasilve dice:

      Edwin, te lo acabo de enviar. Saludos cordiales y gracias por visitarme.

  25. armando dice:

    excelente trabajo me lo puedes mandar para aprender mas de php aguero.armando@gmail.com

    • gonzasilve dice:

      Claro Armando, te lo acabo d enviar. Saludos

  26. seve dice:

    excelente trabajo me lo puedes mandar para aprender mas de php, ajax. oye se puede paginar? los listados

    • gonzasilve dice:

      Si se puede, hay plugins que ya hacen eso te recomiendo que uses uno. Yo por el momento no tengo tiempo de ayudarte en eso, una disculpa, pero te mande el codigo. Saludos

  27. Ariel Tagarelli dice:

    Hola Gonzalo.

    Muy interesante tu ejemplo y muy completo; te pido si me lo puedes enviar a mi dirección para aprender a usar el MySql con PHP 5.

    Muchas Gracias y Saludos.

    Ariel Tagarelli

    • gonzasilve dice:

      Te lo acabo de mandar Ariel. Saludos

      • Ariel Tagarelli dice:

        Hola Gonzalo

        Muchas gracias por el envio.

        Saludos

        Ariel Tagarelli

  28. Agustin dice:

    Hola Gonzalo.

    Quisiera preguntar si puedes enviarme el rar completo de este gran método de organizar productos, ya que yo lo usare para organizar nombres y números de un par de cosas que necesito.

    Desde ya Muchísimas Gracias.

    Saludos Cordiales
    Agustín Penino

    • Agustin dice:

      disculpa, mi corre es: elagusje@hotmail.com, este correo esta incluido en el mensaje que ya te eh enviado antes, y no esta incluido en uno de los mensajes que te envie para encriptar las pass en md5.

      Saludos y muchas gracias.

  29. Peter dice:

    Gonzalo:
    Muy buenos los ejemplos! Me podrias enviar JQuery UI: Como usar el control Tab con MySql a mi correo pitermun@gmail.com?
    Muchas gracias!!!

    • gonzasilve dice:

      Te lo acabo de enviar Peter. Saludos

  30. Antonio dice:

    Gracias muy bueno en verdad, disculpa me lo podrías enviar si no es molestia.

    • gonzasilve dice:

      Sorry, te lo envie desde ese dia. pero te confirmo aqui otra vez. Saludos

  31. Elen dice:

    Tu web es buena, no hace mucho comence con php, y es bueno ver ejemplos como este. Por favor me podrias pasa el codigo de este ejemplo.

    • gonzasilve dice:

      Elen, te lo acabo de mandar. Saludos cordiales.

  32. Muy bueno el tutorial.

    Tengo unas preguntas:

    Cada vez que hago click en cada tab vuelve a llamar al archivo para cargarlo o al cargarlo 1 vez me queda el contenido cacheado mientras tenga la página abierta?

    Si pongo un formulario en un panel puedo hacer insert vía ajax y validarlos como cualquier formulario o tengo que referenciarlos de alguna manera especial?

    Desde ya muchas gracias por tu tiempo.

    Saludos

    • gonzasilve dice:

      Mauricio, contestando a tu 1ra pregunta: SI cada vez k das click en el nombre de la Pestaña se muestra el contenido cacheado pero internamente empieza a recargar el archivo y cuando esta listo, jQuery actualiza el contenido de la Tab, aunque, si los datos son los mismos ni se nota, pero por el contrario si los datos cambian (por ejemplo si provienen de una BD) se vera reflejado el nuevo contenido en la Tab.

      y contestando a la 2da pregunta: Si puedes hacer insert via ajax pero si quieres validar un formulario que esta contenido dentro de una Tab, debes cargar todo un documento HTML. Por ejemplo; en mis archivos listarProductos.php y listarCategorias.php no estoy poniendo todo un documento, es decir no puse el tag html, ni el head, tampoco el body, pero si quisiera validar algo tendria k poner esas etiquets para que a la hr de que se cargara el Tab me cargue correctamente el codigo javascript que como sabes se pone por lo general dentro de la seccion HEAD.

      …no, gracias a ti x visitar.

      Saludos

  33. Josué Miró dice:

    Más fácil y mejor explicado imposible, enhorabuena.

    • gonzasilve dice:

      …Gracias.

  34. Pingback: JQuery UI: Como usar el control Tab con MySql « DbRunas – Noticias y Recursos sobre Bases de Datos

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: