CodeIgniter, Ajax call does not get into Controller

Question

After looking at a solution on ci-ajax-csrf-problem I added the following line into the script and it works fine.

var post_data = {
    '<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>'
}

inserted into

$.ajax({
        url: '<?php echo base_url()."ajax/test";?>',
        type:'POST',
        dataType: 'json',
        data: post_data, 

Thank you for the help everyone :)

I am new to Ajax/Jquery and was following a guide on Ajax for CodeIgniter from jorge torres to implement a simple ajax call on my website and ran into problems.

I created a Controller Ajax and this is the code snippet.

class Ajax extends CI_Controller {

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

    public function test() {
        $output_string = 'This is a test';  
        echo json_encode($output_string);
    }

    public function test2(){
        $this->load->view('test.php');
    }
}

And this is the view for that controller, its identical to the one from the tutorial except I added loaded the url helper $this->load->helper('url'); on the first line

Here is the snippet for the script code.

The #getdata is a button type and #result_table is a div

$('#getdata').click(function(){
$.ajax({
        url: '<?php echo base_url().'ajax/test';?>',
        type:'POST',
        dataType: 'json',
        success: function(output_string){
                $('#result_table').append(output_string);
            } // End of success function of ajax form
        }); // End of ajax call
});

I can successfully access localhost.com/codeigniter/ajax/test2 but when I clicked the button, nothing happen.

I tried looking at the page source info and the url is correct

$.ajax({
        url: 'http://localhost/codeigniter/ajax/test',
        type:'POST'
        ....

Accessing localhost/codeigniter/ajax/test directly is also possible and it display the output message.

I am using CodeIgniter 2.1.3 and my localhost is running on XAMPP 1.7.3

Thank you in advance :)

Answer 1

After looking at a solution on ci-ajax-csrf-problem I added the following line into the script and it works fine.

var post_data = {
    '<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>'
}

inserted into

$.ajax({
        url: '<?php echo base_url()."ajax/test";?>',
        type:'POST',
        dataType: 'json',
        data: post_data, 

Thank you for the help everyone :)

Answer 2

I think there is an issue with your ajax call . Should be like this I think :

$(document).ready (function () { 
   $('#getdata').click(function(){
     $.ajax({
        url: '<?php echo base_url()."ajax/test";?>',
        type:'POST',
        dataType: 'json',
        success: function(output_string){
                $('#result_table').append(output_string);
            } // End of success function of ajax form
        }); // End of ajax call
    });
});

If the firebug console says that The action you require is not allowed, then it may be a CSRF token issue, turn it off in the codeigniter config.

Add this in config file.

$config['csrf_protection'] = FALSE; 

Hope this helps :)

Answer 3

Did your .click() event handler works as expected?

$('#getdata').click(function(){
 alert('clicked');
 ........

if no, try to wrapped the jquery code in $(document).ready(function() { ... }); as @Sudhir suggested:

$(document).ready( function() { 
      $('#getdata').click(function(){
      alert('clicked');
      ........

});

if yes, in case you don't know it yet, there's a tool called firebug to check your AJAX request. I thinks there's no problem with your AJAX url. So far, this is my answer. Hope this helps too.

Answer 4

Do you have output compression enabled(gzip) in your config.php? If you compress your output it will fail when you use echo and return the 500 server errors.

Answer 5

Have you tried

$(document).ready (function () { 
   $('#getdata').click(function(){
     $.ajax({
        url: '/ajax/test',
        type:'POST',
        dataType: 'json',
        success: function(output_string){
                $('#result_table').append(output_string);
            } // End of success function of ajax form
        }); // End of ajax call
    });
});

as apposed to <?php base_url; ?> <?php base_url; ?>

Have you entered your site url into the CI config?