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 :)

have you wrapped the jquery code in $(document).ready(function() { ... }); ..? — Sudhir Bastakoti, Mar 11 '13 at 08:53
I am recommending you to install firebug or some kind of developer tools.Check the console for the errors. — Samy, Mar 11 '13 at 09:01
Plz test with it firebug tools. See what happen when you click in button. — Syed Ahmed, Mar 11 '13 at 09:02
Thank you for your reply @arun-p-johny , I tried looking at the browser console and it returns a 500 Internal Server Error with an error message "The action you require is not allowed". — Fandy, Mar 11 '13 at 09:06
I have also added the $(document).ready(function) as @Sudhir suggested but still giving the same error. — Fandy, Mar 11 '13 at 09:17

score 4 · Accepted Answer · edited May 23 '17 at 10:29

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 :)

Sabari · Answer 2 · 2013-03-11T09:18:26.247

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 :)

Sorry for the late reply, yes It was caused by CSRF being enabled, I have found a solution and it works fine :) Thank you for you help — Fandy, Mar 11 '13 at 09:50

score 0 · Answer 3 · edited Mar 11 '13 at 09:10

0

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.

edited Mar 11 '13 at 09:10

answered Mar 11 '13 at 09:06

Seto

1,234
1
17
33

Thanks for the reply, I checked the console using firebug and it returns a 500 Internal Server Error with a message of "The action you have requested is not allowed." – Fandy Mar 11 '13 at 09:10

score 0 · Answer 4 · answered Mar 11 '13 at 09:11

0

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.

answered Mar 11 '13 at 09:11

David Duncan

1,858
17
21

Thanks for the reply, I checked the config and its disabled – Fandy Mar 11 '13 at 09:12
Sorry just remembered another cause was csrf. Try turning it off to test. If it works check here for the workaround http://stackoverflow.com/questions/7351849/codeigniter-csrf-jquery-ajax-problem – David Duncan Mar 11 '13 at 09:18
As the solution link you gave is quite different, I used a solution from http://stackoverflow.com/questions/7348383/codeigniter-ajax-csrf-problem – Fandy Mar 11 '13 at 09:52

score 0 · Answer 5 · answered Mar 11 '13 at 09:29

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; ?>

Have you entered your site url into the CI config?

CodeIgniter, Ajax call does not get into Controller

5 Answers5