Setting up CodeIgniter 2 with jQuery

For almost two years now, I've worked with CodeIgniter quite a bit for projects both in my spare time and at work.

CodeIgniter is a PHP framework that makes web development much easier and because of a few features that I really like, it’s become almost indispensable for me.

I've been using CodeIgniter from around version 1.6/7 but they've now released version 2. Truth be told, there’s not that much difference, but CodeIgniter2 just has that little bit more. Most noteably, built in unit testing, which makes TDD a lot easier. Previously, the only real resource was the FooStack plugin which lacked ALL documentation.

One of the immediate problems I’ve faced with CodeIgniter 2 is it’s URL structure. From the off, URLs contain ‘index.php’ followed by your URL path which the framework uses to calculate what and how to run. This is all good and well, but for security, neatness and SEO, you want that removed. CodeIgniter wasn’t hard to configure, you just added a .htaccess file and changed a single value in the config.php to get it going. CodeIgniter 2 is a little different.

I had a lot of trouble finding the right things to put into my .htaccess file. That became a huge stumbling block mostly because jQuery plugins want to access assets in specific places but end up looking for '/index.php/images/image.jpg' rather than '/images/image.jpg'.

The solution?

RewriteEngine on
RewriteCond $1 !(^index\.php|images|robots\.txt)
RewriteRule ^(.*)$ ./index.php/$1 [L]

This basically forwards all traffic to /index.php/ so that the app appears that it was there, but you can write your app without worrying about it. The second line above in the example shows that the rewrite condition won't apply to index.php, robots.txt or the folder images. You can add more files and folders by seperating them with a pipe.

For the first version of CodeIgniter, there were other methods that worked well and could actually stop any files and folders that existed being forwarded, but this is the only method I could get working. Different environments may actually work with the old methods.

The last step is to change the following line config.php:

$config['index_page'] = 'index.php';

to:

$config['index_page'] = '';

You can now use the uri functionality built into CodeIgniter without fear of index.php rearing it's head.

What about jQuery?

So this solves the issue where jQuery, and it's plugins, try to call a resource and end up adding 'index.php' to the front of the URL. So in a sense, you should be good to go.

Ajax with JSON?

One of the problems with using jQuery to read JSON output from CodeIgniter is the fact that making calls often returns the default Welcome controller.

There are a couple of reasons this happens. Firstly when calling ajax through the $.ajax method in jQuery, caching is enabled by default. You could use the $.get or $.post methods but I find $.ajax has far more flexibility mainly because of the ability to set caching. For dynamic results, you may not want to cache results but $.get and $.post don't let you explicitly get fresh results on each call without manually adding a timestamp or random number to the end of the URL you're calling. $.ajax can do this automatically.

The easiest way to get around the Welcome controller issue is to just set caching to true. This will stop '?callback=jqueryxxx' being added to the end of your URL.

If you don't want to cache your results, then you need to wrap JSON object with the value that the callback sends through.

You can do this with the following code (wherever you output your JSON):

echo $this->input->get('callback').'('.json_encode($output).')';

The above assumes that your output is an array that you'll be encoding on the fly. All this does is wraps your output with the callback value effectively creating a JSONP response which actually requires the callback value to match the 'padding' you apply to your object.

Lastly, you'll also need to change the following line in config.php:

$config['uri_protocol'] = 'AUTO';

to:

$config['uri_protocol'] = 'REQUEST_URI';

You can try the other values that might meet your needs better, but this is the one that worked best for me. Other articles suggest using 'QUERY_STRING', but I encountered a few issues that 'REQUEST_URI' rectified.

If you have any issues, please feel free to comment and I'll try to help.