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

View: 1021    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: Codeigniter   Fields: Other

29 point/4 review File has been tested

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

Introduction

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:

CREATE TABLE IF NOT EXISTS `employees` (
`id` bigint(20) NOT NULL AUTO_INCREMENT,
`employee_id` varchar(50) DEFAULT NULL,
`emp_name` varchar(100) NOT NULL DEFAULT '',
`birthday` datetime DEFAULT '0000-00-00 00:00:00',
`gender` enum('Male','Female') DEFAULT NULL,
`marital_status` enum('Married','Single','Divorced','Widowed','Other') DEFAULT NULL,
`address` varchar(100) DEFAULT NULL,
`postal_code` varchar(20) DEFAULT NULL,
`home_phone` varchar(50) DEFAULT NULL,
`mobile_phone` varchar(50) DEFAULT NULL,
`work_email` varchar(100) DEFAULT NULL,
`private_email` varchar(100) DEFAULT NULL,
`joined_date` datetime DEFAULT '0000-00-00 00:00:00',
`confirmation_date` datetime DEFAULT '0000-00-00 00:00:00',
`department` varchar(20) DEFAULT NULL,
PRIMARY KEY (`id`),
UNIQUE KEY `employee_id` (`employee_id`)
)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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".button").click(function(){
$.ajax({
type:"POST",
url: "<?php echo site_url('add_employee/add_employee_data');?>",
data:$("#myForm").serialize(),
success: function (dataCheck) {
//alert(dataCheck);
$('.sort').append(dataCheck);
//window.location.reload();},
});});});
</script>
<div id="container">
<div class="shell">
<div id="main">
<div class="cl">&nbsp;</div>
<div id="content">
<!-- Box -->
<div class="box">
!-- Box Head -->
<div class="box-head">
<h2 class="left">Add Employee Record</h2>
<div class="right">
<label></label>
</div>
</div>
<div class="table">
<form name="emp" action="" onsubmit="return validate_form();" method="post" id="myForm">
<table class="" align="center" width="100%" cellspacing="2" cellpadding="2">
<tr>
<td>Employee ID<span style="color:red">*</span></td>
<td>
<input type="text" value="" name="emp_id" class="field small-field">
</td>
</tr>
<tr>
<td>Employee Name<span style="color:red">*</span></td>
<td>
<input type="text" value="" name="emp_name" class="field small-field">
</td>
</tr>
<tr>
<td>Gender</td>
<td>
<select name="emp_gender" class="field">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td align="left" valign="top" width="41%">Marital Status</td>
<td width="57%">
<select name="emp_status" class="field">
<option value="Single">Single</option>
<option value="Married">Married</option>
<option value="Divorced">Divorced</option>
</select>
</td>
</tr>
<tr>
<td align="left" valign="top" width="41%">Address</td>
<td width="57%">
<textarea rows="4" maxlen="200" name="address" cols="20"></textarea>
</td>
</tr>
<tr>
<td align="left" valign="top" width="41%">Mobile Number</td>
<td width="57%">
<input type="text" value="" onkeypress="return isNumberKey(event)" name="emp_mobile_no" class="field small-field">
</td>
</tr>
<tr>
<td align="left" valign="top" width="41%">Home Number</td>
<td width="57%">
<input type="text" value="" onkeypress="return isNumberKey(event)" name="emp_home_no" class="field small-field">
</td>
</tr>
<tr>
<td align="left" valign="top" width="41%">Designation</td>
<td width="57%">
<select name="emp_designation" class="field">
<option value="HR">HR</option>
<option value="PHP Developer">PHP Developer</option>
<option value="Web Designert">Web Designer</option>
<option value="SEO">SEO</option>
<option value="Project Manager">Project Manager</option>
<option value="Bidding">Bidding</option>
</select>
</td>
</tr>
<tr>
<td align="left" valign="top" width="41%">Work Email<span style="color:red">*</span></td>
<td width="57%">
<input type="text" value="" name="w_email_id" class="field small-field">
</td>
</tr>
<tr>
<td align="left" valign="top" width="41%">Private Email<span style="color:red">*</span></td>
<td width="57%">
<input type="text" value="" name="p_email_id" class="field small-field">
</td>
</tr>
<tr>
<td align="left" valign="top" width="41%">Joining Date<span style="color:red">*</span></td>
<td width="57%">
<input type="text" class="datepicker" name="join_date" class="field small-field">
</td>
</tr>
<tr>
<td colspan="2">
<p align="center">
<input type="button" class="button" value="submit" />
<input type="reset" value=" Reset All" class="button" name="B5">
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
<div id="sidebar">
<div class="box">
<div class="box-head">
<h2>Employee List</h2>
</div>
<div class="sort" id="show">
<br>
</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.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Add_employee extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->helper(array('url'));
$this->load->model('add_employee');
}
public function add_employee()
{
$this->load->view(‘add_employee');
}
public function add_employee_data()
{
//echo "hello";die;
$date = $this->input->post('join_date');
$join_date = date( 'Y-m-d', strtotime( $date ) );
$data = array('employee_id'=>$this->input->post('emp_id'),
'emp_name'=>$this->input->post('emp_name'),
'gender'=>$this->input->post('emp_gender'),
'marital_status'=>$this->input->post('emp_status'),'address'=>$this->input->post('address'),'home_phone'=>$this->input->post('emp_home_no'),
'mobile_phone'=>$this->input->post('emp_mobile_no'),
'department'=>$this->input->post('emp_designation'),
'work_email'=>$this->input->post('w_email_id'),
'private_email'=>$this->input->post('p_email_id'),
'joined_date'=>$join_date);
$row = $this->add_employee-> add_employee_data ($data);
//print_r($row);die;
echo $html = '<p>'.$row[0]->emp_name.'</p><br>';
}
}

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

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Add_employee extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->helper(array('url'));
$this->load->model('add_employee');
}
public function add_employee()
{
$this->load->view(‘add_employee');
}
public function add_employee_data()
{
//echo "hello";die;
$date = $this->input->post('join_date');
$join_date = date( 'Y-m-d', strtotime( $date ) );
$data = array('employee_id'=>$this->input->post('emp_id'),
'emp_name'=>$this->input->post('emp_name'),
'gender'=>$this->input->post('emp_gender'),
'marital_status'=>$this->input->post('emp_status'),'address'=>$this->input->post('address'),'home_phone'=>$this->input->post('emp_home_no'),
'mobile_phone'=>$this->input->post('emp_mobile_no'),
'department'=>$this->input->post('emp_designation'),
'work_email'=>$this->input->post('w_email_id'),
'private_email'=>$this->input->post('p_email_id'),
'joined_date'=>$join_date);
$row = $this->add_employee-> add_employee_data ($data);
//print_r($row);die;
echo $html = '<p>'.$row[0]->emp_name.'</p><br>';
}
}

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

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Add_employee extends CI_model {
public function __construct() {
parent::__construct();
}
public function add_employee_data($data){
$this->db->insert('employees',$data);
$id = $this->db->insert_id();
$this->db->select('*');
$this->db->from('employees');
$this->db->where('id',$id);
$result = $this->db->get()->result();
return $result;
}
}

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.

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

How to Insert and view data without refreshing page using ajax and jQuery in codeigniter Posted on 15-02-2016  Insert and view data without refreshing page using ajax and jQuery in codeigniter. 7.25/10 1021

Comment:

To comment you must be logged in members.

Files with category

 

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd