Question 35907 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How can i implement the Login Modal in code igniter? – Jquery

hello i’m using a stack overflow and i want to implement the login modal in my POS method so my plan here is that whenever i click the VOID button there was a login modal that will pop up to validate if the user has the authority to void a product

code under edit.php
Void Products

<div id="loginModal" class="modal fade" role="dialog">  
      <div class="modal-dialog">  
   <!-- Modal content-->  
           <div class="modal-content">  
                <div class="modal-header">  
                     <button type="button" class="close" data-dismiss="modal">&times;</button>  
                     <h4 class="modal-title">Login</h4>  
                </div>  
                <div class="modal-body">  
                     <label>Username</label>  
                     <input type="text" name="username" id="username" class="form-control" />  
                     <br />  
                     <label>Password</label>  
                     <input type="password" name="password" id="password" class="form-control" />  
                     <br />  
                     <button type="button" name="login_button" id="login_button" class="btn btn-warning">Login</button>  
                </div>  
           </div>  
      </div>  
 </div>

and yeah it’s working as i expected and here is my ajax under edit.php

$(document).ready(function() {
     $('#login_button').click(function(){  
           var username = $('#username').val();  
           var password = $('#password').val();  
           if(username != '' && password != '')  
           {  
               $.ajax({  
                     url:"action.php",  
                     method:"POST",  
                     data: {username:username, password:password},  
                     success:function(data)  
                     {  
                          //alert(data);  
                          if(data == 'No')  
                          {  
                               alert("Wrong Data");  
                          }  
                          else  
                          {  
                               $('#loginModal').hide();  
                               location.reload();  
                          }  
                     }  
               });
           }
           else {
               alert("Both fields are required");
           }
     });
});

and my problem is that i’m using a code igniter framework and i do not know how to implement this line of code into my program

action.php

 <?php  
 session_start();  
 $connect = mysqli_connect("localhost", "root", "", "bubblebee");  
 if(isset($_POST["username"]))  
 {  
      $query = "  
      SELECT * FROM admin_login  
      WHERE admin_name = '".$_POST["username"]."'  
      AND admin_password = '".$_POST["password"]."'  
      ";  
      $result = mysqli_query($connect, $query);  
      if(mysqli_num_rows($result) > 0)  
      {  
           $_SESSION['username'] = $_POST['username'];  
           echo 'Yes';  
      }  
      else  
      {  
           echo 'No';  
      }  
 }  
 if(isset($_POST["action"]))  
 {  
      unset($_SESSION["username"]);  
 }  
 ?>

when press the both required filed is working but the username and password seems like have a problem and i can’t identify what is my error here maybe i do not know how to implement it in the code igniter? can someone teach me.

my folder structure right now with that action.php is something like this

  • application
    • view
      • order
        • action.php
        • create.php
        • edit.php
        • index.php
Tags:

2

Answers


  1. 0

    code under edit.php Void Products

    <!DOCTYPE html>
    <html>
    <head>
        <title>Login</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
        <!--[if lt IE 9]>
            <script src="//oss.maxcdn.com/libs/html5shiv/r29/html5.min.js"></script>
            <script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>

        <div class="container">
            <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Login</button>

            <div class="modal fade" id="myModal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <form id="form" role="form">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                <h4 class="modal-title">Login</h4>
                            </div>
                            <div class="modal-body">
                                <div id="messages"></div>
                                YOUR FORM ELEMENTS HERE
                            Username: <input type="text" name="username">
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary">Login</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>
        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script>
            $('#form').submit(function(e) {

                var form = $(this);
                var formdata = false;
                if(window.FormData){
                    formdata = new FormData(form[0]);
                }

                var formAction = form.attr('action');

                $.ajax({
                    type        : 'POST',
                    url         : "<?php echo base_url(); ?>/controllerName/FunctionName",
                    cache       : false,
                    data        : formdata ? formdata : form.serialize(),
                    contentType : false,
                    processData : false,
                    dataType: 'json',

                    success: function(response) {
                        //TARGET THE MESSAGES DIV IN THE MODAL
                        if(response.type == 'success') {
                            $('#messages').addClass('alert alert-success').text(response.message);
                        } else {
                            $('#messages').addClass('alert alert-danger').text(response.message);
                        }
                    }
                });
                e.preventDefault();
            });
        </script>
    </body>
</html>

    Model Code:-

    function get_user($username,$password)
{
    $this->db->select('*');
    $this->db->from('user');
    $this->db->where('username',$username);
    $this->db->where('password',$password);
    $q = $this->db->get();
        if ($q->num_rows() > 0) {
            return $q->row();
        } else
            return FALSE;
}

    Controller Code:-

       public function login()
    {
        $user_email = $this->input->post('user_email', true);
        $user_pass = md5($this->input->post('user_pswd', true));
        $user_result = $this->M_login->get_user($username,$password));
        if ($user_result >0) //active user record is present
            {
           $this->session->set_userdata('user_session',$user_result);

           $this->session->set_flashdata('login_message', '<div class="alert alert-success text-center">You are Successfully Login to your account!</div>');
            
            $url = base_url('Login/billing');
            redirect($url);
            
        } else {
            $this->session->set_flashdata('err_message', '<div class="alert alert-danger text-center">Invalid email and password!</div>');
            redirect("Login/login");
        }
    }
    Login or Signup to reply.
  2. 0

    you can add form in modal

    <div id="loginModal" class="modal fade" role="dialog">  
      <div class="modal-dialog">  
   <!-- Modal content-->  
           <form method="post" accept-charset="utf-8" action="<?=url('controller/method')?>" class="email" id="myform">
           <div class="modal-content">  
                <div class="modal-header">  
                     <button type="button" class="close" data-dismiss="modal">&times;</button>  
                     <h4 class="modal-title">Login</h4>  
                </div>  
                <div class="modal-body">  
                     <label>Username</label>  
                     <input type="text" name="username" id="username" class="form-control" />  
                     <br />  
                     <label>Password</label>  
                     <input type="password" name="password" id="password" class="form-control" />  
                     <br />  
                     <button type="button" name="login_button" id="login_button" class="btn btn-warning">Login</button>  
                </div>  
           </div>  
           </form>
      </div>  
 </div>

    and create function to catch the request on controller

    ##.../controller.php

function method(){
  ## create method to 
  var_dump($this->input->post());
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search