CodeIgniter Ajax is not working

Question

CodeIgniter Ajax is not working for me.

This is what I have tried so far.

v_login.php

         <script type="application/javascript">
    $(document).ready(function() {
      $('#submit').click(function() {
        var form_data = {
        username : $('#username').val(),
        password : $('#password').val(),
        ajax : '1'
      };
      $.ajax({
        url: "<?php echo site_url('c_login/ajax_check'); ?>",
        type: 'POST',
        async : false,
        data: form_data,
        success: function(msg) {
          $('#message').html(msg);
        }
      });
        return false;
      });
    });
  </script>

  <div class="container">
     <div class="jumbotron">

     <?php 
     $attributes = array('class' => 'form-signin');
     echo form_open('c_login', $attributes); ?>
        <h2 class="form-signin-heading">VMS Login System</h2>
          <input type="username" name="username" id="username" class="form-control" placeholder="Username" required autofocus>
          <input type="password" name="password" class="form-control" placeholder="Password" required>
          <input class="btn btn-primary" type="submit" id="submit" value="Login">
          <input class="btn btn-primary" type="reset" value="Cancel">
       <?php echo form_close(); ?>
        <div id="message">
        </div>

     </div>
  </div> 

C_login.php

  <?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

    class C_login extends CI_Controller {

        function __construct() {

            parent::__construct();

            $this->load->library('form_validation');
            $this->load->helper('url');

        }
        function index() {
            $this->load->view('include/header');
            $this->load->view('v_login');
            $this->load->view('include/footer');
        }

        function ajax_check() {
            if($this->input->post('ajax') == '1') {
                $this->form_validation->set_rules('username', 'username', 'trim|required|xss_clean');
                $this->form_validation->set_rules('password', 'password', 'trim|required|xss_clean');
                $this->form_validation->set_message('required', 'Please fill in the fields');
            if($this->form_validation->run() == FALSE) {
                echo validation_errors();
            } else {
                $this->load->model('m_access');
                $user = $this->m_access->check_user($this->input->post('username'),$this->input->post('password'));
            if($user == '1') {
                echo 'login successful';
            } else {
                echo 'unknown user';
            }
            }
            }
        }
    }
    /* End of file c_login.php */
    /* Location: ./application/controllers/c_login.php */

m_access.php

   <?
    class M_access extends CI_Model {
        public function check_user($username,$password) {
            $this->query = $this->db->select('COUNT(*)')->from('users')->where(array('username'=>$username,'password'=>$password))->limit(1)->get();
            return $this->query->row_array();
        }
    }

I don't know what's wrong, I have already set up config.php and routes. But it's not working at all. Any ideas? Help is much appreciated. Thanks.

Answer 1

After a long chat with OP the solution is this

Your model

class M_access extends CI_Model {
    public function check_user($username,$password) {
        $args = array(
            'username' => $username,
            'password' => $password
        );
        $query = $this->db->select('*')->from('users')->where($args)->get();
        if($query->num_rows()) {
            return $query->row_array();
        }
        return false;
    }
}

In your controller, use

$this->load->model('m_access');
$user = $this->m_access->check_user($this->input->post('username'), $this->input->post('password'));
if($user) {
    // right user
}
else {
    // wrong user
}

Don't need to send ajax:1 because jQuery sends a request header to server, like this

X-Requested-With': 'XMLHttpRequest'

and in CodeIgniter you may check for ajax request using

if($this->input->is_ajax_request()){
    // it's an ajax request
}

Also, you asked for a gif loader to shw, so this could be used as

$('#submit').click(function() {
    var form_data = { ...};
    // show the gif loader
    $.ajax({
        ...
        data: form_data,
        success: function(msg) {
          // hide the gif loeader
          $('#message').html(msg);
        }
    });
});

Update : For inserting an image you may check this fiddle example, like

$('#submit').click(function(e){
    e.preventDefault();
    var loader = $('<img/>', {
        'src':'url_of_the_image',
        'id':'ajax_loader'
    });
    loader.insertAfter($(this));
});

and to remove the image in your success callback, you may use

$('#ajax_loader').remove();

Answer 2

error 404 due to the calling path because file name with "C" and you calling it with "c", rather than that in my opinion you need to have a deeper look at codeigniter form validation helper before you try the ajax call

once you did it server side perfectly & if you still want to validate using ajax , make another function as a webservice only for this purpose along the orignal server side validation function , it'd be something like that

     function ajax_check(){
     $username_check=true;
     //your code goes here to check if username unique or not and result assigned to $username_check 
     if(!$username_check){
       echo json_encode('fail');
       return;
       }
     echo json_encode('success');
     }