empirefx/controllerWelcome.php

## controllerWelcome.php
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Welcome extends CI_Controller {

  /**
	 * Index Page for this controller.
	 *
	 * Maps to the following URL
	 * 		http://example.com/index.php/welcome
	 *	- or -
	 * 		http://example.com/index.php/welcome/index
	 *	- or -
	 * Since this controller is set as the default controller in
	 * config/routes.php, it's displayed at http://example.com/
	 *
	 * So any other public methods not prefixed with an underscore will
	 * map to /index.php/welcome/<method_name>
	 * @see http://codeigniter.com/user_guide/general/urls.html
	 */
	public function index()
	{
		$this->load->helper('url');
		$this->load->view('welcome_message');
	}

	public function mostrar_usuarios()
	{
		$this->load->model('usuario_model');
		$lista = $this->usuario_model->lista_usuario();
		echo json_encode($lista);
	}

	public function nuevo_usuario($nombre, $apellido)
	{
		$this->load->model('usuario_model');
		$this->usuario_model->agregar_usuario($nombre, $apellido);
		echo json_encode(array("estado"=>"Completado"));
	}

	public function update_dash()
	{
		$this->load->model('usuario_model');
		$lista = $this->usuario_model->lista_usuario_reducido();

		echo json_encode($lista);
	}

	public function vermas_dash($pagina)
	{
		$this->load->model('usuario_model');
		$lista = $this->usuario_model->update_dash($pagina);

		echo json_encode($lista);
	}

	public function editar_usuario($param, $texto)
	{
		$dev = $this->uri->uri_to_assoc();
		echo json_encode(array("estado"=>"Completado"));
	}
}

/* End of file welcome.php */
/* Location: ./application/controllers/welcome.php */

## modelUsuario_model.php
<?php
class Usuario_model extends CI_Model {

    function __construct()
    {
        // Call the Model constructor
        parent::__construct();
    }

    function lista_usuario()
    {
        $query = $this->db->get('usuarios');
        return $query->result();
    }

    function lista_usuario_reducido()
    {
        $this->db->from('usuarios')->order_by('id', 'desc')->limit(4);
        $query = $this->db->get();

        return $query->result();
    }

    function update_dash($pagina, $cantidad = 4)
    {
        if ($pagina != 0) {
            $pagina = (int)$pagina * $cantidad;
        }
        if($pagina AND is_int($pagina)){
            $this->db->from('usuarios')->order_by('id', 'desc')->limit($cantidad,$pagina);
            $query = $this->db->get();
            return $query->result();
        }
    }

    function agregar_usuario($nombre, $apellido)
    {
      $data = array(
    		'nombre' => $nombre,
    		'apellido' => $apellido,
    	);
    	$this->db->insert('usuarios', $data);
    }

}
?>

## sql.sql
-- phpMyAdmin SQL Dump
-- version 3.3.9
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Oct 18, 2011 at 09:25 p.m.
-- Server version: 5.5.8
-- PHP Version: 5.3.5

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `example`
--

-- --------------------------------------------------------

--
-- Table structure for table `usuarios`
--

