Learning how to use AJAX with CodeIgniter

Question

It's kind of embarassing that I find it so difficult to learn JavaScript, but ..

Let's say I have a really simple controller like this:

class front extends Controller {

    public function __construct()
    {
     parent::Controller(); 
    }

    public function index()
    {
     //nothing!
    }

    public function test () {

     $someNumber = $this->input->post('someNumber');

     if ($someNumber == 12) { return TRUE; }

    }

}

Yes, that could probably be written better, haha.

What I want to know is - how could I use JavaScript to submit a number in a form (I'll worry about validation and models later), how should I write my test() function so that it returns something readable by the JavaScript (I'm assuming return TRUE probably wouldn't work, perhaps XML or JSON or something like that?), and how do I access the data with the JavaScript?

I know there are frameworks like jQuery that will help with this, but right now I'd just like to understand it at the simplest level and all the tutorials and guides I've found so far are way too in depth for me. An example in jQuery or whatever would be good too.

Thanks a lot :)

Answer 1

you would just print it out basically, and re-capture that information via javascript:

public function test() {
    $somenumber = $this->input->post('someNumber');
    if ($somenumber == 12) {
        print "Number is 12";
    } else {
        print "Number is not 12";
    }
}

your javascript might look something like this:

var xhr;
xhr = new XMLHTTPRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        // this is where the return information is
        alert('Status: '+xhr.status+' Response: '+xhr.responseText);
    }
}

xhr.open('POST', '/front/test');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('someNumber=12');

the code above doesn't take into account browser specific issues, but should run on firefox/ie7 at least i believe.

here's a jQuery example of all the above:

var options = {
    'someNumber' : 12,
}

$.post('/front/test', options, function(data) {
    alert(data); // should print "Number is 12"
});

Answer 2

You are not alone. I just write a simple article on how to do just that.

http://www.gotphp.com/simple-codeigniter-ajax-example-using-jquery/54410/