Codeigniter ajax error custom email check

Question

I created a simple ajax request to check email availability on codeigniter. but I get every error. and don’t know how to resolve it. below is my js script footer (after jquery and other external scripts).

<script> $(document).ready(function() { $("#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]+.[az]{2,4}$/; if (filter.test(email_val)) { // show loader $('#loading').show(); jQuery.ajax({ type: "POST", url: "<?php echo site_url()?>users/check_email_ajax", dataType: 'json', data: { '<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>', 'email': 'email_val' }, success: function (response) { if(response){ $('#loading').hide(); console.log(response.message); $('#msg').html(response.message) $('#msg').show().delay(10000).fadeOut(); } }, error: function(error){ $('#loading').hide(); console.log("There is some errors on server : " + error.error); } }) } }); }); 

and this is my User Controller function for checking email in db

  public function check_email_ajax(){ // 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 : users , Field name in the table : email if(!$this->form_validation->is_unique($email, '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'))); }else{ $this->output->set_content_type('application/json')->set_output(json_encode(array('message' => 'you can use this email'))); } } } 

and in the registration form I have this email input field:

 <div class="col-sm-5"> <input type="email" id="email" name="email" class="form-control"> <span id="loading"><img src="<?php echo base_url(); ?>ajax-loader.gif" alt="Ajax Indicator" /></span> <div id="msg"></div> </div> 

but now every time I change the input value.

 There is some errors on server : function (){if(c){var a=c.length;m(arguments),i?k=c.length:e&&e!==!0&&(j=a,n(e[0],e[1]))}return this} 

Does anyone know how to fix this?

Answer 1

What stands between you and successful debugging is this part:

 error: function (error) { $('#loading').hide(); console.log("There is some errors on server : " + error.error); } 

From jQuery documentation :

mistake
Type: Function (jqXHR jqXHR, String textStatus, String errorThrown) A function called if the request fails. The function receives three arguments: the jqXHR object (in jQuery 1.4.x, XMLHttpRequest), a string describing the type of error that occurred, and an optional exception object if this happened. Possible values ​​for the second argument (other than zero) are timeout, error, abort, and parsererror. When an HTTP error occurs, errorThrown receives the text part of the HTTP status, for example, "Not Found" or "Internal Server Error". Starting with jQuery 1.5, the error parameter can take an array of functions. Each function will be called in turn. Note. This handler is not called for cross-domain script and cross-domain JSONP requests. This is an Ajax event.

What you register with console.log is the jqXHR parameter. This should work:

 error: function (jqXHR, errorType, error) { $('#loading').hide(); console.log(errorType + ": " + error); } 

Once you get the actual error message, you can get to the root of the problem.

Answer 2

I have done this exercise before. Here is my Ajax script that I used. I took a different approach for you to access your email. I did not put the controller code because it seems more subtle for your controller.

 $(document).ready(function() { //Your Email on key press $("#email").keyup(function() { var email = $(this).val(); if (email.length > 3) { $.ajax({ type: 'POST', url: emailAvailability_url, data: { email: email }, success: function(data) { // Your Ajax Resonse Here } error: function (jqXHR, errorType, error) { $('#loading').hide(); console.log(errorType + ": " + error); } }); } }); }); 

This is the controller code I used:

 public function check_email_availability(){ $data = $this->input->post(); $this->form_validation->set_error_delimiters('<span class="error">', '</div>'); if (($this->form_validation->run('email_verification') == FALSE)){ echo form_error('email'); } else { unset($_POST); echo '<span style="color:green;" id="emailIsValid">Available</span>'; } } 

I added a check inside the config.

 'email_verification' => array( array( 'field' => 'email', 'label' => 'Email', 'rules' => 'required|max_length[50]|valid_email|is_unique[table_name.email]', 'errors' => array( 'required' => 'Email is required.', 'valid_email' => 'Plese Enter Valid Email', 'is_unique' => 'That Email is already taken. Try Again With New Email.' ) ) ) 

intention to answer just try to help. Therefore, if you want to stick to your method, this is your choice. Thanks

Answer 3

I'm sorry, I based the solution. this is because I used authentication in the User controller constructor. I changed the action of the form to another controller and executed it. now I get an availability message by email, but if it was done before I received nothing. ajax-load gif not showing!