Inicio AJAX Tutorial: Aplicación web con jQuery, PHP, MySQL (Mantenimiento de datos)

Tutorial: Aplicación web con jQuery, PHP, MySQL (Mantenimiento de datos)

En tutoriales anteriores explicabamos como combinar los lenguajes de servidor PHP y el gestor de base de datos MySQL con el objeto XMLHttpRequest (lo que hace posible AJAX) para llamadas asíncronas. Sin embargo hacer uso de manera tradicional de este objeto JavaScript es muy engorroso a la hora de codificar. Justamente la librerías JavaScript actuales han simplificado el trabajo. Es allí donde nos centraremos ahora. Haremos uso de la librería (que ha mi parecer es muy cómoda de usar) jQuery.

aplicacion web jquery

aplicacion web jquery

Vamos a realizar un pequeño mantenimiento de datos de unos clientes, esto nos permitirá visualizar, agregar, modificar ó eliminar sus datos. Cómo siempre haremos uso de MySQL y PHP pues es la forma de probarlo en mi servidor web. La explicación que daré será de manera general (no entrare en muchos detalles), así que en los comentarios pueden plasmar sus dudas si lo desean. También quiero aclarar que no soy un experto en el uso de jQuery, solo sé algo de lo poco que leí de jQuery in Action, así que quizás en el código vaya a pecar de ignorante. Pero si tiene alguna crítica, espero lo hagan con la actituda adecuada.

Empecemos entonces con la tabla cliente, que tiene la siguiente estructura:

--
-- Estructura de tabla para la tabla `cliente`
--

CREATE TABLE IF NOT EXISTS `cliente` (
  `id` tinyint(7) NOT NULL auto_increment,
  `nombres` varchar(50) NOT NULL,
  `ciudad` varchar(50) NOT NULL,
  `sexo` char(1) NOT NULL,
  `telefono` varchar(10) NOT NULL,
  `fecha_nacimiento` datetime NOT NULL,
  KEY `id` (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Vamos a crear dos clases en PHP: 1) para la conexión con el servidor y 2) una clase cliente, con cinco métodos básicos.

conexion.class.php

<?php 
class DBManager{
	var $conect;
  
	var $BaseDatos;
	var $Servidor;
	var $Usuario;
	var $Clave;
	function DBManager(){
		$this->BaseDatos = "base-datos";
		$this->Servidor = "localhost";
		$this->Usuario = "user";
		$this->Clave = "pwd";
	}

	 function conectar() {
		if(!($con=@mysql_connect($this->Servidor,$this->Usuario,$this->Clave))){
			echo"<h1> [:(] Error al conectar a la base de datos</h1>";	
			exit();
		}
		if (!@mysql_select_db($this->BaseDatos,$con)){
			echo "<h1> [:(] Error al seleccionar la base de datos</h1>";  
			exit();
		}
		$this->conect=$con;
		return true;	
	}
}
?>

cliente.class.php

<?php 
include_once("conexion.class.php");

class Cliente{
 //constructor	
 	var $con;
 	function Cliente(){
 		$this->con=new DBManager;
 	}

	function insertar($campos){
		if($this->con->conectar()==true){
			return mysql_query("INSERT INTO cliente (nombres, ciudad, sexo, telefono, fecha_nacimiento) VALUES ('".$campos[0]."', '".$campos[1]."','".$campos[2]."','".$campos[3]."','".$campos[4]."')");
		}
	}
	
	function actualizar($campos,$id){
		if($this->con->conectar()==true){
			return mysql_query("UPDATE cliente SET nombres = '".$campos[0]."', ciudad = '".$campos[1]."', sexo = '".$campos[2]."', telefono = '".$campos[3]."', fecha_nacimiento = '".$campos[4]."' WHERE id = ".$id);
		}
	}
	
	function mostrar_cliente($id){
		if($this->con->conectar()==true){
			return mysql_query("SELECT * FROM cliente WHERE id=".$id);
		}
	}

	function mostrar_clientes(){
		if($this->con->conectar()==true){
			return mysql_query("SELECT * FROM cliente ORDER BY id DESC");
		}
	}

	function eliminar($id){
		if($this->con->conectar()==true){
			return mysql_query("DELETE FROM cliente WHERE id=".$id);
		}
	}
}
?>

Los procesos básicos de un mantenimiento de datos los he separado en cada archivo: consulta.php, nuevo.php, actualizar.php, eliminar.php.

consulta.php

Este archivo se encarga de mostrar todos los clientes de la tabla, contienen un enlace a nuevo.php para agregar un nuevo cliente, además contiene dos enlaces para modificar y eliminar que enlazarán a los archivos actualizar.php y eliminar.php respectivamente, con sus variables GET (Ej. actualizar.php?id=40). También colocamos algo de JavaScript para estos dos enlaces.

<?php
require('clases/cliente.class.php');
$objCliente=new Cliente;
$consulta=$objCliente->mostrar_clientes();
?>
<script type="text/javascript">
$(document).ready(function(){
	// mostrar formulario de actualizar datos
	$("table tr .modi a").click(function(){
		$('#tabla').hide();
		$("#formulario").show();
		$.ajax({
			url: this.href,
			type: "GET",
			success: function(datos){
				$("#formulario").html(datos);
			}
		});
		return false;
	});
	
	// llamar a formulario nuevo
	$("#nuevo a").click(function(){
		$("#formulario").show();
		$("#tabla").hide();
		$.ajax({
			type: "GET",
			url: 'nuevo.php',
			success: function(datos){
				$("#formulario").html(datos);
			}
		});
		return false;
	});
});

</script>
<span id="nuevo"><a href="nuevo.php"><img src="img/add.png" alt="Agregar dato" /></a></span>
	<table>
   		<tr>
   			<th>Nombres</th>
    		<th>Ciudad</th>
    		<th>Sexo</th>
    		<th>Telefono</th>
            <th>Fecha Nacimiento</th>
            <th></th>
            <th></th>
        </tr>
<?php
if($consulta) {
	while( $cliente = mysql_fetch_array($consulta) ){
	?>
	
		  <tr id="fila-<?php echo $cliente['id'] ?>">
			  <td><?php echo $cliente['nombres'] ?></td>
			  <td><?php echo $cliente['ciudad'] ?></td>
			  <td><?php echo $cliente['sexo'] ?></td>
			  <td><?php echo $cliente['telefono'] ?></td>
			  <td><?php echo $cliente['fecha_nacimiento'] ?></td>
			  <td><span class="modi"><a href="actualizar.php?id=<?php echo $cliente['id'] ?>"><img src="img/database_edit.png" title="Editar" alt="Editar" /></a></span></td>
			  <td><span class="dele"><a onClick="EliminarDato(<?php echo $cliente['id'] ?>); return false" href="eliminar.php?id=<?php echo $cliente['id'] ?>"><img src="img/delete.png" title="Eliminar" alt="Eliminar" /></a></span></td>
		  </tr>
	<?php
	}
}
?>
    </table>

nuevo.php

Este archivo muestra un formulario donde escribiremos los datos del nuevo cliente, pero también actual cómo un proceso para agregar el cliente a la base de datos. Es por eso que primero evalua si existen definidas alguna variable POST. Si es así llama a la clase cliente y hace uso del método insertar. En la parte del formulario, en el evento onsubmit, llamamos a la función en JavaScript: GrabarDatos().

