Insert and view data without refreshing page using ajax and jQuery in codeigniter

Insert and view data without refreshing page using ajax and jQuery in codeigniter.

Insert and view the data from database using codeigniter, MySql, AJax and JQuery. In this post i’m going to show you that, in an usual insert and view take page refresh. so the loading will make page loading delay, so here i’m going use AJAX to insert and view without refreshing the page and i already show you that how to create database and how to insert data  in that.

Create table:

employees   
  1. CREATE TABLE IF NOT EXISTS `employees` (
  2. `id` bigint(20) NOT NULL AUTO_INCREMENT,
  3. `employee_id` varchar(50) DEFAULT NULL,
  4. `emp_name` varchar(100) NOT NULL DEFAULT '',
  5. `birthday` datetime DEFAULT '0000-00-00 00:00:00',
  6. `gender` enum('Male','Female') DEFAULT NULL,
  7. `marital_status` enum('Married','Single','Divorced','Widowed','Other') DEFAULT NULL,
  8. `address` varchar(100) DEFAULT NULL,
  9. `postal_code` varchar(20) DEFAULT NULL,
  10. `home_phone` varchar(50) DEFAULT NULL,
  11. `mobile_phone` varchar(50) DEFAULT NULL,
  12. `work_email` varchar(100) DEFAULT NULL,
  13. `private_email` varchar(100) DEFAULT NULL,
  14. `joined_date` datetime DEFAULT '0000-00-00 00:00:00',
  15. `confirmation_date` datetime DEFAULT '0000-00-00 00:00:00',
  16. `department` varchar(20) DEFAULT NULL,
  17. PRIMARY KEY (`id`),
  18. UNIQUE KEY `employee_id` (`employee_id`)
  19. )ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

