Featured Posts

Codeigniter Pagination Part 3 OK so we have now covered setting up Codeigniter Pagination and passing some simple data through it. We have also managed to add categories to our posts to make it a little...

Readmore

Codeigniter Pagination Part 2 So leading on from the last screencast we now have some simple data being pushed through the pagination library. Now were going to look at adding categorys to our posts...

Readmore

Codeigniter Pagination Part 1 One of the biggest things I see being asked around the codeigniter forums & IRC channel is pagination. So I have decided to create a set of tutorials from basic setup...

Readmore

Codeigniter Preparation Hopefully if I can keep my promise and will be rolling a set of screencast on this site and part of them will be to do with the Codeigniter Framework. I though it would...

Readmore

Radio Button Replacement With Style I thought I would kick off this blog with a short tutorial on how you can make form radio buttons look and feel allot more interesting. A recent job required the user to...

Readmore

Web Lee Rss

Simple Jquery Ajax with Codeigniter Part 1

Posted on : 07-06-2009 | In : Codeigniter, Jquery, Screencasts

17

I thought before I do my next screencast with pagination I would do an introduction with Jquery Ajax.

There are a number of excellent Javascript Frameworks (Prototype, Mootools, Dojo, Scriptaculous etc..) but my personal flavour is Jquey. Like Codeigniter it has a great user guide which is easy to follow and a great network of users. And one of the great tools it has in its API is AJAX (Asynchronous JavaScript and XML).


I thought trying to explain it all in one screencast would be quite long so I have broken it down to 4. This first one explains on how easy Jquery can be to setup and some tools you mind find usefull.

Getting Prepared

Screencast Time: 11:30

Download Firephp Library here .

Constant Code:

//
// Define Ajax Request
define('IS_AJAX', isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');
//

Helpful Ajax Testing Tools & Setup:

  • Jquery – jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
  • Firebug – Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. Cost: Free
  • Firephp – FirePHP enables you to log to your Firebug Console using a simple PHP method call. Free
  • Charles – Charles is an HTTP proxy / HTTP monitor / Reverse Proxy that enables a developer to view all of the HTTP and SSL / HTTPS traffic between their machine and the Internet. This includes requests, responses and the HTTP headers. Cost $50.00
  • Fiddler – Fiddler is a HTTP Debugging Proxy which logs all HTTP traffic between your computer and the Internet. Fiddler allows you to inspect all HTTP Traffic, set breakpoints, and “fiddle” with incoming or outgoing data. Cost: Free.
  • Jquery Visual – Sometimes you just cant beat seeing how something actually work!

Comments (17)

wow cool tutorials! thanks a lot! weblee.co.uk has just been added to my fav list ;)

Lee, you are the man! I’ve been looking for something like this for a long time and here you are. Hope you’ll keep up the screencasts in the future too.

btw, why doesn’t firephp work for me? I followed exactly the same steps, but still it doesn’t work.

Hey, I really loved your use of constants here. I have a problem on my site where the login JSON has actually been crawled by Google and I’m now going to use your IS_AJAX constant to determine whether it’s an AJAX request or if Google is crawling that page so I can have a proper login page too.

This is excellent information and obviously a well prepared tutorial.

I found your site via the CodeIgniter forums and I’ll bookmark you for future reading. Thanks!

Just so you know, that IE 8 also has the console window like Firefox.

Click on tools in the top menu.
Developer Tools F12
You can then pin it to the bottom and just use F12 to open and close it.

Enjoy
InsiteFX

I’m just getting my feet wet with Codeigniter and luckily stumbled upon your screencasts. Invaluable! Thanks mate :-)

It’s great to see someone going in depth and really helping beginners out like this.

Lee, you’re doing a great job!

I love the IS_AJAX constant! I’m trying to build a site where I really nail the concept of building it layer by layer. I mean, I get the whole thing working 100% with basic HTML and no javascript – all server side – and then add in the CSS and then the AJAX stuff later, on top. Sometimes it’s hard to wrap my head around. For example, maybe without JS the user clicks a link and gets a page back with listings. With JS it shows these listings in a lightbox. The lightbox version shouldn’t include the site template again, but the non-js function should. I didn’t know you could differentiate between a normal and AJAX call on the server. So awesome and simple, thanks.

Nice screencasts! Which developer tool/IDE are you using? Couldn’t recognize the interface..

console.log() is not a jquery function, its built into firebug.

Thanks a lot.

[...] Watch this to learn more about IS_AJAX [...]

@Rune M. Andersen

The IDE is e-text Editor :)

Nice tut, learned a lot.

Just a quick note that loading 1 on google will load the latest version of jquery. Where as setting a version will be fixed for the lifetime of that site.

Dave.

What an outstanding tutorial! Thanks for doing such a terrific job .

Thanks For these Great tutorials.

Write a comment