Codeigniter: Ajax Login Redirect issue with Ion Auth

Question

I am trying to use Ion Auth framework with my CodeIgniter application.
When user clicks a link request goes to Controller method and checks if user is logged in or not. If not then redirects to auth\login method. But I get html of the login page in my success(msg):alert(msg);
Ajax Request

$('img').click(function() {
            $.ajax({
              url: "<?php echo site_url('gallery/openProductDetail');?>",
              type: 'POST',
              success: function(msg) {
                alert(msg);
              }
             });     
      });

Controller

function openProductDetail()
    {
        if (!$this->ion_auth->logged_in())
        {
            redirect('auth/login');
        } else {

            $this->load->view('modal/productdetail');
        }
    }

Login Page It is login.pho from original Ion Auth

<h1><?php echo lang('login_heading');?></h1>
<p><?php echo lang('login_subheading');?></p>

<div id="infoMessage"><?php echo $message;?></div>

<?php echo form_open("auth/login");?>

  <p>
    <?php echo lang('login_identity_label', 'identity');?>
    <?php echo form_input($identity);?>
  </p>

  <p>
    <?php echo lang('login_password_label', 'password');?>
    <?php echo form_input($password);?>
  </p>

  <p>
    <?php echo lang('login_remember_label', 'remember');?>
    <?php echo form_checkbox('remember', '1', FALSE, 'id="remember"');?>
  </p>


  <p><?php echo form_submit('submit', lang('login_submit_btn'));?></p>

<?php echo form_close();?>

<p><a href="forgot_password"><?php echo lang('login_forgot_password');?></a></p>

Answer 1

$ret; // declare a variable to return.
if (!$this->ion_auth->logged_in()){
    if($this->input->is_ajax_request()){
        /* This is an AJAX request, send the url back to be redirected to. */
        $ret['url'] = site_url().'auth/login';
        $ret['html'] = FALSE;
    }else{
        /* This is not ajax, it is a standard form submission, let codeigniter handle it*/
        redirect('auth/login');
    }
} else {
    if($this->input->is_ajax_request()){
        $ret['url'] = FALSE; //they are logged in, and this is ajax, don't redirect.
        $ret['html'] = $this->load->view('modal/productdetail', '', TRUE); //allow the HTML to be returned to the server
    }else{
        /* They are logged in, but this is not ajax, redirect them. */
        redirect('modal/productdetail');
    }
}    
echo json_encode($ret); //json_encode our $ret array, and send to browser

With the above, we're creating a variable called $ret that holds reference to some data when performing ajax requests. Otherwise, when not using ajax (no javascript), standard form redirection behavior ensues.

Now, in our success function, we're going to check for the existence of the data.url and data.html properties and act accordingly.

dataType: 'json', //add this so the success: knows how to parse returned data
success:function(data){
    if(data.url){
        window.location = data.url;
    }else if(data.html){
        $('element').html(data.html); // where "element" is an HTML element on your page you wish to override with a partial view
    }
}