Now create view to insert data using  Ajax in database: You have to write the jQuery and Ajax code on the view page to insert data. Two important thing to remember while using Ajax to insert data. First use method post and use serialize() to fetch the data from form.
add_employee.php
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  2. $(document).ready(function(){
  3. $(".button").click(function(){
  4. $.ajax({
  5. type:"POST",
  6. url: "<?php echo site_url('add_employee/add_employee_data');?>",
  7. data:$("#myForm").serialize(),
  8. success: function (dataCheck) {
  9. //alert(dataCheck);
  10. $('.sort').append(dataCheck);
  11. //window.location.reload();},
  12. });});});
  13. <div id="container">
  14. <div class="shell">
  15. <div id="main">
  16. <div class="cl">&nbsp;</div>
  17. <div id="content">
  18. <!-- Box -->
  19. <div class="box">
  20. !-- Box Head -->
  21. <div class="box-head">
  22. <h2 class="left">Add Employee Record</h2>
  23. <div class="right">
  24. </div>
  25. </div>
  26. <div class="table">
  27. <form name="emp" action="" onsubmit="return validate_form();" method="post" id="myForm">
  28. <table class="" align="center" width="100%" cellspacing="2" cellpadding="2">
  29. <tr>
  30. <td>Employee ID<span style="color:red">*</span></td>
  31. <td>
  32. <input type="text" value="" name="emp_id" class="field small-field">
  33. </td>
  34. </tr>
  35. <tr>
  36. <td>Employee Name<span style="color:red">*</span></td>
  37. <td>
  38. <input type="text" value="" name="emp_name" class="field small-field">
  39. </td>
  40. </tr>
  41. <tr>
  42. <td>Gender</td>
  43. <td>
  44. <select name="emp_gender" class="field">
  45. <option value="Male">Male</option>
  46. <option value="Female">Female</option>
  47. </td>
  48. </tr>
  49. <tr>
  50. <td align="left" valign="top" width="41%">Marital Status</td>
  51. <td width="57%">
  52. <select name="emp_status" class="field">
  53. <option value="Single">Single</option>
  54. <option value="Married">Married</option>
  55. <option value="Divorced">Divorced</option>
  56. </td>
  57. </tr>
  58. <tr>
  59. <td align="left" valign="top" width="41%">Address</td>
  60. <td width="57%">
  61. <textarea rows="4" maxlen="200" name="address" cols="20"></textarea>
  62. </td>
  63. </tr>
  64. <tr>
  65. <td align="left" valign="top" width="41%">Mobile Number</td>
  66. <td width="57%">
  67. <input type="text" value="" onkeypress="return isNumberKey(event)" name="emp_mobile_no" class="field small-field">
  68. </td>
  69. </tr>
  70. <tr>
  71. <td align="left" valign="top" width="41%">Home Number</td>
  72. <td width="57%">
  73. <input type="text" value="" onkeypress="return isNumberKey(event)" name="emp_home_no" class="field small-field">
  74. </td>
  75. </tr>
  76. <tr>
  77. <td align="left" valign="top" width="41%">Designation</td>
  78. <td width="57%">
  79. <select name="emp_designation" class="field">
  80. <option value="HR">HR</option>
  81. <option value="PHP Developer">PHP Developer</option>
  82. <option value="Web Designert">Web Designer</option>
  83. <option value="SEO">SEO</option>
  84. <option value="Project Manager">Project Manager</option>
  85. <option value="Bidding">Bidding</option>
  86. </td>
  87. </tr>
  88. <tr>
  89. <td align="left" valign="top" width="41%">Work Email<span style="color:red">*</span></td>
  90. <td width="57%">
  91. <input type="text" value="" name="w_email_id" class="field small-field">
  92. </td>
  93. </tr>
  94. <tr>
  95. <td align="left" valign="top" width="41%">Private Email<span style="color:red">*</span></td>
  96. <td width="57%">
  97. <input type="text" value="" name="p_email_id" class="field small-field">
  98. </td>
  99. </tr>
  100. <tr>
  101. <td align="left" valign="top" width="41%">Joining Date<span style="color:red">*</span></td>
  102. <td width="57%">
  103. <input type="text" class="datepicker" name="join_date" class="field small-field">
  104. </td>
  105. </tr>
  106. <tr>
  107. <td colspan="2">
  108. <p align="center">
  109. <input type="button" class="button" value="submit" />
  110. <input type="reset" value=" Reset All" class="button" name="B5">
  111. </td>
  112. </tr>
  113. </form>
  114. </div>
  115. </div>
  116. </div>
  117. </div>
  118. <div id="sidebar">
  119. <div class="box">
  120. <div class="box-head">
  121. <h2>Employee List</h2>
  122. </div>
  123. <div class="sort" id="show">
  124. <br>
  125. </div>

Copy and paste the above code in the view folder in add_employee.php file

Now create controller Add_employee.php and paste the below code in the file.

  1. <?php
  2. defined('BASEPATH') OR exit('No direct script access allowed');
  3. class Add_employee extends CI_Controller {
  4. public function __construct()
  5. {
  6. parent::__construct();
  7. $this->load->helper(array('url'));
  8. $this->load->model('add_employee');
  9. }
  10. public function add_employee()
  11. {
  12. $this->load->view(‘add_employee');
  13. }
  14. public function add_employee_data()
  15. {
  16. //echo "hello";die;
  17. $date = $this->input->post('join_date');
  18. $join_date = date( 'Y-m-d', strtotime( $date ) );
  19. $data = array('employee_id'=>$this->input->post('emp_id'),
  20. 'emp_name'=>$this->input->post('emp_name'),
  21. 'gender'=>$this->input->post('emp_gender'),
  22. 'marital_status'=>$this->input->post('emp_status'),'address'=>$this->input->post('address'),'home_phone'=>$this->input->post('emp_home_no'),
  23. 'mobile_phone'=>$this->input->post('emp_mobile_no'),
  24. 'department'=>$this->input->post('emp_designation'),
  25. 'work_email'=>$this->input->post('w_email_id'),
  26. 'private_email'=>$this->input->post('p_email_id'),
  27. 'joined_date'=>$join_date);
  28. $row = $this->add_employee-> add_employee_data ($data);
  29. //print_r($row);die;
  30. echo $html = '<p>'.$row[0]->emp_name.'</p><br>';
  31. }
  32. }

Now create the model to insert and fetch the inserted data to show on the same page without refresh

Create Add_employee.php in the model folder and copy and paste the below code.

We will create the html in the variable $html to show the inserted user details in the same page I have created only html for the name you can extend the html to show the other details

  1. <?php
  2. defined('BASEPATH') OR exit('No direct script access allowed');
  3. class Add_employee extends CI_model {
  4. public function __construct() {
  5. parent::__construct();
  6. }
  7. public function add_employee_data($data){
  8. $this->db->insert('employees',$data);
  9. $id = $this->db->insert_id();
  10. $this->db->select('*');
  11. $this->db->from('employees');
  12. $this->db->where('id',$id);
  13. $result = $this->db->get()->result();
  14. return $result;
  15. }
  16. }

Now you can add the data in database and show the data to the user on the same page without refreshing the whole page. This code is tested and 100% working. Please let me know if you have any issue. Thanks and keep reading.

  • irene baluis

    what is the url to view this project? i already copied and pasted all the codes.