CREATE TABLE IF NOT EXISTS `usuarios` (
  `id` int(12) NOT NULL AUTO_INCREMENT,
  `nombre` varchar(30) NOT NULL,
  `apellido` varchar(30) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=39 ;

--
-- Dumping data for table `usuarios`
--

INSERT INTO `usuarios` (`id`, `nombre`, `apellido`) VALUES
(1, 'Nicolas', 'gribps'),
(27, 'Fausto', 'Grsooo'),
(28, 'Nicoasl', 'Crea'),
(29, 'Westy', 'Sitne'),
(30, 'Westy', 'Sitne'),
(31, 'Fest', 'FAsrry'),
(32, 'Creawly', 'Hopped'),
(33, 'mitico', 'calico'),
(34, 'cuando', 'ahora'),
(35, 'sino', 'seradeas'),
(36, 'cuasd', 'adsd'),
(37, 'otro', 'nombre'),
(38, 'sin%20sver', 'nasd');

## viewWelcome_message.php
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
	<title>Welcome to CodeIgniter</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
	<style type="text/css">

	::selection{ background-color: #E13300; color: white; }
	::moz-selection{ background-color: #E13300; color: white; }
	::webkit-selection{ background-color: #E13300; color: white; }

	body {
		background-color: #fff;
		margin: 40px;
		font: 13px/20px normal Helvetica, Arial, sans-serif;
		color: #4F5155;
	}

	a {
		color: #003399;
		background-color: transparent;
		font-weight: normal;
	}

	hr {
		border:0;
		background-color: #D0D0D0;
		height: 1px;
	}

	h1 {
		color: #444;
		background-color: transparent;
		border-bottom: 1px solid #D0D0D0;
		font-size: 19px;
		font-weight: normal;
		margin: 0 0 14px 0;
		padding: 14px 15px 10px 15px;
	}

	code {
		font-family: Consolas, Monaco, Courier New, Courier, monospace;
		font-size: 12px;
		background-color: #f9f9f9;
		border: 1px solid #D0D0D0;
		color: #002166;
		display: block;
		margin: 14px 0 14px 0;
		padding: 12px 10px 12px 10px;
	}

	#body{
		margin: 0 15px 0 15px;
	}

	p.footer{
		text-align: right;
		font-size: 11px;
		border-top: 1px solid #D0D0D0;
		line-height: 32px;
		padding: 0 10px 0 10px;
		margin: 20px 0 0 0;
	}

	#container{
		margin: 10px;
		border: 1px solid #D0D0D0;
		-webkit-box-shadow: 0 0 8px #D0D0D0;
	}
	.editable span:hover{
		background-color:#FFFFED;
	}
	.boton_mas{
		background-color:#F4F9FC;
		font-size:10px;
		color:#2888CC;
	}
	</style>
	<script type="text/javascript">

	function update_dash(){
		$.getJSON('<?= site_url('welcome/update_dash') ?>', {}, function(data) {
			$('code.dashboard').empty().html(function(){
				jQuery.each(data, function(index) {
					$('code.dashboard').append('<p>' + data[index].id + " : " + data[index].nombre + " : " + data[index].apellido + '</p>');
				});
			});
		});
	}

	function vermas_dash(pagina){
		$.getJSON('<?= site_url('welcome/vermas_dash') ?>/' + pagina, {}, function(data) {
			if (!jQuery.isEmptyObject(data)) {
				$('code.dashboard').html(function(){
					jQuery.each(data, function(index) {
						$('code.dashboard').append('<p>' + data[index].id + " : " + data[index].nombre + " : " + data[index].apellido + '</p>');
					});
				});
			}else{
				$('.boton_mas center').empty().html('<p>VACIO</p>');
				 var cssObj = {
				 	'background-color' : '#E5E5E0',
				 	'color' : '#777771'
				}
				$('.boton_mas').css(cssObj);
			}
		});
	}

	$(document).ready(function(){
		var pagina = 1;
		update_dash();
		dashboard = setInterval("update_dash()", 10000);

		$("#lista").click(function(){
			$.get('<?= site_url('welcome/mostrar_usuarios') ?>', {}, function(data) {
				$('code.lista_usuario').html(data);
			});
		});

		$("#boton_agregarUsuario").click(function(){
			usuarion = $("#nombre").val();
			usuarioa = $("#apellido").val();

			$.getJSON('<?=site_url('welcome/nuevo_usuario')?>/'+usuarion+'/'+usuarioa,
				function(recibido) {
					$('.log_usuarioAgregar').append( '<code>' + recibido.estado + '</code>' );
			});
		});

		$(".editable span").bind("mouseenter",function(){
			parametro = $(this).attr("class");
			parametro2 = $(this).text();

			$("span").one("click", function() {
				$(this).html('<input type="text" name="' + parametro + '" size="8" value="' + parametro2 + '" />');
			});
		}).bind("mouseleave",function(){
			parametro3 = $("span input").val();
			if(!parametro3 == '' && parametro3 != parametro2){
				$.getJSON('<?=site_url('welcome/editar_usuario')?>/'+parametro+'/'+parametro3,
				function(recibido) {
					$('.resultado').html( recibido.estado );
				});
				$(this).html(parametro3);
			}else{
				$(this).html(parametro2);
			}
		});

		$(".boton_mas").click(function(){
			clearInterval(dashboard);
			vermas_dash(pagina);
			pagina += 1;
		});

});
</script>
</head>
<body>
	<div id="container">
		<h1>Probando ejemplos con PHP, JSON y JQUERY</h1>
		<div id="body">
			<p>Pedir datos a la base de datos y mostralo a continuación.</p>
			<a href="#" id="lista">Mostar usuarios</a>
			<code class="lista_usuario"></code>
		</div>
		<hr>
		<div id="body">
			<p>Agregar datos.</p>
			<form action="" method="post">
			<p>
			Nombre: <input type="text" name="nombre" id="nombre" size="50" />
			Apellido: <input type="text" name="apellido" id="apellido" size="50" /><BR><BR>
			<a href="#" id="boton_agregarUsuario" >Agregar usuario</a>
			</p>
			</form>
			<div class="log_usuarioAgregar"></div>
		</div>
		<hr>
		<div id="body">
			<p>Visualizar datos.</p>
			<code class="dashboard">
				<center><img class="load" src="http://cloud.github.com/downloads/empirefx/Ejemplos-codeigniter-Jquery-JSON-AJAX/load.gif"></center>
			</code>
			<div class="boton_mas"><center>VER MAS</center></div>
		</div>
		<hr>
		<div id="body">
			<p>Editar datos.</p>
			<code class="editable">
				<p>My nombre es <b><span id="edit" class="nombre">pepito</span></b> y mi apellido es <b><span id="edit" class="apellido">Pepilon</span></b></p>
			</code>
			<code class="resultado"></code>
		</div>
		<p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p>
	</div>
</body>
</html>
	<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

	class Welcome extends CI_Controller {

	/**
	* Index Page for this controller.
	*
	* Maps to the following URL
	* http://example.com/index.php/welcome
	* - or -
	* http://example.com/index.php/welcome/index
	* - or -
	* Since this controller is set as the default controller in
	* config/routes.php, it's displayed at http://example.com/
	*
	* So any other public methods not prefixed with an underscore will
	* map to /index.php/welcome/<method_name>
	* @see http://codeigniter.com/user_guide/general/urls.html
	*/
	public function index()
	{
	$this->load->helper('url');
	$this->load->view('welcome_message');
	}

	public function mostrar_usuarios()
	{
	$this->load->model('usuario_model');
	$lista = $this->usuario_model->lista_usuario();
	echo json_encode($lista);
	}

	public function nuevo_usuario($nombre, $apellido)
	{
	$this->load->model('usuario_model');
	$this->usuario_model->agregar_usuario($nombre, $apellido);
	echo json_encode(array("estado"=>"Completado"));
	}

	public function update_dash()
	{
	$this->load->model('usuario_model');
	$lista = $this->usuario_model->lista_usuario_reducido();

	echo json_encode($lista);
	}

	public function vermas_dash($pagina)
	{
	$this->load->model('usuario_model');
	$lista = $this->usuario_model->update_dash($pagina);

	echo json_encode($lista);
	}

	public function editar_usuario($param, $texto)
	{
	$dev = $this->uri->uri_to_assoc();
	echo json_encode(array("estado"=>"Completado"));
	}
	}

	/* End of file welcome.php */
	/* Location: ./application/controllers/welcome.php */
	<?php
	class Usuario_model extends CI_Model {

	function __construct()
	{
	// Call the Model constructor
	parent::__construct();
	}

	function lista_usuario()
	{
	$query = $this->db->get('usuarios');
	return $query->result();
	}

	function lista_usuario_reducido()
	{
	$this->db->from('usuarios')->order_by('id', 'desc')->limit(4);
	$query = $this->db->get();

	return $query->result();
	}

	function update_dash($pagina, $cantidad = 4)
	{
	if ($pagina != 0) {
	$pagina = (int)$pagina * $cantidad;
	}
	if($pagina AND is_int($pagina)){
	$this->db->from('usuarios')->order_by('id', 'desc')->limit($cantidad,$pagina);
	$query = $this->db->get();
	return $query->result();
	}
	}

	function agregar_usuario($nombre, $apellido)
	{
	$data = array(
	'nombre' => $nombre,
	'apellido' => $apellido,
	);
	$this->db->insert('usuarios', $data);
	}

	}
	?>
	-- phpMyAdmin SQL Dump
	-- version 3.3.9
	-- http://www.phpmyadmin.net
	--
	-- Host: localhost
	-- Generation Time: Oct 18, 2011 at 09:25 p.m.
	-- Server version: 5.5.8
	-- PHP Version: 5.3.5

	SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";


	/!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT /;
	/!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS /;
	/!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION /;
	/!40101 SET NAMES utf8 /;

	--
	-- Database: `example`
	--

	-- --------------------------------------------------------

	--
	-- Table structure for table `usuarios`
	--

	CREATE TABLE IF NOT EXISTS `usuarios` (
	`id` int(12) NOT NULL AUTO_INCREMENT,
	`nombre` varchar(30) NOT NULL,
	`apellido` varchar(30) NOT NULL,
	PRIMARY KEY (`id`)
	) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=39 ;

	--
	-- Dumping data for table `usuarios`
	--

	INSERT INTO `usuarios` (`id`, `nombre`, `apellido`) VALUES
	(1, 'Nicolas', 'gribps'),
	(27, 'Fausto', 'Grsooo'),
	(28, 'Nicoasl', 'Crea'),
	(29, 'Westy', 'Sitne'),
	(30, 'Westy', 'Sitne'),
	(31, 'Fest', 'FAsrry'),
	(32, 'Creawly', 'Hopped'),
	(33, 'mitico', 'calico'),
	(34, 'cuando', 'ahora'),
	(35, 'sino', 'seradeas'),
	(36, 'cuasd', 'adsd'),
	(37, 'otro', 'nombre'),
	(38, 'sin%20sver', 'nasd');
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Welcome to CodeIgniter</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
	<style type="text/css">

	::selection{ background-color: #E13300; color: white; }
	::moz-selection{ background-color: #E13300; color: white; }
	::webkit-selection{ background-color: #E13300; color: white; }

	body {
	background-color: #fff;
	margin: 40px;
	font: 13px/20px normal Helvetica, Arial, sans-serif;
	color: #4F5155;
	}

	a {
	color: #003399;
	background-color: transparent;
	font-weight: normal;
	}

	hr {
	border:0;
	background-color: #D0D0D0;
	height: 1px;
	}

	h1 {
	color: #444;
	background-color: transparent;
	border-bottom: 1px solid #D0D0D0;
	font-size: 19px;
	font-weight: normal;
	margin: 0 0 14px 0;
	padding: 14px 15px 10px 15px;
	}

	code {
	font-family: Consolas, Monaco, Courier New, Courier, monospace;
	font-size: 12px;
	background-color: #f9f9f9;
	border: 1px solid #D0D0D0;
	color: #002166;
	display: block;
	margin: 14px 0 14px 0;
	padding: 12px 10px 12px 10px;
	}

	#body{
	margin: 0 15px 0 15px;
	}

	p.footer{
	text-align: right;
	font-size: 11px;
	border-top: 1px solid #D0D0D0;
	line-height: 32px;
	padding: 0 10px 0 10px;
	margin: 20px 0 0 0;
	}

	#container{
	margin: 10px;
	border: 1px solid #D0D0D0;
	-webkit-box-shadow: 0 0 8px #D0D0D0;
	}
	.editable span:hover{
	background-color:#FFFFED;
	}
	.boton_mas{
	background-color:#F4F9FC;
	font-size:10px;
	color:#2888CC;
	}
	</style>
	<script type="text/javascript">

	function update_dash(){
	$.getJSON('<?= site_url('welcome/update_dash') ?>', {}, function(data) {
	$('code.dashboard').empty().html(function(){
	jQuery.each(data, function(index) {
	$('code.dashboard').append('<p>' + data[index].id + " : " + data[index].nombre + " : " + data[index].apellido + '</p>');
	});
	});
	});
	}

	function vermas_dash(pagina){
	$.getJSON('<?= site_url('welcome/vermas_dash') ?>/' + pagina, {}, function(data) {
	if (!jQuery.isEmptyObject(data)) {
	$('code.dashboard').html(function(){
	jQuery.each(data, function(index) {
	$('code.dashboard').append('<p>' + data[index].id + " : " + data[index].nombre + " : " + data[index].apellido + '</p>');
	});
	});
	}else{
	$('.boton_mas center').empty().html('<p>VACIO</p>');
	var cssObj = {
	'background-color' : '#E5E5E0',
	'color' : '#777771'
	}
	$('.boton_mas').css(cssObj);
	}
	});
	}

	$(document).ready(function(){
	var pagina = 1;
	update_dash();
	dashboard = setInterval("update_dash()", 10000);

	$("#lista").click(function(){
	$.get('<?= site_url('welcome/mostrar_usuarios') ?>', {}, function(data) {
	$('code.lista_usuario').html(data);
	});
	});

	$("#boton_agregarUsuario").click(function(){
	usuarion = $("#nombre").val();
	usuarioa = $("#apellido").val();

	$.getJSON('<?=site_url('welcome/nuevo_usuario')?>/'+usuarion+'/'+usuarioa,
	function(recibido) {
	$('.log_usuarioAgregar').append( '<code>' + recibido.estado + '</code>' );
	});
	});

	$(".editable span").bind("mouseenter",function(){
	parametro = $(this).attr("class");
	parametro2 = $(this).text();

	$("span").one("click", function() {
	$(this).html('<input type="text" name="' + parametro + '" size="8" value="' + parametro2 + '" />');
	});
	}).bind("mouseleave",function(){
	parametro3 = $("span input").val();
	if(!parametro3 == '' && parametro3 != parametro2){
	$.getJSON('<?=site_url('welcome/editar_usuario')?>/'+parametro+'/'+parametro3,
	function(recibido) {
	$('.resultado').html( recibido.estado );
	});
	$(this).html(parametro3);
	}else{
	$(this).html(parametro2);
	}
	});

	$(".boton_mas").click(function(){
	clearInterval(dashboard);
	vermas_dash(pagina);
	pagina += 1;
	});

	});
	</script>
	</head>
	<body>
	<div id="container">
	<h1>Probando ejemplos con PHP, JSON y JQUERY</h1>
	<div id="body">
	<p>Pedir datos a la base de datos y mostralo a continuación.</p>
	<a href="#" id="lista">Mostar usuarios</a>
	<code class="lista_usuario"></code>
	</div>
	<hr>
	<div id="body">
	<p>Agregar datos.</p>
	<form action="" method="post">
	<p>
	Nombre: <input type="text" name="nombre" id="nombre" size="50" />
	Apellido: <input type="text" name="apellido" id="apellido" size="50" /><BR><BR>
	<a href="#" id="boton_agregarUsuario" >Agregar usuario</a>
	</p>
	</form>
	<div class="log_usuarioAgregar"></div>
	</div>
	<hr>
	<div id="body">
	<p>Visualizar datos.</p>
	<code class="dashboard">
	<center><img class="load" src="http://cloud.github.com/downloads/empirefx/Ejemplos-codeigniter-Jquery-JSON-AJAX/load.gif"></center>
	</code>
	<div class="boton_mas"><center>VER MAS</center></div>
	</div>
	<hr>
	<div id="body">
	<p>Editar datos.</p>
	<code class="editable">
	<p>My nombre es <b><span id="edit" class="nombre">pepito</span></b> y mi apellido es <b><span id="edit" class="apellido">Pepilon</span></b></p>
	</code>
	<code class="resultado"></code>
	</div>
	<p class="footer">Page rendered in <strong>{elapsed_time}</strong> seconds</p>
	</div>
	</body>
	</html>