<?php
require('functions.php');
if(isset($_POST['submit'])){
	require('clases/cliente.class.php');

	$nombres = htmlspecialchars(trim($_POST['nombres']));
	$ciudad = htmlspecialchars(trim($_POST['ciudad']));
	$sexo = htmlspecialchars(trim($_POST['alternativas']));
	$telefono = htmlspecialchars(trim($_POST['telefono']));
	$fecha_nacimiento = htmlspecialchars(trim($_POST['fecha_nacimiento']));
	
	$objCliente=new Cliente;
	if ( $objCliente->insertar(array($nombres,$ciudad,$sexo,$telefono,$fecha_nacimiento)) == true){
		echo 'Datos guardados';
	}else{
		echo 'Se produjo un error. Intente nuevamente';
	} 
}else{
?>
<form id="frmClienteNuevo" name="frmClienteNuevo" method="post" action="nuevo.php" onsubmit="GrabarDatos(); return false">
  <p><label>Nombres<br />
  <input class="text" type="text" name="nombres" id="nombres" />
  </label>
  </p>
  <p>
    <label>Ciudad<br />
    <input class="text" type="text" name="ciudad" id="ciudad" />
    </label>
  </p>
  <p>
    <label>
    <input type="radio" name="alternativas" id="masculino" value="M" />
    Masculino</label>
    <label>
    <input type="radio" name="alternativas" id="femenino" value="F" />
    Femenino</label>
  </p>
  <p>
    <label>Telefono<br />
    <input class="text" type="text" name="telefono" id="telefono" />
    </label>
  </p>
  <p>
    <label>Fecha Nacimiento <a onclick="show_calendar()" style="cursor: pointer;">
<small>(calendario)</small>
</a><br />
    <input readonly="readonly" class="text" type="text" name="fecha_nacimiento" id="fecha_nacimiento" value="<?php echo date("Y-m-j")?>" />
    <div id="calendario" style="display:none;"><?php calendar_html() ?></div>
    </label>
  </p>
  <p>
    <input type="submit" name="submit" id="button" value="Enviar" />
    <label></label>
    <input type="button" class="cancelar" name="cancelar" id="cancelar" value="Cancelar" onclick="Cancelar()" />
  </p>
</form>
<?php
}
?>

actualizar.php

Este archivo, similar a nuevo.php, muestra un formulario con los datos del cliente seleccionado, pero también actual cómo un proceso para modificar los datos del cliente. Es por eso que primero evalua si existen definidas alguna variable POST. Si es así llama a la clase cliente y hace uso del método actualizar. En la parte del formulario, en el evento onsubmit, llamamos a la función en JavaScript: ActualizarDatos().

<?php
require('functions.php');
if(isset($_POST['submit'])){
	require('clases/cliente.class.php');
	$objCliente=new Cliente;
	
	$cliente_id = htmlspecialchars(trim($_POST['cliente_id']));
	$nombres = htmlspecialchars(trim($_POST['nombres']));
	$ciudad = htmlspecialchars(trim($_POST['ciudad']));
	$sexo = htmlspecialchars(trim($_POST['alternativas']));
	$telefono = htmlspecialchars(trim($_POST['telefono']));
	$fecha_nacimiento = htmlspecialchars(trim($_POST['fecha_nacimiento']));
	
	if ( $objCliente->actualizar(array($nombres,$ciudad,$sexo,$telefono,$fecha_nacimiento),$cliente_id) == true){
		echo 'Datos guardados';
	}else{
		echo 'Se produjo un error. Intente nuevamente';
	} 
}else{
	if(isset($_GET['id'])){
		
		require('clases/cliente.class.php');
		$objCliente=new Cliente;
		$consulta = $objCliente->mostrar_cliente($_GET['id']);
		$cliente = mysql_fetch_array($consulta);
	?>
	<form id="frmClienteActualizar" name="frmClienteActualizar" method="post" action="actualizar.php" onsubmit="ActualizarDatos(); return false">
    	<input type="hidden" name="cliente_id" id="cliente_id" value="<?php echo $cliente['id']?>" />
        <p>
	  <label>Nombres<br />
	  <input class="text" type="text" name="nombres" id="nombres" value="<?php echo $cliente['nombres']?>" />
	  </label>
      </p>
	  <p>
		<label>Ciudad<br />
		<input class="text" type="text" name="ciudad" id="ciudad" value="<?php echo $cliente['ciudad']?>" />
		</label>
	  </p>
	  <p>
		<label>
		<input type="radio" name="alternativas" id="masculino" value="M" <?php if($cliente['sexo']=="M") echo "checked=\"checked\""?> />
		Masculino</label>
		<label>
		<input type="radio" name="alternativas" id="femenino" value="F" <?php if($cliente['sexo']=="F") echo "checked=\"checked\""?> />
		Femenino</label>
	  </p>
	  <p>
		<label>Telefono<br />
		<input class="text" type="text" name="telefono" id="telefono" value="<?php echo $cliente['telefono']?>" />
		</label>
	  </p>
	  <p>
        <label>Fecha Nacimiento <a onclick="show_calendar()" style="cursor: pointer;"><small>(calendario)</small></a><br />
        <input readonly="readonly" class="text" type="text" name="fecha_nacimiento" id="fecha_nacimiento" value="<?php echo $cliente['fecha_nacimiento'] ?>" />
        <div id="calendario" style="display:none;"><?php calendar_html() ?></div>
        </label>
	  </p>
	  <p>
		<input type="submit" name="submit" id="button" value="Enviar" />
		<label></label>
		<input type="button" name="cancelar" id="cancelar" value="Cancelar" onclick="Cancelar()" />
	  </p>
	</form>
	<?php
	}
}
?>

eliminar.php

Este archivo, como su nombre lo indica, se encarga de borrar los datos del cliente especificado.

<?php
require('clases/cliente.class.php');

$cliente_id=$_GET['id'];
$objCliente=new Cliente;
if( $objCliente->eliminar($cliente_id) == true){
	echo "Registro eliminado correctamente";
}else{
	echo "Ocurrio un error";
}
?>

Ahora veamos las funciones en JavaScript relacionadas con los procesos PHP que acabamos de explicar de manera general.

jQuery.functions.js

