codeigniter ajax error user email check

Question

I have created a simple code ajax request for checking email availability in codeigniter framework. but, I get everytime error. and don't know how to resolve it. below is my footer js script(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]+.[a-z]{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 to check 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 field for email input:

<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 value of input. I get error on console.log

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}

anyone knows how to fix it ?

Answer 1

I'm so sorry, I have founded solution. it is because that I have used an Authentication in the constructor of User controller. I have changed form action to another controller and its done. now I get the email availability message but if its taken before I got nothing. no ajax-loading gif shown !

Answer 2

What's standing between you and a successful debug is this part:

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

From the jQuery documentation:

error
Type: Function( jqXHR jqXHR, String textStatus, String errorThrown ) A function to be called if the request fails. The function receives three arguments: The jqXHR (in jQuery 1.4.x, XMLHttpRequest) object, a string describing the type of error that occurred and an optional exception object, if one occurred. Possible values for the second argument (besides null) are "timeout", "error", "abort", and "parsererror". When an HTTP error occurs, errorThrown receives the textual portion of the HTTP status, such as "Not Found" or "Internal Server Error." As of jQuery 1.5, the error setting can accept 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're logging 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.