A basic AJAX call in Codeigniter

Question

A basic AJAX call in Codeigniter

I am encountering some challenges with ajax and codeigniter. Despite posting a previous question (link to question) and thinking I had resolved it, I am still facing issues. I am seeking assistance in creating simple code using ajax/codeigniter to increment a number inside a div/span upon clicking.

For the past few days, I have been attempting to achieve this, but I keep running into errors. My CodeIgniter settings are as follows:
base_url: localhost/test/
index: index.php
autoload: url
default controller: welcome (left unchanged for testing purposes)

I would greatly appreciate a straightforward example to implement this. I have tried again, but unfortunately, have not succeeded. Here is what I attempted this time:

Controller (welcome.php)

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Welcome extends CI_Controller {


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

public function index()
{
    $this->load->view('welcome_message');
}

function increase(){
    $increase = $this->input->post('increase');
    echo increase++;
}
}

JS (Ajax)

function increase(){
var number = parseInt($('#number').html()) + 1;
$.ajax({
        type: 'POST',
        url: 'localhost/test/welcome/increase',
        data: { increase:number },
        success:function(response){
            $('#number').html(response);
        }
});

}

View (HTML/CSS)

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript"></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery_v1.9.1.js"> </script>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/script.js">            </script>
<style type="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>
<body>
    <span id="number" onclick="increase()">0</span>
</body>
</html>

I am using the latest xampp on windows 7. The error I encounter when clicking on the span is:

POST http://localhost/test/localhost/test/welcome/increase 404 (Not Found)

javascript ajax codeigniter onclick

Answer 1

Answer №1

Ensure that the CSRF token from cookies is included in the submission to avoid invalidating the request, especially if CSRF is activated in config.php.

If you need to retrieve cookies in JavaScript, you can utilize this plugin and pass it to CI accordingly.

ci_token

and

ci_cookie

keys may have distinct names and can be located in config.php.

Setting up a route for the request and utilizing

site_url()

is recommended instead of

base_url()

var SITE = "<?php echo site_url();?>" // This global variable allows your JavaScript files to be external

-

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

Answer 2

Ensure that the CSRF token from cookies is included in the submission to avoid invalidating the request, especially if CSRF is activated in config.php.

If you need to retrieve cookies in JavaScript, you can utilize this plugin and pass it to CI accordingly.

ci_token

and

ci_cookie

keys may have distinct names and can be located in config.php.

Setting up a route for the request and utilizing

site_url()

is recommended instead of

base_url()

var SITE = "<?php echo site_url();?>" // This global variable allows your JavaScript files to be external

-

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

Answer 3

Answer №2

Utilize the site_url() function in CodeIgniter

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

}

On the other hand, if you add http:// before localhost, it should function as well

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

Nevertheless, it is always best practice and highly recommended to use site_url() when calling a controller in CI. This helps to prevent errors when the code is transferred to a live server.

Answer 4

Utilize the site_url() function in CodeIgniter

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

}

On the other hand, if you add http:// before localhost, it should function as well

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

Nevertheless, it is always best practice and highly recommended to use site_url() when calling a controller in CI. This helps to prevent errors when the code is transferred to a live server.

Answer 5

Answer №3

When working with ajax, it is recommended to avoid using external links for your JavaScript and stick to internal links instead.

Remember to configure your $config['base_url'] to http://localhost/test/ in the config.php file.

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

}

Answer 6

When working with ajax, it is recommended to avoid using external links for your JavaScript and stick to internal links instead.

Remember to configure your $config['base_url'] to http://localhost/test/ in the config.php file.

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

}

Answer 7

Answer №4

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript"></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery_v1.9.1.js"> </script>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/script.js">            </script>
<style type="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>
function increase(){
  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);
      }
  });

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

Answer 8

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript"></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery_v1.9.1.js"> </script>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/script.js">            </script>
<style type="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>
function increase(){
  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);
      }
  });

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

Answer 9

Answer №5

To start, it's important to establish the site base_url in the application/config file and then utilize this base_url when making ajax calls in your code. Assuming that your base_url is http://localhost/test/.

function updateCount(){
   var count = parseInt($('#count').html()) + 1;
   $.post('<?php echo base_url()?>welcome/updateCount',{count :count},function(response){
          $('#count').html(response);
   });    
}

Next, update the updateCount function in your controller like this:

function updateCount(){
   $newCount = $_POST['count'];
   echo ++$newCount;
}

}

Answer 10

To start, it's important to establish the site base_url in the application/config file and then utilize this base_url when making ajax calls in your code. Assuming that your base_url is http://localhost/test/.

function updateCount(){
   var count = parseInt($('#count').html()) + 1;
   $.post('<?php echo base_url()?>welcome/updateCount',{count :count},function(response){
          $('#count').html(response);
   });    
}

Next, update the updateCount function in your controller like this:

function updateCount(){
   $newCount = $_POST['count'];
   echo ++$newCount;
}

}

Answer 11

Answer №6