Las cuatro funciones ActualizarDatos(), ConsultaDatos(), EliminaDato() y GrabarDatos(), hacen llamadas AJAX, mediante la función $.ajax({…}) que nos proporciona jQuery. Cada función hace una llamada a los procesos en PHP respectivamente.

	function ActualizarDatos(){
		var cliente_id = $('#cliente_id').attr('value');
		var nombres = $('#nombres').attr('value');
		var ciudad = $('#ciudad').attr('value'); 
		var alternativas = $("input[@name='alternativas']:checked").attr("value");
		var telefono = $("#telefono").attr("value");
		var fecha_nacimiento = $("#fecha_nacimiento").attr("value");

		$.ajax({
			url: 'actualizar.php',
			type: "POST",
			data: "submit=&nombres="+nombres+"&ciudad="+ciudad+"&alternativas="+alternativas+"&telefono="+telefono+"&fecha_nacimiento="+fecha_nacimiento+"&cliente_id="+cliente_id,
			success: function(datos){
				alert(datos);
				ConsultaDatos();
				$("#formulario").hide();
				$("#tabla").show();
			}
		});
		return false;
	}
	
	function ConsultaDatos(){
		$.ajax({
			url: 'consulta.php',
                        cache: false,
			type: "GET",
			success: function(datos){
				$("#tabla").html(datos);
			}
		});
	}
	
	function EliminarDato(cliente_id){
		var msg = confirm("Desea eliminar este dato?")
		if ( msg ) {
			$.ajax({
				url: 'eliminar.php',
				type: "GET",
				data: "id="+cliente_id,
				success: function(datos){
					alert(datos);
					$("#fila-"+cliente_id).remove();
				}
			});
		}
		return false;
	}
	
	function GrabarDatos(){
		var nombres = $('#nombres').attr('value');
		var ciudad = $('#ciudad').attr('value'); 
		var alternativas = $("input[@name='alternativas']:checked").attr("value");
		var telefono = $("#telefono").attr("value");
		var fecha_nacimiento = $("#fecha_nacimiento").attr("value");

		$.ajax({
			url: 'nuevo.php',
			type: "POST",
			data: "submit=&nombres="+nombres+"&ciudad="+ciudad+"&alternativas="+alternativas+"&telefono="+telefono+"&fecha_nacimiento="+fecha_nacimiento,
			success: function(datos){
				ConsultaDatos();
				alert(datos);
				$("#formulario").hide();
				$("#tabla").show();
			}
		});
		return false;
	}
        //esta funcion es para el boton cancelar del form
	function Cancelar(){
		$("#formulario").hide();
		$("#tabla").show();
		return false;
	}

index.php

Finalmente todo esto aparecerá en nuestro archivo principal index.php, que tendrá la siguiente estructura:

<!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=utf-8" />
<title>Mantenimiento de Clientes</title>
<script src="js/jquery-1.3.1.min.js" type="text/javascript"></script>
<script src="js/jquery.functions.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="css/estilo.css" />
</head>

<body>
<div id="contenedor">
    <div id="formulario" style="display:none;">
    </div>
    <div id="tabla">
    <?php include('consulta.php') ?>
    </div>
</div>
<span style="text-align:center;width:300px;margin:auto;display:block;margin-top:20px;">RibosoMatic.com</span>
</body>
</html>

Hemos explicado el funcionamiento en general que tiene nuestra aplicación web, sin entrar en tantos detalles. Si tienes alguna duda escribe un comentario. Puedes descargar el demo con algunos arreglos, como CSS y un calendario en el formulario.

Update: 01.03.10

  • Corregido problema con caché en IE 8.

Descargar código fuente

Programador y Desarrollador Web. Administrador de RibosoMatic y Proyecto Yupy. Blogger y entusiasta de la tecnología, internet, software y tutoriales para desarrollo de aplicaciones para la web ....

