En este screencast voy a mostraros un sencillo ejemplo de cómo utilizar jQuery para cargar contenido mediante ajax en CodeIgniter. El código está basado en el ejemplo del primer video «Introducción a CodeIgniter», así que os recomiendo que le echéis un vistazo primero si no lo habéis hecho ya. Vamos a modificar ese código para que liste sólo los títulos de las entradas, y al hacer click en un título se cargue debajo el contenido de la entrada.
Este es el tercer videotutorial de la serie CodeIgniter, podéis encontrarlos todos en la página de screencasts, o suscribiros al podcast de iTunes.
Descargar ficheros con el código del ejemplo.
oh que bueno..
vamos a ver el tutorial
gracias master.
muy bueno el tutorial
sera que te podes hacer uno aplicando crud?
@mario Creo que con lo que explico en el primer tutorial y en el de formularios uno se puede montar un crud fácilmente, de todas formas si veo que hay demanda lo haré 🙂 Quizá haga un mini-video de cómo hacer CRUD usando scaffolding, que es una manera rápida y sencilla de hacerlo ya que viene dentro del sistema.
Que tal, disfrute mucho de tu primer screencast, y me dispongo a seguir ahora con este tercero, jeje sobretodo por que admito tener aun muchas dudas sobre como usar AJAX, un saludo y gracias por tus aportes.
Hola
encontre tu pagina mientras buscaba algo sobre codeigniter.
Tus videos son muy didacticos.
Me sumo al pedido de mas arriba haber si haces algo pequeñito aunque sea de CRUD con scaffolding. 🙂
@darlina Cuando tenga un rato libre veré que puedo hacer 😉 CRUD con scaffolding es realmente fácil, en un video probablemente no me llevaría más de 3 minutos, así que es probable que simplemente ponga un post sin video, y más adelante haga un video cómo hacer CRUD apropiadamente (scaffolding es para usar en desarrollo, no en producción).
Buen tutorial si señor.
Yo lo que estoy intentando es cargar el contenido pero en vez de un anchor, debe ser un dropdown el cual tiene el id del articulo.
Usando la funcion .change(mifuncion()) si trabajo cada vez que cambia el mismo, pero aunque capturo la opcion seleccionada con $(‘option:selected’), no consigo hacer la carga, como que el problema es pasarle el parametro al metodo del codeigniter.
Tienes alguna idea? Gracias.
Me temo que con la explicación solo sin ver el código, no sé que problema puedes tener. Si acaso cuelga el código del js y el php en pastebin o algún sitio similar.
Muy bueno y bien claro los videos tutoriales..
Estaria muy bueno que continues con los videos tutoriales. Estaria una bueno con scaffolding y la utilizacion de helpers..
Tambien te recomiendo que pongas los videos tutoriales en este sitio http://www.illasaron.com/upload/ donde hay muchos tutoriales en castellano.
Tambien te pregunto si tenes experiencia en algunos de estos 2 framework http://www.kohanaphp.es y http://www.doophp.com Este ultimo lo estoy meditando de utilizar en un futuro proyecto web. Ya que es 100% PHP5, 100% UTF-8, ORM, MVC, y es uno de los mas rapido Framework para PHP 5 y permite utilizar la librerias de otro framework como Zend Framework, ademas de tener un Router de URL muy simple y claro, y la curva de aprendisaje parece ser muy simple, mas o = que CodeIgniter etc..
Vos que opinas.. de estas alternativas o si te contaron algo malo sobre esto framework..?
Saludos..
@Navegante Espero al menos hacer un video tutorial más sobre CodeIgniter, cuando tenga tiempo, y con él cerrar la serie (a menos que haya mucha demanda para más). Mi idea es seguir haciendo videotutoriales sobre otros temas (jQuery, otros frameworks php, html5/css3…).
Sobre los frameworks que me preguntas, oí hablar de doophp recientemente. Tiene muy buena pinta, sobre todo algunas cosas interesantes que trae de serie como soporte de ACL y REST, pero parece que aún es muy nuevo, acaba de salir, entonces habrá que darle tiempo a ver cómo evoluciona. La documentación podría estar mejor.
Sobre kohana, supongo que sabrás que es un fork de CodeIgniter hecho por la comunidad (CodeIgniter lo mantiene una empresa, al igual que doophp). Parece que ese fork se hizo porque no estaban de acuerdo con algunas decisiones que Ellislab tomaba sobre el framework (el soporte de PHP4 por ejemplo). La documentación tampoco es muy buena y no tiene demasiados usuarios comparado con su «padre».
De momento me sigo quedando con CodeIgniter, y creo que lo seguiré haciendo por mucho tiempo, aunque como he dicho habrá que estar al tanto de cómo evoluciona doophp.
Puedes echarle un vistazo también a CakePHP, es algo más rígido que CI, pero se parece más al estilo de Rails.
Tutoriales de JQuery ya hay en castellano en este sitio tenes 21 videos bien esplicados por Jesus. Mira http://illasaron.com/upload/videos?ct=34
Y aca tenes la lista completa de todo lo que hay en castellano..
http://illasaron.com/upload
Esteria bueno Videos Tutoriales sobre el Zend Framework que no hay nada encastellano, y estaria bueno ya que podriamos decir es el oficial de PHP y mas futuro va tener apesar que es mas complicado y mas lento..
Aca podes encontrar esta pagina solo con videos tutoriales de Zend Framework, pero estan en ingles http://www.zendcasts.com/
Una pregunta tú pagina esta realizada con CodeIgniter..?
Saludos 😉
@Navegante Zend es el framework oficial a nivel corporativo, pero no me convence su forma de trabajar. Las empresas pequeñas y start-ups suelen optar por frameworks MVC más ligeros.
Sobre los tutoriales, yo suelo verlos todos en inglés, pero soy consciente que mucha gente hispana no tiene nivel suficiente para entenderlos, por eso intento aportar algo a la comunidad haciendo estos videos en castellano.
Mi web está con WordPress. Consideré hacerla con CodeIgniter, pero visto que WordPress es el estándar para los blogs decidí darle una oportunidad y diseñarme una plantilla a medida.
Hola David yo de nuevo; te quería hacer una pregunta ya que vos tenes experiencia en algunos trabajos con framework como CodeIgniter en producción.
Quiero saber si el hacer un debug sobre un framework da mucho problema ya que antes de llegar a tu codigo da muchas vueltas por otras partes del framework.. Que es lo que recomendas..? Con que IDE hace el debug vos..? Zend o NetBeans o cual otra utilizas..? y en si todo este trabajo se ve más engorroso o es = que cuando uno hace un sitio sin framework..?
Saludos
@Navegante El debug lo hago bastante manual, no utilizo ningún entorno, programo con el TextMate de mac (el que ves en los videos), y hago el debug simplemente a base de imprimir variables, usar el profiler de CodeIgniter, o volcar datos a la consola del Firebug mediante javascript. El tema de si el framework da muchas vueltas, con frameworks sencillos como CodeIgniter no suele ser problemático (si usas hooks tienes que tener cuidado). Desarrollando módulos con Drupal sí he tenido muchos problemas, ya que es un framework-CMS, tienes muchos módulos y no sabes en qué momento está haciendo cada cosa. Pero como te digo, con frameworks sencillos es como si programaras en PHP simplemente.
Te felicito David. La verdad es que mejor explicado no se puede. He visitado muchos sitios para introducirme en el Jquery + Codeigniter y tu tutorial, el mejor sin duda.GRACIAS.
Tengo una duda, he creado lo siguiente:
$(function(){
$(‘ul a’).click(function(event){
event.preventDefault();
//$(‘#page’).remove();
$(this).parent().after(»);
$(‘#page’).html(‘<img src="images/spinner.gif» />’).load($(this).attr(‘href’));
})
})
$(function(){
$(‘#page a’).click(function(event){
window.alert(«hola»);
event.preventDefault();
//$(‘#page’).remove();
$(this).parent().after(»);
$(‘#page’).html(‘<img src="images/spinner.gif» />’).load($(this).attr(‘href’));
})
})
Pues bien, el menú funciona correctamente, cuando se pulsa un ul , el conteido se carga en el div «page», pero si pulso un enlace dentro de page, no se carga dentro de este. ¿Sabes que hago mal? Porque no le veo nada raro a la segunda función.
¿Cómo se puede especificar los enlaces que estén dentro de un div cuyo id es «page»?
He probado con $(#page a) pero no se invoca.
Gracias!
@Browser El problema creo que lo tienes porque estas adjuntando eventos click a los enlaces dentro de #page, y después cargas contenido en #page eliminando el contenido que había, incluido esos enlaces y por lo tanto sus eventos adjuntos. La solución pasa por usar la función live para adjuntar estos eventos click, de manera que así adjuntas los eventos tanto para los elementos existentes como para los futuros (es decir, funcionará con los enlaces que haya en el nuevo contenido que se cargue en #page). Échale un vistazo a la documentación.
Hola David, siempre de ayudas tus videoturiales.
Oye como podria utilizar este ajax con jquery y el menu acordeon que realizastes? que me muestre la información que carga en otro lado de la pantalla (una variable $contenido)!.
Saludos, gracias
@Alfred No tiene mucha complicación, solo haz que los links del menú apunten mediante jquery a la carga de las páginas que quieras. Si has entendido los dos tutoriales, es muy sencillo, échale un vistazo a la ayuda de la función load de jquery: http://api.jquery.com/load/
Chaval eres la pera. Solo como comentario pararte un seg mas en el tema de js para los que no sabemos jquery. Muy bueno
un saludo
Gustavo
buenas tardes me gustaria saber si tienes algun ejemplo en codeigniter de seleccion dependiente con base de datos por ejemplo tablas pais estados me gustaria saber si me puedes ayudar con eso.
@francisco No entiendo qué preguntas exactamente. Lo mejor es que intentes hacerlo tú mismo y expongas aquí los problemas que tengas, y ya te echamos una mano.
Hola David. Soy nuevo en esto de Codeigniter y estoy enredando un poco con tus ejemplos y las cosillas que voy viendo. Mi problema es que no me aparecen las imágenes en el navegador.
He probado a generarlas mediante el helper img y también con HTML puro y duro usando base_url en la ruta, pero nada. Te pongo aquí algunos datos que te puedan servir a ver si me echas una mano…
$config[‘base_url’]=»http://localhost/sitegusta_ci/»;
$config[‘index_page’] = «»;
En el código fuente de las imágenes que no me aparecen la ruta es:
http://localhost/sitegusta_ci/imagenes/boton_reg.gif
Y la carpeta imagenes está en el mismo nivel que application, como en tu ejemplo.
Gracias de antemano. Un saludo
Oscar
@M4RK3S Mira a ver si tienes el .htaccess configurado correctamente, es posible que el problema venga por ahí.
RewriteEngine on
RewriteCond $1 !^(index\.php|img|css|js|video_files|robots\.txt|favicon\.ico)
RewriteRule ^(.*)$ /sitegusta_ci/index.php/$1 [L]
Ese es el .htaccess. La página me la muestra con la ruta esperada asi que no se me ocurre nada…
http://localhost/sitegusta_ci/bienvenida
@M4RK3S Ya veo lo que te pasa. El rewrite funciona con expresiones regulares, y en la segunda línea te está diciendo que te haga un rewrite de todo excepto el index.php y varios directorios. Por ejemplo verás que tienes el directorio img y css, pero no has añadido el directorio imagenes (donde tienes tú las imágenes). Puedes probar si quieres este otro htaccess:
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /sitegusta_ci/index.php/$1 [L]
Con este .htacess haces rewrite de cualquier carpeta o fichero que no exista.
Muchas gracias David. Problema resuelto! Seguiré enredando, entre otras cosas, gracias a tu blog 🙂
Un saludo desde Santander
Hola.. soy re nueva con codeigniter.. mira..desd mi vista cargo las categorias q estan en una tabla.. y me gustaria q con ajax se present en el centro las subcategorias de esa categoria.. como le hago??
Exelente tutorial, sería ideal si pudieras hacer un tutorial de autocomplete con CodeIgniter.
Sigue adelante!!!!
muy bueno el video tutorial.
Si no es molestia pedirte como se hacer un flipinbook en codeinigter y manejo de calendarios en codeinigter.
Sigue adelante!!!
@jose Nunca he hecho un flippingbook, pero no es más que un efecto visual, lo tratarías con codeigniter como con cualquier otro framework o lenguaje de servidor. Sobre el calendario, codeigniter tiene una clase calendar: http://codeigniter.com/user_guide/libraries/calendar.html
interesante el video. Si no es molestia pedirte si sabes como puedo incrustar un reproductor de musica como el vlc utilizando codeinigter es que hace poco hice un servidor de radio streaming en linux y el tipo de archivo a reproducir son con extension .ogg.m3u
gracias y sigue con codeinigter por favor, tus videos de codeinigter son vastante buenos…
@luis Me temo que no puedes incrustar un reproductor, la solución es empotrar algún tipo de reproductor en flash
Hola maestro David Rojas. Gracias por responder.
Maestro rojas es posible que me dee algun ejemplo o enlace de codigo o temas relacionados para empotrar algun tipo de reproductor en flash y sino igual gracias.
Es usted super didactico. Yo no entendia bien lo que era codeinigter pero con sus videos aprendi mucho.
Si es posible continue haciendo mas videos ya que son interesantes y super,archi,recontra bien esplicados
@luis Me temo que no tengo ningún ejemplo para darte, cuando he necesitado empotrar vídeos siempre he usado servicios externos como blip.tv
Simplemente impresionante. Cada vez que veo un video tuyo aprendo muchísimo y de forma muy sencilla.
Gracias por tu dedicación y enhorabuena por tu trabajo.
Saludos
Hola david queria consultarte respecto al ajax hice una pequeña aplicacion en codeigniter con ajax funciona muy bien en mozilla pero cuando lo ejecuto en internet explorer no me muestra los resultados quisiera saber si hay algun ajax mas actual que me funcione bien con internet explorer.
El error que dice en el internet explorer es con respecto a la url del ajax.open().
bueno ahi te dejo el ajax que estoy usando.
function creaAjax(){
var objetoAjax=false;
try {
/*Para navegadores distintos a internet explorer*/
objetoAjax = new ActiveXObject(«Msxml2.XMLHTTP»);
} catch (e) {
try {
/*Para explorer*/
objetoAjax = new ActiveXObject(«Microsoft.XMLHTTP»);
}
catch (E) {
objetoAjax = false;
}
}
if (!objetoAjax && typeof XMLHttpRequest!=’undefined’) {
objetoAjax = new XMLHttpRequest();
}
return objetoAjax;
}
var cc=document.getElementById(‘zona’);
ajax=creaAjax();
//div.innerHTML=»»;
ajax.open(«GET», «http://localhost/iglesia/index.php/gestionlider/listar_lider_zona/» ,true);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
cc.innerHTML=ajax.responseText;
}
}
ajax.send(null)
@luis No sé donde puede estar el problema, pero te recomiendo que uses jQuery u otras librerías para ajax, te evitan estos problemas cross-browser.
Muchas gracias david lo intentare con jquery como dices…
hola david una pregunta el ajax que utilizas en el ejemplo es una libreria cualquiera de jquery o es un jquery especial para codeigniter
@luis jQuery simplemente, como ves en el ejemplo lo cargo directamente del CDN de google.
ok gracias david
hola david quisiera consultarte sobre jQuery
xq cuando hago el siguiente codigo no funciona la ultima linea de codigo.
jQuery(«#nuevo_lider»).append(«Lider de Zona»);
jQuery(«#zona»).load(«http://localhost/iglesia/index.php/gestionlider/listar_lider_zona/»);
jQuery(«#zona»).find(«option[value=’Cod_zona; ?>’]»).attr(«selected»,»selected»);
*** y cuando le agrego un alert con cualquier tipo de texto antes de la ultima linea de codigo, como el siguiente codigo ahi si funciona****
jQuery(«#nuevo_lider»).append(«Lider de Zona»);
jQuery(«#zona»).load(«http://localhost/iglesia/index.php/gestionlider/listar_lider_zona/»);
alert(«cualquier texto aqui»);
jQuery(«#zona»).find(«option[value=’Cod_zona; ?>’]»).attr(«selected»,»selected»);
podria indicarme que hago mal para que el codigo funcione sin alert.
*** estoy usando la sintaxis «jQuery» y no «$» por que en el codeigniter no me funciona el «$» ***
@luis Seguramente tu problema viene de que el ajax del load() se ejecuta asíncronamente, por lo tanto cuando haces la llamada sigue ejecutándose el script y no espera a que se cargue el contenido, por lo tanto en la siguiente línea no encuentra lo que buscas. Al poner un alert y parar la ejecución le da tiempo a cargarlo. Mírate la función ajax() de jQuery que te dá mas opciones, como ejecutar una función después de que se haya completado la petición.
gracias david tenias mucha razon pude arreglarlo metiendo una funcion dentro del evento load.
Hola david, muy buen tuto, tendras el sql del ejemplo?, gracias!
@Alfredo En CodeIgniter no suele escribirse SQL a mano, sino que se usa Active Record.
Hola david necesito un favorcito, el problema es como hago para poner el contenido en un div especificado en otras palabras colocar el contenido donde yo quiera.
Gracias.
Hola, muy interesantes tus videos, felicitaciones. Talvez tienes algun video acerca de dropdown lists en cascada (dependientes)?
O podrias explicar como hacerlo? lo necesito de urgencia y sinceramente no se como hacerlo.
Gracias de antemano.