How to Call jQuery Ajax in CodeIgniter

How to Call jQuery Ajax in CodeIgniter

Today I will explain, how to call jQuery and Ajax in CodeIgniter with example.

This post contains following files
  • ajax.php(controllers)
  • index.php(views)
  • routes.php
  • config.php
Need,  create one folder in root directory suppose your project folder CITest then created folder name is assets folder, and i need another folder so i create js folder inside assets folder

How to Download  jQuery File
Go to browser and type www.jquery.com screen shown below


How to Call jQuery Ajax in CodeIgniter

Then click Download jQuery v3.1.1 screen shown below


How to Call jQuery Ajax in CodeIgniter

Above screen have following downloading options but you can click Download the compressed, production jQuery 3.1.1 then go to downloaded files like (jquery-3.1.1.min.js), copy that file and paste js folder (before you are already created) also you can rename that downloaded  file.

How to Link jQuery file in our File

Simply placed below code in <head> section

<script type="text/javascript" src="assets/js/jquery-3.1.1.min.js"></script>

Here my jQuery file is placed assets/js folder but you can change folder name as per own requirement.

Now create views like index.php,  go to CITest/application/views code shown below

<!DOCTYPE html>
<html>
<head>
<title>Ajax Example</title>
<script type="text/javascript" src="assets/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
   $('#btnclick').click(function(){
     var fname = $('#fname').val();
$.ajax({
        type:'POST',
data:{fname: fname},
url:'<?php echo site_url('ajax/full_name'); ?>',
success: function(result){
$('#results').html(result);
}
});
 });
 });
</script>
</head>
<body>
<fieldset style="width: 350px;">
<legend>Name</legend>
<form>
    <h2>Fill the Name</h2>
    Full Name: <input type="text" name="fname" id="fname">
    <input type="button" name="btnclick" id="btnclick" value="Click">
    <br/>
    <span id="results"></span>
</form>
</fieldset>
</body>
</html>

Now create controllers like ajax.php, go to CITest/application/controllers code shown below

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

class Ajax extends CI_Controller {

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

public function full_name()
{
$fname = $this->input->post('fname');
echo 'Hello... '.$fname;
}
}

Now  I load helper url class in index() function

Now  I want to ajax.php controller as a default controllers for the go to this path CITest/application/config and open routes.php file and replace the code

$route['default_controller'] = 'welcome';
To
$route['default_controller'] = 'ajax';

Now  I want to configure base_url
Go to CITest\application\config and open config.php file change the code

$config['base_url'] = '';
To
$config['base_url'] = 'http://localhost/CITest/';

Now go to browser and type http://localhost/CITest
here  CITest is the project folder where all codeigniter files are presents, screen shown below


How to Call jQuery Ajax in CodeIgniter

Fill the name then click button result screen shown below


How to Call jQuery Ajax in CodeIgniter
Example 1

Add two Number using jQuery Ajax in Codeigniter

Open index.php views and paste code shown below

<!DOCTYPE html>
<html>
<head>
<title>Ajax Example</title>
<script type="text/javascript" src="assets/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#btnadd').click(function(){
var numberone = $('#numberone').val();
var numbertwo = $('#numbertwo').val();
if (isNaN(numberone) || isNaN(numbertwo))
alert('Number one or Number Two must be a number.');
else
{
$.ajax({
type:'POST',
data:{numberone: numberone, numbertwo: numbertwo},
url:'<?php echo site_url('ajax/add'); ?>',
success: function(result){
$('#results1').html(result);
 }
 });
}
});
});
</script>
</head>
<body>
<fieldset style="width: 350px;">
<legend>Add Two Numbers</legend>
<form>
<h2>Add Two Numbers</h2>
    <table cellpadding="2" cellspacing="2">
    <tr>
    <td>Number One</td>
    <td><input type="text" name="numberone" id="numberone"></td>
    </tr>
    <tr>
    <td>Number Two</td>
    <td><input type="text" name="numbertwo" id="numbertwo"></td>
    </tr>
    <tr>
    <td>Result</td>
    <td><span id="results1"></span></td>
    </tr>
    <tr>
    <td colspan="2"><input type="button" name="btnadd" id="btnadd" value="Add"></td>
    </tr>
    </table>
</form>
</fieldset>
</body>
</html>

Open ajax.php controller and add code shown below

public function add()
{
$numberone = $this->input->post('numberone');
$numbertwo = $this->input->post('numbertwo');

echo $numberone + $numbertwo;
}

Go to browser and type http://localhost/CITest screen shown below


How to Call jQuery Ajax in CodeIgniter

Fill the values in fields then click button result screen shown below


How to Call jQuery Ajax in CodeIgniter
Example 2

Substract two Number using jQuery Ajax in Codeigniter

Open index.php views and paste code shown below

<!DOCTYPE html>
<html>
<head>
<title>Ajax Example</title>
<script type="text/javascript" src="assets/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#btnsubs').click(function(){
var num1 = $('#num1').val();
var num2 = $('#num2').val();
if (isNaN(num1) || isNaN(num2))
alert('Number 1 or Number 2 must be a number.');
else
{
$.ajax({
type:'POST',
data:{num1: num1, num2: num2},
url:'<?php echo site_url('ajax/subs_two_number'); ?>',
success: function(result){
$('#resultsubs').html(result);
 }
 });
}
});
});
</script>
</head>
<body>
<fieldset style="width: 350px;">
<legend>Substract Two Numbers</legend>
<form>
<h2>Substract Two Numbers</h2>
    <table cellpadding="2" cellspacing="2">
    <tr>
    <td>Number One</td>
    <td><input type="text" name="num1" id="num1"></td>
    </tr>
    <tr>
    <td>Number Two</td>
    <td><input type="text" name="num2" id="num2"></td>
    </tr>
    <tr>
    <td>Result</td>
    <td><span id="resultsubs"></span></td>
    </tr>
    <tr>
    <td colspan="2"><input type="button" name="btnsubs" id="btnsubs" value="Substract"></td>
    </tr>
    </table>
