Monday, February 25, 2013

Simple Jquery Ajax with Codeigniter (Video tutorial)



I found this screencast while i was searching to learn Jquery and Ajax integration. It help me a lot to understand basic and was able to implement in my project.

You can view the screencast in below URL

Author have broken it down to 4 parts. This first one explains on how easy Jquery can be to setup and some tools you mind find usefull.
Following on from part one in this screencast author show about Ajax functions $.get.
We will take a look at how to perfom a $.get request and how to handle the callback.
So now we have looked at the $.get request we now are going to look at the $.post request.
In this screencast we can see how we can submit form data through this request.
We have looked at the $.post & $.get request so far and have passed some simple data between them.In this the last part of this series we will take a look at the $.ajax  request. The $.ajax request is very powerfull and far to much to talk about in this one screencast so I would strongly suggest you take a look at the JQuery Documentation.

Hope you will find it useful as well.


Source: http://www.weblee.co.uk/
Author: Lee Smith

Passing values to controller in the Codeigniter using jQuery load

How to use jQuery load() function in Codeigniter?
It took little time to figure out how I can send values together with URL in Codeigniter. After researching little about load jQuery function and Codeigniter, I came to following solution.

Need: I needed to pass the value of attribute when user click a link. It should load the controller method dynamically using jQuery.

Solution:
I used load() method of jQuery in the following manner and pass the id as test_id.

In the Codeigniter controller method test, I grabbed the test_id using Codeigniter's post method,  $this->input->post('test_id'), alternative could be $_POST['test_id']

And my problem is solved.

//pseudocode
$(document).ready(function() {

    $('.link').click(function(){//element to be click to load the page in the div 

    $('#content').load(path, {test_id: $(this).attr("id")});

});

function test(){  

 echo $test_id = $this->input->post('test_id', TRUE);

}

In the view

<div id="content">
</div>


Just wanted to share a simple small bit of pseudo code. May be it will save someones time, if the need is alike mine.