Codeigniter AJAX Example
Set unique id to the form:
echo form_open('test/add', array('id'=>'testajax'));
I assume that you want replace a form with a view:
jQuery(document).ready(function(){
var $=jQuery;
$('#testajax').submit(function(e){
var $this=$(this);
var msg = $this.find('#name').val();
$.post($this.attr('action'), {name: msg}, function(data) {
$this.replace($(data));
});
return false;
});
better way if you return url of view in json response:
$.post("<?php echo base_url(); ?>test/add", {name: msg}, function(data) {
$this.load(data.url);
},"json");
from your last comment - I strongly not suggest to replace body, it will be very hard to support such code.
but here is anser:
$.post("<?php echo base_url(); ?>test/add", {name: msg}, function(data) {
$('body').replace(data);
});
whispersan
Updated on July 09, 2022Comments
-
whispersan almost 2 years
I've been looking for a week now for a decent full working example of how to use AJAX with Codeigniter (I'm an AJAX novice). The posts / tuts I've seen are old - all the programming languages have moved on.
I want to have an input form on a page which returns something to the page (e.g. a variable, database query result or html formatted string) without needing to refresh the page. In this simple example is a page with an input field, which inserts the user input into a database. I'd like to load a different view once the input is submitted. If I could understand how to do this I'd be able to adapt it to do whatever I needed (and hopefully it would help others too!)
I have this in my 'test' controller:
function add(){ $name = $this->input->post('name'); if( $name ) { $this->test_model->put( $name ); } } function ajax() { $this->view_data["page_title"] = "Ajax Test"; $this->view_data["page_heading"] = "Ajax Test"; $data['names'] = $this->test_model->get(); //gets a list of names if ( $this->input->is_ajax_request() ) { $this->load->view('test/names_list', $data); } else { $this->load->view('test/default', $data); } }
Here is my view, named 'ajax' (so I access this through the URL www.mysite.com/test/ajax)
<script type="text/javascript"> jQuery( document ).ready( function() { jQuery('#submit').click( function( e ) { e.preventDefault(); var msg = jQuery('#name').val(); jQuery.post(" <?php echo base_url(); ?> test/add", {name: msg}, function( r ) { console.log(r); }); }); }); </script> <?php echo form_open("test/add"); ?> <input type="text" name="name" id="name"> <input type="submit" value="submit" name="submit" id="submit"> <?php echo form_close(); ?>
All that happens currently is that I type in an input, updates the database and displays the view "test/default" (it doesn't refresh the page, but doesn't display "test/names_list" as desired. Many thanks in advance for any help, and for putting me out of my misery!
-
whispersan over 11 yearsThankyou for your help and discussion!
-
Leonel over 11 yearsinstead of
var $=jQuery;
, you could open the ready statement passing$
as argument, likejQuery(document).ready(function($){
:) -
Ricky over 8 yearstry this tutorial w3code.in/2015/10/…