</form>
</fieldset>
</body>
</html>

Open ajax.php controller and add code shown below

 public function subs_two_number()
{
$number1 = $this->input->post('num1');
$number2 = $this->input->post('num2');

echo $number1 - $number2;
}


Go to browser and type http://localhost/CITest screen shown below


How to Call jQuery Ajax in CodeIgniter

Fill the values in fields then click button result screen shown below


How to Call jQuery Ajax in CodeIgniter
Example 3

Multiply two Number using jQuery Ajax in Codeigniter

Open index.php views and paste code shown below

<!DOCTYPE html>
<html>
<head>
<title>Ajax Example</title>
<script type="text/javascript" src="assets/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">

   $(document).ready(function(){
     $('#btnmulti').click(function(){
       var nums1 = $('#nums1').val();
       var nums2 = $('#nums2').val();

       if (isNaN(nums1) || isNaN(nums2))
         alert('Number 1 or Number 2 must be a number.');
       else
        {
   $.ajax({
   type:'POST',
   data:{nums1: nums1, nums2: nums2},
   url:'<?php echo site_url('ajax/multi_two_number'); ?>',
   success: function(result){
   $('#resultmulti').html(result);
         }
     });
    }

  });
});
</script>
</head>
<body>
<fieldset style="width: 350px;">
<legend>Multiply Two Numbers</legend>
<form>
<h2>Multiply Two Numbers</h2>
  <table cellpadding="2" cellspacing="2">
    <tr>
    <td>Number One</td>
    <td><input type="text" name="nums1" id="nums1"></td>
    </tr>
    <tr>
    <td>Number Two</td>
    <td><input type="text" name="nums2" id="nums2"></td>
    </tr>
    <tr>
       <td>Result</td>
       <td><span id="resultmulti"></span></td>
    </tr>
    <tr>
    <td colspan="2"><input type="button" name="btnmulti" id="btnmulti" value="Multiply"></td>
    </tr>
   </table>
</form>
</fieldset>
</body>
</html>

Open ajax.php controller and add code shown below

public function multi_two_number()
   {
$number1 = $this->input->post('nums1');
$number2 = $this->input->post('nums2');

echo $number1 * $number2;

   }

Go to browser and type http://localhost/CITest screen shown below


How to Call jQuery Ajax in CodeIgniter

Fill the values in fields then click button result screen shown below


How to Call jQuery Ajax in CodeIgniter
Example 4

Divide two Number using jQuery Ajax in Codeigniter

Open index.php views and paste code shown below

<!DOCTYPE html>
<html>
<head>
<title>Ajax Example</title>
<script type="text/javascript" src="assets/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">

  $(document).ready(function(){
    $('#btndiv').click(function(){
        var numss1 = $('#numss1').val();
var numss2 = $('#numss2').val();

if (isNaN(numss1) || isNaN(numss2))
   alert('Number 1 or Number 2 must be a number.');
else
{
     $.ajax({
     type:'POST',
     data:{numss1: numss1, numss2: numss2},
     url:'<?php echo site_url('ajax/div_two_number'); ?>',
     success: function(result){
     $('#resultdiv').html(result);
}
     });
    }

});
<fieldset style="width: 350px;">
<legend>Divide Two Numbers</legend>
<form>
<h2>Divide Two Numbers</h2>
  <table cellpadding="2" cellspacing="2">
    <tr>
    <td>Number One</td>
    <td><input type="text" name="numss1" id="numss1"></td>
    </tr>
    <tr>
    <td>Number Two</td>
    <td><input type="text" name="numss2" id="numss2"></td>
    </tr>
    <tr>
    <td>Result</td>
    <td><span id="resultdiv"></span></td>
    </tr>
    <tr>
    <td colspan="2"><input type="button" name="btndiv" id="btndiv" value="Divide"></td>
    </tr>
    </table>
</form>

</fieldset>
</body>
</html>

Open ajax.php controller and add code shown below

public function div_two_number()
   {
$number1 = $this->input->post('numss1');
$number2 = $this->input->post('numss2');

echo $number1 / $number2;

   }


Go to browser and type http://localhost/CITest screen shown below


How to Call jQuery Ajax in CodeIgniter

Fill the values in fields then click button result screen shown below


How to Call jQuery Ajax in CodeIgniter





                 I hope, it helped you to understand, how to call jQuery and Ajax in CodeIgniter......Thanks

About MSK TUTORIAL

Hi...I am Md Sahjad Karim and I am Engineering Graduate (B.E in Computer Science and Engineering) working as a Web Developer and write Blog Articles. http://www.msktutorial.com/ was launched on july 2016 to provide free online hints, tips, guides and tutorials related to technology(PHP, CodeIgniter, WordPress, Blogger etc). My primary goal is to provide the good, quality and easily to understand the articles to readers around the world.
    Blogger Comment
    Facebook Comment

3 comments:

Kaka said...

please provide how to upload file with insert/update store on database in codeigniter

Priya Kannan said...

Such a great articles in my carrier, It's wonderful commands like easiest understand words of knowledge in information's.
PHP Training in Chennai

Unknown said...

"I very much enjoyed this article.Nice article thanks for given this information. i hope it useful to many pepole.php jobs in hyderabad.
"

Post a Comment

Thanks For Visiting Blog...