Simple Ajax/codeigniter Request

September 29, 2023 Post a Comment

I'm having some issues with ajax and codeigniter. I've already posted another question (link to question) and I thought I solved it, but I did not so I`m asking someone to write si

Solution 1:

You must submit the CSRF token from cookies otherwise the request will be invalid, if you have CSRF enabled in config.php.

You can use this plugin to retrieve cookies in javascript. And simply pass it to CI.

ci_token

and

ci_cookie

keys may be different and can be found in config.php

I would also suggest setting up a route for the request and using

site_url()

over

base_url()

var SITE = "<?phpecho site_url();?>" // GLOBAL variable so your javascripts can be external

vardata = { 'ci_token' : $.cookies.get('ci_cookie'), 'increase' : parseInt(number)}
$.ajax({
    url : SITE + "/link/to/controller/method",
    data : data,
});

Solution 2:

use site_url() of codeigniter

functionincrease(){
   var number = parseInt($('#number').html()) + 1;  
   $.ajax({
     type: 'POST',
     url: '<?php echo site_url("welcome/increase")?>',
     data: { increse:number }, //<--- here should be increasesuccess:function(response){
        $('#number').html(response);
     }
  });

}

however, adding http:// in front of localhost should work

 url: 'http://localhost/test/welcome/increase',

but it is always better and recommended to use site_url() if you are calling a controller in CI...so that this won't give you errors while when you upload it to live server.

Solution 3:

In your ajax, don't use external link for your JS just use internal.

Make sure that you set your $config['base_url'] = http://localhost/test/ in config.php

functionincrease(){
    var number = parseInt($('#number').html()) + 1;
    $.ajax({
        type: 'POST',
        url: '<?php echo base_url()?>welcome/increase',
        data: { increase:number },
        success:function(response){
           $('#number').html(response);
        }
   });

}

Solution 4:

<!DOCTYPE html><htmllang="en"><head><scripttype="text/javascript"></script><scripttype="text/javascript"src="<?phpecho base_url();?>assets/js/jquery_v1.9.1.js"></script><scripttype="text/javascript"src="<?phpecho base_url();?>assets/js/script.js"></script><styletype="text/css">#number {
    display: block;
    text-align: center;
    width: 100px;
    height: 30px;
    margin: auto auto;
    line-height: 30px;
    border: 1px solid #999999;
    border-radius: 5px;
  }

</style></head><script>functionincrease(){
  var number = parseInt($('#number').html()) + 1;
  $.ajax({
      type: 'POST',
      url: '<?phpecho base_url()?>welcome/increase',
      data: { increase:number },
      success:function(response){
         $('#number').html(response);
      }
  });

}
</script><body><spanid="number"onclick="increase()">0</span></body></html>

Solution 5:

First You should define your site base_url in application/config file then use this base_url with your ajax page call from where your call goes. Suppose your base_url is http://localhost/test/

functionincrease(){
   varnumber = parseInt($('#number').html()) + 1;
   $.post('<?php echo base_url()?>welcome/increase',{number :number},function(response){
          $('#number').html(response);
   });    
}

then change your increase function in controller like this

functionincrease(){
   $increase = $_POST['number'];
echo increase++;

}

JavaScript Charts