give this a shot:

function increment(){
        var value = parseInt($('#value').html()) + 1;
        $.ajax({
            type: 'POST',
            url: 'localhost/test/Welcome/increment/',
            data: "increment=" + value,
            dataType: "text",
            success:function(result){
                $('#value').html(result);
            }
        });

 }

Answer 12

give this a shot:

function increment(){
        var value = parseInt($('#value').html()) + 1;
        $.ajax({
            type: 'POST',
            url: 'localhost/test/Welcome/increment/',
            data: "increment=" + value,
            dataType: "text",
            success:function(result){
                $('#value').html(result);
            }
        });

 }

Answer 13

Answer №7

If you're utilizing this ajax code in a .php file, you should make sure to adjust your URL like this:

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

Alternatively, if you're working in a .js file, you'll need to insert this line within the head tag:

<script> var base_url = "<?php echo base_url();?>";</script>

Then, you can use the following:

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

Hopefully, this addresses the issue. It's advisable to set the base_url in config.php when working in a local environment like so:

$root = "http://".$_SERVER['HTTP_HOST'];
$root .= str_replace(basename($_SERVER['SCRIPT_NAME']),"",$_SERVER['SCRIPT_NAME']);
$config['base_url']    = $root;

Answer 14

If you're utilizing this ajax code in a .php file, you should make sure to adjust your URL like this:

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

Alternatively, if you're working in a .js file, you'll need to insert this line within the head tag:

<script> var base_url = "<?php echo base_url();?>";</script>

Then, you can use the following:

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

Hopefully, this addresses the issue. It's advisable to set the base_url in config.php when working in a local environment like so:

$root = "http://".$_SERVER['HTTP_HOST'];
$root .= str_replace(basename($_SERVER['SCRIPT_NAME']),"",$_SERVER['SCRIPT_NAME']);
$config['base_url']    = $root;

Answer 15

Answer №8

Explore::::::    
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="<?php echo base_url();?>css/jquery.js"> </script>
<style type="text/css">
#number {
display: block;
text-align: center;
width: 100px;
height: 30px;
margin: 50px auto;
line-height: 30px;
border: 1px solid #999;
border-radius: 5px;
}
body{
cursor: default;
}
</style>
</head>
<script>
function increment(){
var number = parseInt($('#number').html());
$.ajax({
  type: 'POST',
  url: '<?php echo base_url()?>main/samp_data',
  data: { increment:number },
  success:function(response){
     $('#number').html(response);
  }
  });
 }
</script>
<body>
<span id="number" onclick="increment()">0</span>
</body>
</html>




Controller::::::
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Main extends CI_Controller {

    public function index(){
        $this -> load -> view('sample_view');
    }

    public function samp_data(){
        $increment = $this->input->post('increment');
        echo ++$increment;
    }
}

Answer 16

Explore::::::    
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="<?php echo base_url();?>css/jquery.js"> </script>
<style type="text/css">
#number {
display: block;
text-align: center;
width: 100px;
height: 30px;
margin: 50px auto;
line-height: 30px;
border: 1px solid #999;
border-radius: 5px;
}
body{
cursor: default;
}
</style>
</head>
<script>
function increment(){
var number = parseInt($('#number').html());
$.ajax({
  type: 'POST',
  url: '<?php echo base_url()?>main/samp_data',
  data: { increment:number },
  success:function(response){
     $('#number').html(response);
  }
  });
 }
</script>
<body>
<span id="number" onclick="increment()">0</span>
</body>
</html>




Controller::::::
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Main extends CI_Controller {

    public function index(){
        $this -> load -> view('sample_view');
    }

    public function samp_data(){
        $increment = $this->input->post('increment');
        echo ++$increment;
    }
}

A basic AJAX call in Codeigniter

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

Retrieving values from multiple Select components in Material-UI is key

Combining user input data using JavaScript and Vue.js

Backend server encountered an issue with processing punycode

What is the process for loading an HTML form into a specific target using Angular?

Adding JSON data to a table with the keys in the first row is a simple process that can be achieved

Add a specific CSS class to a div element depending on the status of a checkbox

Automatic button rotation

Does anyone know of a way to integrate a calendar feature into a React application using a library

What is the proper way to utilize setTimeout in TypeScript?

The functionality of removing a class on the body element is ineffective when using pagepiling.js

Resolving "Module not found: Error: Can't resolve 'url'" issue in Angular 14 while invoking web3 smart contract function

Enhance state using the values from radio buttons in a React application

Using THREE.js to incorporate a stroke above extruded text

Tips for displaying real-time error notifications from server-side validation using AJAX

Ionic (Angular) experiencing crashes due to numerous HTTP requests being made

Enhance user experience with real-time form validation in Bootstrap 4 as the user inputs

Exploring an array using bluebird promises

There seems to be an issue with the functionality of chrome.storage.local.set()

Only a select few expandable elements in the jQuery accordion

Leveraging highland.js for sequentially executing asynchronous functions while maintaining references to the initial stream data