CODEWITHSUNDEEP
phpajaxcodeigniter
Som
Som

Reputation: 61

codeigniter to load view using ajax call expect success message

How to login and show user profile in codeigniter load profile view using ajax

public function success() {
        $data = array(
            'uname' => $this->input->post('uname'),
            'upassword' => $this->input->post('upassword')
        );
        $result = $this->login_model->login_user($data);
        if ($result == TRUE) {
            // $this->load->view('user_profile');
            echo 'login';
        } else {
            $data = array(
                'error_message' => 'Invalid Username or Password');
            $this->load->view('user/login', $data);
        }
    }

How to load user profile view in script expect login success message 

         <script>
                    $('#login_form').submit(function (e)
                    {
                        e.preventDefault();
                        var uname = $('#uname').val();
                        var upassword = $('#upassword').val();
                        if (uname == "" || upassword == "")
                        {
                            $('#errmessage').show().html('All Fields are required');
                        } else {
                            $('#errmessage').html("").hide();

                            $.ajax({
                                type: "POST",
                                url: "<?= base_url();?>User_controller/success/",
                                data: {uname: uname, upassword: upassword},
                                   success: function (data) {
                                $('#successmessage').fadeIn().html(data);
                                setTimeout(function () {
                                    $('#successmessage').fadeOut("slow");
                                }, 2000);
                            }
                            });
                        }
                    })
                </script>

Upvotes: 1

Views: 4423

Answers (4)

shivansh
shivansh

Reputation: 530

You can try this code

PHP:- return a json response with redirect url to ajax request.

public function success() {
    $data = array(
        'uname' => $this->input->post('uname'),
        'upassword' => $this->input->post('upassword')
    );
    $result = $this->login_model->login_user($data);
    if ($result == TRUE) {
        exit(json_encode(array(
            'loginStatus' => true,
            'redirectUrl' => '/user-profile', // or else where you want to redirect
            'errorMsg' => ''
        )));
    } else {
        exit(json_encode(array(
            'loginStatus' => false,
            'redirectUrl' => false,
            'errorMsg' => 'Invalid username or Password'
        )));
    }
}

Js:- use the json data to show error message or rediect to User Profile page.

$('#login_form').submit(function (e) {
    e.preventDefault();
    var uname = $('#uname').val();
    var upassword = $('#upassword').val();
    if (uname == "" || upassword == "") {
        $('#errmessage').show().html('All Fields are required');
    } else {
        $('#errmessage').html("").hide();
        $.ajax({
            type: "POST",
            url: "<?= base_url(); ?>User_controller/success/",
            data: {uname: uname, upassword: upassword},
            success: function (data) {
                data = $.parseJSON(data); // parse text to json object
                if (data.loginStatus) { // check if loginStatus is true
                    window.location.href = data.redirectUrl
                } else { // else show the error message
                    $('#successmessage').fadeIn().html(data.errorMsg);
                    setTimeout(function () {
                        $('#successmessage').fadeOut("slow");
                    }, 2000);
                }
            }
        });
    }
});

Upvotes: 2

Som
Som

Reputation: 61

working code

    $('#login_form').submit(function (e)
    {
        e.preventDefault();
        var uname = $('#uname').val();
        var upassword = $('#upassword').val();
        if (uname == "" || upassword == "")
        {
            $('#errmessage').show().html('All Fields are required');
        } else {
            $('#errmessage').html("").hide();
            $.ajax({
                type: "POST",
                url: "<?= base_url(); ?>User_controller/success/",
                data: {uname: uname, upassword: upassword},
                success: function (data) {
                    $('#successmessage').fadeIn().html(data),
                    window.location.replace("<?php echo base_url(); ?>/User_controller/profile");
                }
            });
        }
    });

Upvotes: 0

Rosiliza Rioja
Rosiliza Rioja

Reputation: 24

You can try this one:

  1. in your ajax script, set your datatype to script. you don't need to use success function here.

    $.ajax({
  type: "POST",
  url: "<?= base_url();?>User_controller/success/",
  data: {uname: uname, upassword: upassword},
  datatype: 'script'
);

  2. in your method, use a flashdata for success message. then use redirect function to load a profile page.

    public function success() {
    $data = array(
       'uname' => $this->input->post('uname'),
       'upassword' => $this->input->post('upassword')
    );

    $result = $this->login_model->login_user($data);
    if ($result == TRUE) {
      $this->session->set_flashdata('success', 'Success Login');
      // you should have a route here that loads the profile page
      redirect('user/profile');
   } else {
        $this->session->set_flashdata('error', 'Invalid Username or Password');
        // you should have a route here that loads the login page
        redirect('login');
   }

    }

  3. in your login and profile page, add a div that will catch your flashdata, then you can add your setTimeout here.

<div class="success"><?php $this->session->flashdata('success'); ?> </div> <div class="error"><?php $this->session->flashdata('error'); ?> </div>

Upvotes: -1

JiteshNK
JiteshNK

Reputation: 428

Here what I understand on success you want to load view.

So when your ajax is called to a particular controller function, in return you have echo the view and in $this->load->view('page_view',$data,TRUE) pass true as the parameter.

Now in same page from where you are calling ajax have div element and replace the ajax success content.

This will load your view in that div.

As per your code, change to this below

if ($result == TRUE) {       
    echo $this->load->view('user_profile',TRUE);        
} else {
    $data = array(
    'error_message' => 'Invalid Username or Password');
    $this->load->view('user/login', $data);
}

Upvotes: 0

Related Questions