Welcome Guest, Not a member yet? Register   Sign In
ci + jquery

hello to all,

I am trying to use jquery with the i. But I can't find a good tutorial and a sample to study. Can someone give me link or sample. thanks.


I dug this link out for you.

As gtech pointed out implicitly is that the only time jQuery needs CI is when ajax requests are made. And the only thing that differs in CI is that you have to change setting to allow query strings as most of the ajax needing code/plugins uses query strings. If you don't want to break the nice urls you can alter the plugins which isn't that hard to do, just find the ajax call and change the url.

All other jQuery functionalities are for 'static' code (html, css).

I have a jquery function in my code that calls codeigiter urls.

code extracted from a view inside < script > tags:
function send_ajax(urlparam)
    url: urlparam + "/" + new Date().getTime(),
    dataType: "script",
    cache: false,
    success: function(html){
      // call whatever here to display html


I have done somthing like above to get my ajax calls working, I only append the time on the end so the urls are unique which saves IE from caching them.

Personally I do everything back and forth with JSON which ends up being a lot more flexible.

Here is the CodeIgniter Controller:

class Ajax extends Controller {

  var $json_data=Array(
    'error' => 1,
    'html' => 'Ajax Error: Invalid Request'

  function __construct() {
    $this->output->set_header('Last-Modified: '.gmdate('D, d M Y H:i:s', time()).' GMT');
    $this->output->set_header('Expires: '.gmdate('D, d M Y H:i:s', time()).' GMT');
    $this->output->set_header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0, post-check=0, pre-check=0");
    $this->output->set_header("Pragma: no-cache");

  function do_something() {
    $this->json_data['html'] = $this->load->view('someview', $_POST, true);
    $this->json_data['error'] = 0;
    $this->json_data['another_variable'] = 42;

  function _output($output) {
    echo json_encode($this->json_data);

Then in the script...

    url: '/ajax/do_something/',
    type: 'POST',
    data: {field: value},
    dataType: 'json',
    timeout: 8000,
    success: success_function

  function success_function(json) {
    if (json.error)

    if (json.another_variable == 42)
      alert("I've found the secret of life!");

Obviously much more useful data can be passed back and forth. Everything in the 'data' object on the Javascript side will be in $_POST in CodeIgniter. I have used this setup for two sites now; one with a single AJAX controller that acts as router redirecting to mini-modules; another which uses several controllers just for ajax calls. If you are doing the latter you could setup a parent AJAX controller object which gets extended by all your AJAX controllers.


thanks for that code snippet thats really useful.

[eluser]Gavin Blair[/eluser]
I just use "load" with Code Igniter's site_url() function.

Here's the javascript (after loading in jQuery of course):
$(document).ready(function() {
   $("#submitit").click(function() {

        $("#ajaxresult").load("<?php echo site_url(); ?>/ajax/ajaxloadinfo", {id: id.value});


Here's the form and ajax div:
<div id="ajaxresult">
//non-ajax result:
if (isset($result))
    echo $result;

&lt;form action="&lt;?php echo site_url(); ?&gt;/ajax/loadinfo" method="POST"&gt;
&lt;input id="id" name="id" /&gt;
&lt;input type="submit" name="submitit" id="submitit" onclick="return false" /&gt;

This degrades nicely - if javascript is disabled, it loads the "loadinfo" function of the "ajax" controller, otherwise it loads the "ajaxloadinfo" function of the controller. Both functions are basically the same, except "loadinfo" loads the view and passes a variable called $result, and "ajaxloadinfo" just echoes out the result.

The "{id: id.value}" part is the post variables. It assigns the value in the input box (which I named "id") to $_POST['id'], used by the controller.

It took me a long time to figure this out, since there are not many good tutorials on how to use jQuery's load function with Code Igniter (and the ones that do exist don't have many examples).

Hope this helps!

@Gavin blair:
Can you post here your controller? And if I want to pass more than one input data e.g ('id' and 'address'), how to modify {id : id.value} section?

1. Would you mind to post a working example using the method as you described above? I think that would help other people who begin to learn ajax & jquery...

$this->load->view('someview', $_POST, true);
. Could you give more specific information about 'someview' script?

[eluser]Gavin Blair[/eluser]
@ardinotow: I have the entire thing here: http://zoeandgavin.com/wpmu/php/2008/05/...e-igniter/ (there is a download link at the end) If you want to put more than one input, use the syntax: {id: id.value, username: username.value} - just separate with commas. The controller just gets the stuff from the database and echoes out the result. You can use another view and have the controller pull it in, just know that the entire view will go into your div.

[quote author="ardinotow" date="1211691632"]
Could you give more specific information about 'someview' script?[/quote]

'someview' could be any CodeIgniter "view". It is bad form to pass $_POST directly into it, in a real world example you would populate a data array as you do for a regular controller; the pass that array. The third "true" parameter makes CodeIgniter return the view as a string, rather than outputting it directly, which enables it to become part of the JSON information you pass back to the JavaScript.

If I get some time I'll post a more complete example.

Theme © iAndrew 2016 - Forum software by © MyBB