Here is the simple script to check live username or email availability using jQuery’s Ajax method in codeigniter. you can also apply this logic/method to any other filed check.
Controller : application/controller/User.php
we are using in build codeigniter form validation library’s is_unique() function to check email/username availability so i am not created any modals here, in the blow controller you can find both server side and client side email/username validations. and one more thing i have used ci’s output class to echo output to ajax response, with and by using output class we can avoid 500 internal errors with compression enabled mode in codeigniter.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class User extends CI_Controller
{
public function __construct()
{
parent::__construct();
// load from and url helper optional (in this tutorial)
$this->load->helper(array(
'form',
'url'
));
// load database
$this->load->database();
// load form validation library
$this->load->library('form_validation');
}
public function email_check()
{
// allow only Ajax request
if($this->input->is_ajax_request()) {
// grab the email value from the post variable.
$email = $this->input->post('email');
// check in database - table name : tbl_users , Field name in the table : email
if(!$this->form_validation->is_unique($email, 'tbl_users.email')) {
// set the json object as output
$this->output->set_content_type('application/json')->set_output(json_encode(array('message' => 'The email is already taken, choose another one')));
}
}
}
}
/* End of file User.php */
/* Location: ./application/controllers/User.php */
|
View : application/views/user.php
In the view we have created a form included jQuery library and our custom jQuery to send request to server and to handle the response.We are sending Ajax request only if the given input is valid email address.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>arjunphp.com</title>
</head>
<body>
<div class=" form-group-sm">
<?php echo validation_errors(); ?>
<label>E-mail</label>
<input id="email" name="email" type="text" value="" />
<label id="message"></label>
<span id="loading"><img src="<?php echo base_url(); ?>ajax-loader.gif" alt="Ajax Indicator" /></span> </div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/// make loader hidden in start
$('#loading').hide();
$('#email').blur(function(){
var email_val = $("#email").val();
var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
if(filter.test(email_val)){
// show loader
$('#loading').show();
$.post("<?php echo site_url()?>/user/email_check", {
email: email_val
}, function(response){
$('#loading').hide();
$('#message').html('').html(response.message).show().delay(4000).fadeOut();
});
return false;
}
});
});
</script>
</body>
</html>
|
That’s it.
No comments:
Post a Comment