+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Libraries & Helpers (https://forum.codeigniter.com/forumdisplay.php?fid=22)
+--- Thread: Simple ajax functionality in CI (/showthread.php?tid=44179)
Pages:
1
2
Simple ajax functionality in CI - El Forum - 08-06-2011
[eluser]Dileep[/eluser]
Hai ,
I want to know that how can i integrate Ajax functionality on CI_.
see the code below ,
A controller named New :
*************************
Code:
Class New extends CI_Controller
{
function index()
{
$data['name']='Myname';
$this->load->view('myview',$data);
}
}**************************
Code:
<html>
<head>
</head>
<body>
<input name="cname" type="text" value="__?__" />
<input name="cbutton" type="button" value="Submit" />
</body>
</html>I just want to get the $name in cname textbox when we click on cbutton button,with out page load,how can i achieve this by using ajax or Javascript ?
I knw it is a Newbie Q,but please help me $ also i am welcome some links to CI-AJAX tutorials for beginners.
Thanks.
Simple ajax functionality in CI - El Forum - 08-06-2011
[eluser]Unknown[/eluser]
Hi bro... Check out this :coolsmirk:
http://littlebrain.org/2008/05/27/codeigniter-and-ajax-using-jquery-tutorial/
Simple ajax functionality in CI - El Forum - 08-06-2011
[eluser]Rok Biderman[/eluser]
Well, if all you want to do is fetch a name, you don't need ajax, just do this
Code:
<input name="cname" type="text" value="<?php echo $name;?>" />Code:
$(document).ready(function() {
$('input[name="cbutton"]').bind('click', function() { //bind your element to a click event
$.get("controllername/ajaxrequest", function(data){ //get your data, use post instead if you're sending anything
$('input[name="cname"]').val(data.name); //in the end, assign the value to the element, use just data in case you don't json_encode it on the other end
}, 'json');
});
});and for controller:
Code:
public function ajaxrequest()
{
$data['name']="Somename";
echo json_encode($data); //comes in handy to use json when you deal with more than one variable, for just this one you could just echo;
}you could simplify this quite a bit if you used id in addition to name tag in your inputs. It's also a bit faster, cause the selector engine does less work.
Simple ajax functionality in CI - El Forum - 08-07-2011
[eluser]Dileep[/eluser]
Ohh thank you ,but could you please explain little bit more ?
Simple ajax functionality in CI - El Forum - 08-08-2011
[eluser]Rok Biderman[/eluser]
I think we're going to go pretty far from this forums' topic, but sure, why not. What do you want me to explain further?
Simple ajax functionality in CI - El Forum - 08-09-2011
[eluser]Dileep[/eluser]
Could you please fulfill the code with full syntax,so that i can learn from that,because i need a working sample.
I got the idea,but i cant execute.
Thanks for helping,its very inspirational for newbies.
Simple ajax functionality in CI - El Forum - 08-09-2011
[eluser]Rok Biderman[/eluser]
Just to avoid repeating myself, I'll introduce some other elements, that can come in handy, when dealing with ajax requests. It's all commented, so you shouldn't have problems. This is a welcome controller:
Code:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Welcome extends CI_Controller {
public function index()
{
$data['name']='Myname'; //we set the value to display on initial page load
$this->load->view('myview',$data);
}
public function ajaxrequest()
{
$data['name']="Anothername";
echo json_encode($data); //comes in handy, when you deal with more than one variable, for just this one you could just echo;
}
public function submitsample()
{
if ($this->input->is_ajax_request()) //determines if the HTTP_X_REQUESTED_WITH has been set, which means ajax request
{
echo json_encode($this->input->post());
}
else
{
echo "Not an ajax request";
}
}
public function nojson()
{
echo ($this->input->post('name') . "</br>done without json encoding"); //this is just echoing received data
}
}
/* End of file welcome.php */
/* Location: ./application/controllers/welcome.php */and this is view myview.php
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ajaxdemo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('input[name="cbutton"]').bind('click', function() {
$.get("welcome/ajaxrequest", function(data){ //this is just a get request, no data gets sent, we just receive the response, encoded in json
$('input[name="cname"]').val(data.name);
}, 'json');
});
$('#csubmit').bind('click', function() {
$.post("welcome/submitsample", $("#testform").serialize(),
function(data){
$('#display').text(data.cname); //just setting the text this time, since we get no html, you could use append here, or chain other actions
}, "json");
return false; // prevents default action so it doesn't submit the form the regular way
});
$('#nojson').bind('click', function() {
var ccname = $('input[name="cname"]').val(); //declare a variable and set it to some value
$.post("welcome/nojson", {'name' : ccname}, //this time we set the variable by hand instead of serialize, we can change name, make transformations...
function(data){
$('#display').html(data); //we use just data this time, since we didn't use json, we assign the value to html instead of text, so our break displays as it should
});
return false; // prevents default action so it doesn't submit the form the regular way
});
});
</script>
</head>
<body>
<form id="testform" method="post" action="welcome/submitsample">
<input name="cname" type="text" value="<?php echo $name; ?>" />
<input name="cbutton" type="button" value="Get request" />
<input id="csubmit" type="submit" value="Post request" />
<input id="nojson" type="submit" value="Post request without response json encoding" />
<input id="justsubmit" type="submit" value="Post request without ajax" />
<p>
<div id="display">This is where the post data is going to be shown after the request</div>
</p>
</form>
</body>
</html>I would suggest you start using firebug's net tab to see the requests you're sending, without it you're more or less running blind. If it confounds you further, find additional help in jquery manuals and tuts, but this is really all there is to it when integrating it into Codeigniter.
Simple ajax functionality in CI - El Forum - 08-10-2011
[eluser]Dileep[/eluser]
Thanks for your nice reply,it helped me to understand something about Jquery,but unfortunately its not working with me,there is no change in the view,let me try Firebug.
Simple ajax functionality in CI - El Forum - 08-10-2011
[eluser]Rok Biderman[/eluser]
I'm attaching the files, see if we can make it clearer. If these don't work, it would either have to be server config or browser issues.
Simple ajax functionality in CI - El Forum - 08-10-2011
[eluser]jblack199[/eluser]
on the wiki tutorials, there is a GREAT tutorial about using jquery for ajax functionality. It is day 8 tutorial I believe, helped me understand how to implement jquery for use with my forms..