206 COMENTARIOS

  1. hola de nuevo. cuando doy ene l boton editar y quiero editar la fecha de nacimiento del usuario, no me muestra el datapicker (calendario).

    saludos.

  2. estuve revisando de neuvo y si me muestra el calendario al momento de editar los datos. un lapsus.

    gracias y disculpe por no revisar bien el script.

  3. Saludos.

    Es obligatorio usar clases?
    o puede hacerse con funciones de igual forma?

    Todavía no aprendo muy bien de clases y no quiero complicarme el doble..

    SIlla!

  4. hola quisiera saber porque no me funciona el link de descarga!!!! por favor si me pueden enviar de donde puedo bajar les agradeceria!!!!
    haaaa una consulta en los codigo ejemplo en nuevo.php a que se refiere en require(‘functions.php’); o sea cual de los ejemplos es el functions.php si me ayudan a entender estare agradecidisima!!! muuuuy buen aporte por cierto!!! existos.. un abraso….=)

  5. @Scyfox: No es obligatorio usar clases. Solo es una buena practica para reutilizar codigo. El archivo cliente.class.php lo puedes cambiar por funciones, no hay problema.

    @ceci: El link de descarga si funciona: http://www.box.net/shared/u1ofhijbhf. Y donde dice require(funcions.php) es para llamar o referir codigo en otro archivo. functions.php no esta incluido en el tutorial pero si en el .zip. Contiene un calendario para seleccionar la fecha.

    @jonathan: En el blog existe un tutorial sobre como paginar resultados con AJAX, PHP. En la sección AJAX está.

    Saludos y gracias por su apoyo.

  6. cuando se crea un nuevo registro y regresa a la pantalla inicial no aparece el nuevo registro.

    supongo sera problema de un temporal

    como se soluciona eso?

  7. hola tengo un problema que cuando guardo un dato no me muestra el aviso en una ventana solo me lo muestra como una pagina aparte y tengo que volver y actualizar para ver el nuevo registro que puede ser?

  8. El ejemplo esta muy bien, pero tiene fallos y no funciona bien. Solo deja hacer una acción(añadir,elminiar,etc) y luego da error.

  9. hola , me parece genial tu trabajo eh buscado
    por separado estas 4 acciones para el mantenimiento
    de una tabla pero no eh encontrado nada mejor q este ejemplo q la verdad esta bastante completo , probando me di cuenta que el reporte no esta paginado
    trate de impletar otro ejemplo de paginado de esta web pero me da problemas a la hora de cambiar de pagina cuando uso los links de editar o borrar ya no
    funciona igual , podrias subir un ejemplo de paginado
    con jquery? , saludos = )

  10. ya logre resolverlo , solo cambie la funcion de la libreria ajax.js del ejemplo del paginador a una funcion de ajax de jquery , fue mas sencillo de lo que pense , solo es de mandar el parametro con la funcion y el php dentro de consulta.php se encarga de todo , saludos

  11. Hola! Que excelente ejemplo, soy nueva usando php y no tuve ningún problema al aplicarlo, sumamente claro de entender.

    Solo tengo una duda ¿Existe alguna manera de paginearlo?

    Por su ayuda muy agradecida SLDS

  12. Hola, alguien porfavor me podría mandar la forma para paginearlo, ya que soy princpipeante y no lo e podido hacer…

    de antemano gracias

  13. En el archivo nuevo.php pone: require(‘functions.php’);
    pero este archivo no está!!!
    Me puedes dar una solución?
    Muchas gracias, muy buen aporte!

  14. tu ejemplo esta beuno, pero no entiendo pq se tiene que reembiar tanto las varibales cojiendo el archivo nuevo las varibles

    $radicado = html_char($_POST['radicado']);
    $fkempresa = html_char($_POST['fkempresa']);
    $titulo = html_char($_POST['titulo']);
    $actividad = html_char(trim($_POST['actividad']);
    $fecha_reporte = html_char($_POST['fecha_reporte']);

    $objCliente=new Cliente;
    if ( $objCliente->insertar(array($radicado,$fkempresa,$titulo,$actividad,$fecha_reporte)) == true){
    echo ‘Reporte Guardado..’;
    }else{
    echo ‘Se produjo un error. Intente nuevamente ok’;
    }

    aparentemente se envia directamen las variables a la clase cliente.class.php en su funcion de insertar pero a su ves hace un llamado en metodo del formulario
    action=”nuevo.php” onsubmit=”GrabarDatos(); pero condisionandolo en evento onsubmit para que se ejecute el jquery.functions.js en donde a su ves tiene una funcion llamada GrabarDatos() que a su vez re envia las variables de nuevo al archivo nuevo.php

  15. @galax:

    Al parecer esa linea es redundante. Pero no es así, ya que cumple un objetivo: si JavaScript esta desactivado en el navegador de todas formas funciona el ejemplo. Considerando esta línea:

    action=”nuevo.php” onsubmit=”GrabarDatos()”

    Empezará la ejecución de JavaScript osea la funcion GrabarDatos del evento onsubmit, la cual hace aparecer el formulario de registro nuevo.php para un nuevo dato; pero si JavaScript esta desactivado entonces se cargara la pagina nuevo.php para ingresar los datos.

    Saludos :)

  16. Hola sabes que me sirvio mucho esto. y pues lo estoy usando para hacer un sistema.
    La idea central es genial muy simple. pero tube algunas complicaciones en lo referente a la programacion con jquery.
    Bueno queria hacer mi aporte y tengo implementada la paginacion con Jquery y es muy simple asi que para no dejar el codigo aqui en un comentario pido si alguien me puede dar el correo para poder mandarles el codigo :P . Bueno eso seria Gracias nuevamente por tremendo blog

  17. mmmm jesus no lo habia visto desde ese punto de vista, gracias por tu aporte igual, estoy haciendo un sistema para crear reportes diarios que me solicitaron en la empresa apenas termine espero compartir el ejemplo basado en este script y pues esperare comentarios…

  18. Hola buenas tardes, necesito ayuda,
    estoy haciendo residencia o estadia profesional y
    el proyecto es hacer un herbario,
    el problema es que es php orientado a objetos,
    y la verdad el tiempo se me esta llendo en sima,
    alguno de los usuarios este foro, podra ayudarme’
    Eh estado checado varios libros, pero a un no tengo los conocimientos necesarios para desarrollarlo,
    mi correo es gci3@hotmail.com.
    espero su respuesta

  19. cada vez hay que saber más cosas para programar… primero html.. como te quedas cortina weno.. seguis con CSS,, luego queres algo dinámico.. le metés javascript.. para cuando queres conectarlo a la base de datos te das cuenta k no sabes nada de programación.. y le empezas a mirar de re ojo a php..
    weno hasta acá llegué decis… para cuando eso ya sale xhtml, css 2 y monton de librerias javascript como mootools, jquery y prototype.. que te lleva a preguntar para qué empecé todo esto si no lo voy a poder terminar..

    luego viene lo lindo… mejor dicho .. la factura de luz, agua , telefono… y te preguntás qué coño estuve haciendo durante todo este tiempo??

  20. HOla, pues probe el codigo en fire fox y va de lujo, peor en internet explorer tiene un problema, al agregar o modificar un registro da problema a la hora de mostrar la tabla con la nueva información, pareciera que muestra una tabla que quedo en memoria (mostrando registros que hasta quizas ya se eliminaron) supongo que es problema de ajax, alguna solicion?

  21. Hola,

    antes de nada, felicitarte por tu buen trabajo.
    y mi pregunta es la siguiente: es factible usando la función CargaDatos() añadirle un preload?

    si es así, como seria?

  22. si se puede agregar el preload solo debes crear una funcion de esta forma

    function cargando(){
    $("#cargandoo").html('Cargando...');}

    y llamala con una de las opciones que tiene $ajax.. que se llama “beforeSend”

  23. hola la verdad soy nuevo php, podrias ayudarme con la intalacion del mantenedor porque cuando presiono f12 me sale el siguiente erro:

    Advertencia: Se esperó nombre de atributo o espacio de nombre pero se encontró ‘@name’.
    Código Fuente: http://localhost/index.php
    Linea: 0

    no se como lo hago porfavor necesito ayuda gracias

  24. Hola amigo, agradezco tu ejemoplo, me ha servido mucho, te felicito.
    Me podrías ayudar, tengo un error al actualizar los datos, me sale este Warning.ç

    Warning: Missing argument 2 for Cliente::actualizar(), called in C:AppServwwwclientesactualizar.php on line 18 and defined in C:AppServwwwclientesclasescliente.class.php on line 17
    Lo he adaptado con mis datos.
    Este error he buscado en google, pero no encuentro solución.
    Disculpa las molestias y muchas gracias!

  25. @Sandrillo

    Revisa los parametros que envias al método actualizar. Recuerda que son dos parametros, un array con los campos y el id, verifica que estén definidos, sino seguirá apareciendo el error.

    Saludos

  26. Muy buen trabajo, sin embargo, una sugerencia seria que tuviera validaciones, asi como los otros ejemplos, la vdd soy nuevo en esto… sin embargo excelente trabajo….

  27. Hola excelente tu trabajo lo he probado en firefox y todo bien pero tengo una duda sobre el navegador IE ya que cuando agrego un nuevo cliente no carga todos los datos agregados solo me muestra el primer cliente que agregue pero todo cambia cuando le doy f5 , ahi recien me muestra todos los clientes sabes que puedo hacer para no darle f5? gracias por todo y Felicitaciones :D

  28. Modifique el codigo para adaptarlo a un sistema de gestion de promociones.

    Mi problema es que, a los dos ultimos campos quiero habilitarles el calendario. Ya que serian la fecha de inicio y de finalizacion de las promociones.
    Para ello, duplique los campos en actualizacion y nuevo. Y duplique las funciones en functions y jquery.functions.js . Tanto a las funciones duplicadas como a las variables les agregue un 2 para diferenciarlas, asi tambien como a los div, etc.
    Mi problema es que ahora no me funcionan los calendarios, al hacer click en un dia especifico en el calendario 2, me guarda la modificacion en el calendario 1, pero con otra fecha.

    espero puedan darme una mano.

  29. Si pudiese paginar, filtrar y ordenar columnas como el plugin datatable de JQUERY sería fantastico. Por lo que he leido algunos de este foro lo han conseguido con el ejemplo webapp.zip ¿alguien nos ayuda?
    Gracias

  30. Esto esta de lujo, gracias por el aporte.

    Pero alguien a podido resolver xq no actualiza los datos despues de un insertar o actualizar???

    saludos y gracias.

  31. Woow! todo muy bien explicado y esta genial, es de gran ayuda, pero he leido que en mozilla funciona perfectamente y en IE no, nadie ha dado una respuesta por que no funciona, espero alguien sepa y conteste esta interrogante.

    Saludos.

  32. Ok! El problema tiene que ver con los datos en cache del archivo consulta.php. Firefox carga por lo general las modificaciones recientes de una pagina web. Pero parece que IE7 y IE8 carga los datos guardados en cache. Es por eso que cuando le dan en guardar o actualizar muestra los datos de consulta.php que mostró cuando accedieron inicialmente a la aplicacion.

    Es se corrige consultando la documentación de jQuery sobre la configuración de peticiones Ajax: http://api.jquery.com/jQuery.ajax/

    Lo que hay que hacer es modificar el archivo jquery.functions.js en la funcion ConsultaDatos, y escribir la opción del objeto ajax: cache, en false.

    De esta forma se fuerza a la pagina requerida (en este caso consulta.php) no almacenarse en la cache del navegador.

    Finalmente quedaria asi:

    function ConsultaDatos(){
    $.ajax({
    url: ‘consulta.php’,
    cache: false,
    type: “GET”,
    success: function(datos){
    $(“#tabla”).html(datos);
    }
    });
    }

    En tal caso tengo que corregir el articulo y el comprimido.

    Saludos y mil disculpas por contestar muy tarde.

  33. Muy buen tutorial, largo para mi gusto, pero bastante completo (por lo que se ve porque todavia no lo checo).
    gracias y saludos

  34. No puedo descargar elejemplo completo de :
    http://www.box.net/shared/u1ofhijbhf

    Seria bueno mandar un ejemplo donde se vea mas la utilidad de jquery, por ejemplo que el modificar o nuevo se haga en una misma pagina mediante capas ..

    Pero esta ilustrativo tu ejemplo.La intencion tambien cuenta

    Saludos desde Lima-Peru :)

  35. De donde sale la variable “datos” que pones en los javascript por ejemplo success: function(datos){..

    es que no la encuentro disculpa la ignorancia.

    Gracias por tu ayuda.

  36. Con function(datos){… estas declarando una variable ó parametro que recibirá la respuesta del proceso en php.

    en este ejemplo, lo vemos asi:

    - alert(datos) un ventana de informacion con el valor del proceso en php ó
    - $(“#midiv”).html(datos) un div que mostrara el valor del proceso en php

    saludos

  37. la verdad es que se nota muy interesante pero aun no lo puedo hacer correr, de todos modos gracias por la informacion y si puedes colgar mas datos seria en hora buena.

  38. no puedo descargar el ejemplo no se si podrias avilitar de la misma forma que los demas datos pa parte de estilo.css y la functions.php. gracias

  39. no puedo descargar el ejemplo no se si podrias avilitar de la misma forma que los demas datos pa parte de estilo.css y la functions.php. gracias

  40. hola, recien queria hacer esto y m e3encontre con este gran ejercio y/o tutorial. solo que le encontre un problema, solo se puede agregar un registro. Y me fije que manda el id=0, me supongo que es por eso que no hay una contador que este sumando o algo por estilo.

    Saludos, espero me puedas orientar

  41. hola bueno te quiero felicitar ya que es un muy buen tutorial lo unico que falto es hacer funcionar el calendario quiesas fue un error mio, me gustaria que me ayudaras muchas gracias.

  42. Hola, muchas gracias por compartir este trabajo.
    Me ha gustado la solución que aplicas al poner el identificador de cliente en el parámetro “id” de cada tag tr. Voy a intentar usarlo en una situación similar.

    Saludos

  43. Gracias por el aporte, me parece muy bueno y se puede aplicar en varias situaciones.
    Ahora me gustaria saber si puedes ayudarme en un problema ke tengo: Bueno tengo una aplicacion en la ke los clientes suben diferentes archivos al servidor, tanto imagenes como documentos word y pdf, y todo esto se guarda en la bd del servidor, el problema ke tengo es como puedo eliminar los archivos del servidor.
    Te agradeceria mucho tu ayuda.

  44. Excelente trabajo!! Bastante completo. Estuve intentando poner el paginador de esta web y me encontré con los mismos problemas que @ryuu, me funciona todo excepto que me da problemas con los links de editar o borrar una vez que cambio de pagina. Veo que @ryuu y @Manuel Hernandez Aravena lo solventaron o lo tienen bien.

  45. hola, me encanta tu ejemplo, es muy ilustrativo y me ha ayudado a aprender mucho, pero aplicándolo me ha surgido un problema, y es que cuando modifico un registro (yo no oculto la lista, la mantengo en pantalla, no se si eso influirá) me funciona perfectamente, pero si vuelvo a editar otro, ya no me mete la página de actualizacion.php en la capa formulario, sino que me la carga.
    No se si me explico, es como si las funciones solo funcionaran una vez

  46. acabo de descubrir que si sacas el código:

    $(“table tr .modi a”).click(function(){…

    de consulta y lo metes en un .js no funciona, puede ser?

  47. @javi:

    Si ese fragmento de código JavaScript lo colocas a parte no te va a dar pues ese fragmento de consulta.php se llama dinamicamente mediante la funcion en JavaScript ConsultaDatos().

    Asi que en resumen cada archivo ó fragmento de código que se va a incluir en otro y va a trabajar con jQuery debe contener su codigo JavaScript incluido y no aparte.

    Parece dificil de entender no?

  48. Que buen ejemplo de codigo soy nuevo en este mundo de programar en php, y me pareci fabuloso todo cada una de las opciones funsiona de maravilla.Que buen aporte que nos haces a los que estamos hasta ahora aprendiendo.

  49. Buen artículo, pero CREO que falta algo importante o se me escapa (me extraña que nadie lo haya preguntado):
    Lo de functions.php y JQuery.functions.js. El código de las funciones ahí pone que se mete en el archivo JQuery.functions.js, pero por otro lado se requiere el functions.php. No entiendo, eso hay que explicarlo por favor.
    Saludos.

  50. functions.php es un script que incluye un calendario simple para seleccionar la fecha de registro. no esta posteado en el articulo, pero esta incluido en el comprimido.

    Saludos

  51. Vaya, suponía que se me escapaba algo. No había visto el enlace de descarga de los fuentes.

    Enhorabuena por el artículo y por la web.
    Un saludo y gracias.

  52. Buenisimo, es desde tiempo que intento solo de aprender a usar jquery y conectarlo a mysql sin resultado.
    gracias a ti es muy sencillo de intender y utilizar.

    gracias.

  53. Hola amigo me baje el codigo ya tengo creado la base de datos la tabla y todo, al igual cambie los parametros para la conexion a la base de datos pero cuando trata de acceder dice que [:(] Error al conectar a la base de datos, como soluciono esto?

  54. Gracias por el codigo a mi me funciona muy bien inclusive ejecutandolo en mi Ubuntu Server 10.

    Ahora, yo necesito agregar mas campos y cambiar los que ya están, es eso posible?

    basta con ir agregando los nuevos campos en los diferentes archivos donde estos son utilizados?
    (por su puesto, previo a la modificacion del archivo sql)

    Gracias por respoder.

  55. Buenas tengo un problema, hice algunos cambios en el codigo para adecuardo a un test que estoy haciendo y me dio el siguiente error
    >Notice: Undefined index:
    lo que hice fue cambiar nombres de las variables y agregar otras en el archivo, lo extraño es que una variable que quedo con el mismo nombre “telefono” si continuo trabajando,

    a continuacion el error completo:

    br />
    Notice: Undefined index: id_cliente in C:\wamp\www\proyecto\cliente\actualizar.php on line 7

    Notice: Undefined index: cedula in C:\wamp\www\proyecto\cliente\actualizar.php on line 8

    Notice: Undefined index: nombre in C:\wamp\www\proyecto\cliente\actualizar.php on line 9

    Notice: Undefined index: apellido1 in C:\wamp\www\proyecto\cliente\actualizar.php on line 10

    Notice: Undefined index: apellido2 in C:\wamp\www\proyecto\cliente\actualizar.php on line 11

    Notice: Undefined index: direccion in C:\wamp\www\proyecto\cliente\actualizar.php on line 12
    Array
    (
    [0] =>
    [1] =>
    [2] =>
    [3] =>
    [4] =>
    [5] => 6
    )
    Se produjo un error. Intente nuevamente

    aqui el codigo:
    < ?php
    require('functions.php');

    if(isset($_POST['submit']) ){
    require('clases/cliente.class.php');
    $objCliente=new Cliente;
    $id_cliente = htmlspecialchars(trim($_POST["id_cliente"]));
    $cedula = htmlspecialchars(trim($_POST['cedula']));
    $nombre = htmlspecialchars(trim($_POST['nombre']));
    $apellido1 = htmlspecialchars(trim($_POST['apellido1']));
    $apellido2 = htmlspecialchars(trim($_POST['apellido2']));
    $direccion = htmlspecialchars(trim($_POST['direccion']));
    $telefono = htmlspecialchars(trim($_POST['telefono']));
    $telefono = htmlspecialchars(trim($_POST['telefono']));
    if ( $objCliente->actualizar(array($cedula,$nombre,$apellido1,$apellido2,$direccion,$telefono),$id_cliente) == true){
    echo ‘Datos guardados’;
    }else{
    echo ‘Se produjo un error. Intente nuevamente’;
    }
    }else{
    if(isset($_GET['id'])){

    require(‘clases/cliente.class.php’);
    $objCliente=new Cliente;
    $consulta = $objCliente->mostrar_cliente($_GET['id']);
    $cliente = mysql_fetch_array($consulta);
    ?>



    < ?php
    }
    }
    ?>

    Gracias por la ayuda.

  56. Hola que tal esta chido el aporte pero, cambie el nombre de los cuadros de textos y a la ora de enviar los valores no m manda nada,

  57. Hola, todo me funciona bien, pero en editar o ingresar uno nuevo, me sale “Se produjo un error. Intente nuevamente”.. en eliminar, Mostar listado y mostrar registro todo ok

    No me considero novato pero tampoco experto… por eso quiero que me ayuden en la forma de que me salga el mensaje de error de forma que acostumbra php, sin que salga ese mensaje personalizado… Esto para ver porque me sale error…

    Gracias por la ayuda

  58. Excelente tutorial, te felicito, he hecho algo parecido pero habian cosas que no me quedaban claras como hacer, asi que me es de gran ayuda el ejemplo

  59. Guenas excelente tutorial, oye una pregunta se pude en ese formulario meter un archivo y sis e puede como seria la modificar ojala y me peudas ayudar

  60. Este tutorial está más que excelente. Hacía mucho tiempo que estaba buscando información de como realizar lo que explica aquí. Eres un buen maestro digno de seguir. Tiene muy buena pedagogía para enseñar. Sigue así. Que DIOS te vendiga. Gracias por el aporte.

  61. Excelente brother, gracias por este aporte buenisimo si tan solo ubiera encontrado hace 2 meses atras este post.

    gracias por el aporte :)

  62. Gracias por el gran aporte! …….. quisiera saber a que se refiere la linea: require(‘functions.php’);
    , donde está y que contiene ……. saludos.

  63. Hola.

    Ante todo gracias por compartir este código.

    Tengo cierta experiencia en PHP, pero me encuentro con un problema un poco raro al trastear con tu ejemplo, concretamente en consulta.php.

    Sencillamente, si modifico la estructura de la tabla (de BD, no HTML :P ) que se consulta la aplicación no devuelve ningún registro, aunque la tabla los contenga.

    No he tenido problema en modificar tu ejemplo para poner mis propios formularios, paginar, ordenar, poner lightboxes, validar campos y demás hierbas, y graba correctamente los registros en cualquier tabla (con los INSERT correctos, variables y tal, evidentemente) pero sólo los muestra en consulta.php cuando utilizo una tabla con la estructura original del ejemplo.

    Sinceramente no veo el problema, ya que lo único que se hace en consulta.php es instanciar:

    require(‘clases/cliente.class.php’);
    $objCliente=new Cliente;
    $consulta=$objCliente->mostrar_clientes();

    Luego en cliente.class.php se devuelve el resultado:

    function mostrar_clientes(){
    if($this->con->conectar()==true){
    return mysql_query(“SELECT * FROM archivos (por ejemplo) ORDER BY id DESC”);
    }
    }

    Y sin más misterios, si se ha hecho la consulta usamos el array $cliente para visualizar:

    if($consulta) {
    while( $cliente = mysql_fetch_array($consulta) ){

    Respuesta
  64. @Jow:

    mmm que raro no? asegurate que la consulta sql sea conforme. Pero como veo en tu comentario todo esta bien. No te sale algun mensaje en pantalla generado por mysql?

  65. Te amooooo!!!!!, excelente tutorial! , si puedes envíame más ejemplos please.

    Pero con esto más que suficiente para disipar mis dudas.
    Besitos!

  66. Excelente!
    necesito llenar un combo desde mysql de este mismo modo, podrían ayudarme?
    ya tengo la función pero no sé cómo llenarlo :( soy nueva usando esta tecnología
    alguien puede indicarme cómo lo lleno ?
    gracias

  67. Para llenar un combo con mysql lo unico que tienes que hacer es realizar una consulta a la base de datos y recoger los datos con mysql_fetch_assoc estoy te permitirá tener un array asociativo que quedara de la siguiente manera $array[$nombre_campo]

    Puedes recorrer el array con un foreach y crear el combo dinamicamente

    Eso a sido un poco a saco si tienes alguna duda enviame un mail ala suerte! :p

  68. muy bueno tu aporte, pero no me corre tu ejemplo ya que al iniciar la fecha de nacimiento no me sale el datapicker, y me envia muchos erros sobre todo en el label con php podrias corregirlos krnalito.

  69. Buenos días.

    Excelente artículo y trabajo. estoy comenzando una aplciación y esto me sirvió para arrancar con el pie derecho.

    sin embargo hice algunas modificaciones, pero ya no elimina. a qué correo les puedo enviar los hecho para que, por favor, me ayuden a corregir el error?

  70. ola causa quisiera saber como puedo agregarle una paginacion con esas imagenes que tienes en la carpeta img seria bueno que lo publicaras con esas nuevas modificacion. Y esta de lo máximo tu ayuda

  71. muy bueno el aporte, muchas gracias amigo y es cierto no muestra el datapicker pero a mi si me funciono a la perfección. si realiza las funciones..

    gracias me silucionaste el problema y ademas resolviste muchas dudas.. gracias.

  72. Hola, estoy empezando con Php y me surgen el siguiente error:
    Pasos que he hecho hasta ahora
    Instalo Wampserver 2.1
    En la carpeta WWW grabo todo el codigo fuente del ejemplo.
    Voy a localhost para ver lo que hace y me da el siguiente error

    Error al seleccionar la base de datos

    Y ya no se seguir.

    Alguna ayuda para este aprendiz.

    Gracias

  73. @Joaquin :

    Ese error sale por que debes especificar el nombre de la base de datos, del servidor, usuario y password.

    por lo general el servidor es localhost, el usuario es root y la clave esta vacia. solo verifica el nombre de tu base de datos

  74. Hola JesusVdl, gracias por tu molestia, perdona que insista, en el ejemplo que esta arriba y que descargo con todo echo para ver como funciona, hay una carpeta que se llama sql en donde va el archivo “cliente” y en la carpeta clases el archivo “conexion.clas lleva lo siguiente:

    < ?php
    class DBManager{
    var $conect;

    var $BaseDatos;
    var $Servidor;
    var $Usuario;
    var $Clave;
    function DBManager(){
    $this->BaseDatos = “empresa”;
    $this->Servidor = “localhost”;
    $this->Usuario = “root”;
    $this->Clave = “”;
    }

    function conectar() {

    if(!($con=@mysql_connect($this->Servidor,$this->Usuario,$this->Clave))){
    echo”

    [:(] Error al conectar a la base de datos

    “;
    exit();
    }
    if (!@mysql_select_db($this->BaseDatos,$con)){
    echo “

    [:(] Error al seleccionar la base de datos

    “;
    exit();
    }
    $this->conect=$con;
    return true;
    }
    }
    ?>

    El nombre de base de datos sale como “empresa” si lo cambio por “sql” o por “cliente” sigue dando error , lo que no entiendo es como se le dice en PHP el enlace para ir a esa carpeta, quiza este obsesionado de la manera que funcionan los enlades en html y aqui son de otra manera y por eso no consigo que me funcione.

    Un saludo

  75. hola jesusvld saludos, excelente trabajo, muchaaas gracias, eres grande y dices que no sabes usar JQuery, me sirvio mucho tu ejemplo, de nuevo muchas graciaaas

  76. muy buen aporte.

    lo esruve analizando y modifique para crear una web con menu y varios mantenedores, y ahi me encuentro con un problema.

    lo que me gustaria es saber donde declaras el objeto formulario y tabla a los cuales haces la actualizacion asincrona ???

  77. Muchas gracias por la aportación. Muy didáctico para un principiante de AJAX como yo.
    Me encontré con un problema:
    Mientras que en Firefox y Google Crome funcionaba 100% en I Explorer 8 no actualizaba las modificaciones que hacía tras editar los registros.
    Para resolver el problema modifiqué el javascript del archivo consulta.php, en la parte “mostrar formulario de actualizar datos”, poniendo type: “POST” en lugar de type: “GET”.

    ORIGINAL:
    // mostrar formulario de actualizar datos
    $(“table tr .modi a”).click(function(){
    $(‘#tabla’).hide();
    $(“#formulario”).show();
    $.ajax({
    url: this.href,
    type: “GET”,
    MODIFICADO:
    // mostrar formulario de actualizar datos
    $(“table tr .modi a”).click(function(){
    $(‘#tabla’).hide();
    $(“#formulario”).show();
    $.ajax({
    url: this.href,
    type: “POST”,
    Espero que os sirva mi pequeña contribución.

  78. Muy buen tutorial

    Solo tengo una duda ya que apenas inicio, como le puedo ponerpara que me ponga paginacion a mi tabla de este ejemplo

    Gracias por la aportacion

    saludos

  79. hola, no consigo conectar con la Base de datos, introduzco qil930 ,localhost, qil930 y la contraseña pero no se conecta.

    en cambio con otro menu de usuario si que se me conecta con el siguiente codigo:

    < ?
    $dbhost="localhost"; //Host del mysql
    $dbuser="qil930"; //Usuario del mysql
    $dbpass="Casadirecta1"; //Password del mysql
    $db="qil930"; //db donde se creará la tabla users
    $link = mysql_connect("$dbhost","$dbuser","$dbpass");//conectamos y seleccionamos db
    mysql_select_db("$db");
    session_start(); //Comenzamos la sesión, esto se explica despues en el Sistema de Login
    ?>

  80. problema solucionado! simplemente era que al haber hecho la conexion mal la primera vez… con el include_once()… no me actualizaba los valores de la base de datos…

    muchas gracias!

  81. amigos urgente, tengo problemas en la conexion, esta todo bien al parecer, pero me tira el error
    [:(] Error al conectar a la base de datos

    no he encontrado que pueda ser, favor amigos ayudenme lo antes posible

  82. amigos porfa, segui paso a paso las instrucciones y no puedo conectarme, me dice

    error al conectarse a la base de datos

    alguien me dice por
    que pf

  83. muy buenas tardes tengo una gran duda, en el tercer pantallazo aparece la variable $campos, la cual no ha sido declarada por ningun lado,aparece de repente, ¿alguien podriadecirme porfavor por que aparece ahi?

  84. hay otra cosa q no me ha dejado seguir, en el pantallazo no 3 la funcion de la clase cliente (insertar), lleva una consulta incompleta,falto la parte de especificar los valores, eso es lo q yo quiero saber.

  85. Muy bueno y funciona correctamente, además es muy simple de comprender.

    Con este ejemplo dan ganas de programar las páginas web sólo con el JQuery.

    Muy bueno el aporte, otra vez y muchas gracias.

  86. Felicidades por el aporte es un sistema muy interezando, pero seria mas genial si contara con un buscador y paginar,ps es necesario cuando llegamos a tener muchos datos en la base de datos.. felicidades eh

  87. Muy bien, era lo que necesitaba solo que a modificar un poco me pasa algo raro: a rellenar el formulario tengo que hacerlo rapidito que si tardo un poco mas no me graba los datos en la base de datos lo mismo me pasa con actualizar …Que puede ser ???

  88. Quisiera saber si utilizaste JQuery solo o hay una version especial para usarla en php.

    Tu tutorial esta bueno. Gran aporte

  89. hola buen material , quisiera saber como validar los datos , por ejemplo telefono que no deje ingresar letras se puede usar el jquery validate?,gracias

  90. Muchas gracias, me ayudo muchísimo para entender esta nueva tecnología.

    blog de este estilo incentivan el crecimiento del conocimiento, felicitaciones.

    slds desde colombia.

  91. hola: dime es necesario tener archivos : nuevo.php
    actualiza.php eliminar.php ……… ¿cuando se produce el evento…. ?
    se podria manejar todo en un mismo archivo … osea en index.php y digamos ahi mismo salga un popup para hacer lo que deseamos… de tal forma mi ultima pregunta seria … si .. da lo mismo .. tener popup en el mismo index.php versus hacerlo archivo por archivo .. claro con el jquery
    cual es mas rapido? bueno espero me aclares estas dudas … saludos y muchas gracias…

  92. buen dia!!!
    estuve checando el codigo, es justo lo que necesito para la escuela, pero al momento de intentar adapatarlo a mi base de datos, quitando la fecha de nacimiento y agregando un user_name y un password, estos ultimos datos ya no me los reconoce el arreglo con el que manejas el insert ni el update, simplemente los manda vacios, quisiera saber porque pasa esto y sobre todo, como arreglarlo

  93. Buenas a todos…
    soy novato en esto pero tengo algunas nociones de php y mysql,el ejemplo que acabo de descargar lo quiero ejecutar con el wampserver pero me sale este error: ” [:(] Error al seleccionar la base de datos ” ahora cuando estoy creando la base de datos en el phpmyadmin no se que nombre ponerle???.Gracias a todos

  94. como podria ser si yo al ingresar un registro quisiera ingresar una imagen tambien?

    si alguien me orienta se lo agradeceia porque lo necesito mucho.

  95. Buenas estoy intentando recolocar los php en otras carpetas para tenerlo organizado pero la llamada a los php con ajax no muestra el contenido en la tabla, pasandole esta ruta relativa:
    rsccliente/consultaCli.php
    $(document).ready(function(){
    $(‘#ulnavigator > li’).click(function(){
    //$(‘#formulario’).html(”);
    $(“#formulario”).hide();
    $(‘#tabla’).show();
    var urlx = $(this).attr(‘xref’);

    //debugger;
    //$.get(urlx, function(data) {
    // $(‘#formulario’).html(data);
    // alert(‘Load was performed.’ + data);
    //});
    UpdateTabla(urlx);
    return false;
    });
    });

    Esto esta en jquery.funtions.js
    function UpdateTabla(Url){
    $.ajax({
    url: Url,
    cache: false,
    type: ‘POST’,
    success: function(data){
    $(“#tabla”).html(data);
    }
    });
    }

    El monitor de WebExplorer me muestra la carga del php
    http://localhost/rsccliente/consultaCli.php php pero no sale en la tabla. Pasa algo por poner los php en carpètas aparte.

  96. Hola muy buen dia…

    Soy nuevo en esto y estoy tratando de utilizar este codigo en un pequeño proyecto, pero tengo algunos problemas..
    He comprendido la mayoria del codigo y ya logre hacer algunas de las funciones basicas con los registros en la BD..
    El problema que tengo en este momento es ala hora de llamar a las funciones dentro de jquery.functions.js..
    Por ejemplo:
    Al hacer click en el Boton “cancelar” no sucede nada.. Dejo el codigo final de este…

    ” ), Es decir, ninguno de los eventos “onclick” y “onsubmint” se ejecutan…

    Espero puedan ayudarme con esto…
    muchas gracias..
    saludos..

    Felicitaciones por el blog…
    Blogs como estos, son los que realmente animan a seguir aprendiendo…

  97. Muchísimas gracias! Es facil de instalar para ver el código y FUNCIONA! Solo hay que editar el conexion.class.php con nombre de usuario y clave y crear la tabla en MySql

    Ademas me permite ver como se implementan los objetos en PHP! Muy Bueno Gracias y felicitaciones!

  98. hOLA SALUDOS, UN GRAN POST MUY BUENO PERO USANDO TU CODIGO ME LANZO EL SERVIDOR WAMP ESTE ERROR: Warning: include() [function.include]: Failed opening ‘consulta.php’ for inclusion (include_path=’.;C:\php5\pear’) in C:\wamp\www\JQUERY_PRUEBA\index.php on line 16

    PODRIAS AYUDARME USO WINDOWS SEVEN SI TE SIRVE DE ALGO Y GOOGLE CHROME

  99. muy bueno el post, lo unico que le faltaria es un buscador y un paginador y quedaria exelente. tenes alguna idea como agregarlos que me esta haciendo falta. gracias

  100. corre de maravilla pero es mucho para un novato es para user avansado …en php
    . no tendras un codigitos para los novatos y comprendible de ante mano muchas gracias …

  101. Hola:
    Ante todo, te felicito por un ejemplo tan claro.
    Mi pregunta es:
    ¿Como evitar que convierta todos los textos a mayúsculas?

  102. hola un ejemblo muy bien explicado solol tengo una pequeña duda si kiero meter un combobox pero que hace referemcia a otra tabla? es que lo ando haciendo pero me marca error, nesecito meter a fuerzas las consultas en la clase cliente supongo? no espero respuesta xD

  103. edit ya pude con el problema muchisismas gracias (= se te agradece, espero que si me surga otra duda puedas constestar aun que tu codigo esta muy bien explicado por si solo.

  104. @jesusvid:

    Al introducir texto en el formulario, necesitaría saber como evitar la conversión automática a mayúsculas. ¿Como hacer para que, si quiero escribir en el nombre “Antonio Fernández”, lo deje tal cual?.

    Actualmente lo convierte automáticamente a “ANTONIO FERNÁNDEZ”, aunque en la tabla “cliente” si lo deja como “Antonio Fernández”.

  105. Bueno… me contesto a mí mismo:

    Para mostrar el texto tal cual se introduce en cada columna, hay que eliminar la siguiente linea 7 de la hoja de estilos webapp/css/estilo.css, que contiene:

    text-transform:uppercase;

    Un saludo.

  106. Buen dia, me encanta esta mini-aplicacion una duda. Como hago para que solo aparezca el boton Nuevo. y cuando se registren aparezca en la parte de abajo tus datos fueron: esto esto y esto
    y en otra pagina aparte la consulta(listo).

    lo que necesito es que solo muestre la informacion que agregaste al registrarte. alguien?

  107. HOla:

    Muchas gracias por el aporte. Quería consultar una duda que tengo: En los formularios se define el campo action, que indica la URL .php a la que se envían los datos del formulario, pero a la vez se ejecuta una función javascript que vuelve a enviar los datos a la misma URL. ¿No es hacer la misma acción dos veces?

    Muchas gracias de nuevo.

  108. Muchas gracias por la explicación, es realmente buena y clara. Sólo un pequeño detalle ortográfico. Al principio del texto escribes “ha mi parecer” ese ha es la tercera persona del singular del presente de indicativo del verbo haber, cuando pretendes escribir “a mi parecer” done a es una preposición.

  109. Hola muchas gracias por el tuto esta genial, solo que tengo un error mira

    Fatal error: Class ‘Cliente’ not found in C:\ACE\DesarrolloWeb\consulta.php on line 3

    me podrias ayudar gracias

  110. ola que tal.. un apreguntota

    como le hago en la funcion grabar y actualizar para guardar select..

    bueno mas como ira en “jQuery.functions.js”
    veo que para opciones lo declaras asi
    “var alternativas = $(“input[@name='alternativas']:checked”).attr(“value”);”

    como declaro un select?? saludos

  111. Hola me gustaría saber cual es el código que tengo que aplicar con, php para que las partes que sean null en la base de datos no aparezcan.

    gracias por vuestro tiempo. un saludo

  112. No habria un conflicto al ejecutar las acciones de javascript y la llamada a php directa a la vez?
    cual tiene la prioridad?
    el ajax pisa a la llamada al php directo?

  113. @Daniel:

    En realidad no hay conflicto alguno, las acciones javascript son un puente entre las acciones del usuarios y los procesos en php, no entran en conflicto alguno. El uso de estos lenguajes cumplen propositos diferentes en la aplicación de ejemplo.

  114. Hola, oye tengo una duda, esque cuando ejecuto la aplicación me manda este error:
    Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in C:xampphtdocswebappactualizar.php on line 29
    ojala puedas ayudarme :)

  115. Excelente yo creo que mi profesor de PHP saco información de aqui, bien explicado y buen codigo, una duda :p.
    En el caso que la base de datos sea de otro manejador obvio que quizá la base de datos tenga el mismo nombre peró, ¿Funcionara con otras bases de datos? estas clases como la de cliente o sera necesario implementar PDO para alzanzar esto que te digo?
    De antemano gracias por leer mi chorote y me harias un programador feliz si me respondieras.
    :)

  116. Estimado, excelente el código, mis felicitaciones, solo una consulta, he intentado implementar un input para poder buscar un registro especifico o los que contengan alguna letra de lo buscado y no lo he podido lograr, tu me podrías ayudar con eso.
    Saludos

  117. Está muy bueno el código . Muchas Gracias, yo lo estoy modificando para poder usarlo como mantenimiento con cabecera y detalle, … en la cabecera no hay problema pero al hacer el detalle ya no me sale con el formato por que podrá ser?

Deja un comentario