CODEWITHSUNDEEP
javascriptajaxbootstrap-modal
Quraisah
Quraisah

Reputation: 23

Bootstrap modal does not showing information

I have entered an internship for 6 month and I'm currently developing a web system using Bootstrap modal. I am experiencing an issue where my modal view is failing to show any information. There are no errors in the scripting but I do not know how to fix it. Its just blank. Any suggestion?

This is modal view for staff detail which is showing no information:

enter image description here

Below is the code from the two of files that are being used to show the modal view.

index.html

<?php  
//index.php
$connect = mysqli_connect("localhost", "root", "", "testing");
$query = "SELECT * FROM tbl_user ORDER BY user_id DESC";
$result = mysqli_query($connect, $query);
 ?>  
<!DOCTYPE html>  
<html>  
 <head>  
  <title>ADD NEW USER</title>  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  
 </head>  
 <body>  
  <br /><br />  
  <div class="container" style="width:700px;">  
   <h3 align="center">Admin Log Site </h3>  
   <br />  
   <div class="table-responsive">
    <div align="right">
     <button type="button" name="age" id="age" data-toggle="modal" data-target="#add_data_Modal" class="btn btn-warning">Add New User</button>
    </div>
    <br />
    <div id="employee_table">
     <table class="table table-bordered">
      <tr>
       <th width="70%">Staff Name</th>  
       <th width="30%">View</th>
      </tr>
      <?php
      while($row = mysqli_fetch_array($result))
      {
      ?>
      <tr>
       <td><?php echo $row["uname"]; ?></td>
       <td><input type="button" name="view" value="view" id="<?php echo $row["user_id"]; ?>" class="btn btn-info btn-xs view_data" /></td>
      </tr>
      <?php
      }
      ?>
     </table>
    </div>
   </div>  
  </div>
 </body>  
</html>  

<!-- modal insert division -->

<div id="add_data_Modal" class="modal fade">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">ADMIN SITE</h4>
   </div>
   <div class="modal-body">
    <form method="post" id="insert_form">
     <label>Enter Staff Username</label>
     <input type="text" name="uname" id="uname" class="form-control" />
     <br />
     <label>Enter Staff ID</label>
     <input type="text" name="staff_number" id="staff_number" class="form-control"  />
     <br />
     <label>Staff Roles</label>
     <select name="staff_role" id="staff_role" class="form-control">
      <option value="Administration">Administration</option>  
      <option value="Project Manager">Project Manager</option>
      <option value="Staff">Staff</option>
     </select>
     <br />  
     <label>Password</label>
     <input type="text" name="password" id="password" class="form-control" />
     <br />  

     <input type="submit" name="insert" id="insert" value="Add user" class="btn btn-success" />

    </form>
   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
   </div>
  </div>
 </div>
</div>

<!-- modal view employer -->

<div id="dataModal" class="modal fade">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Staff Details</h4>
   </div>
   <div class="modal-body" id="employee_detail">

   </div>
   <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
   </div>
  </div>
 </div>
</div>

<script>  
$(document).ready(function(){
 $('#insert_form').on("submit", function(event){  
  event.preventDefault();  
  if($('#uname').val() == "")  
  {  
   alert("Name is required");  
  }  
  else if($('#staff_number').val() == "")  
  {  
   alert("Staff id is required");  
  }  
  else if($('#staff_role').val() == "")
  {  
   alert("Staff role is required");  
  }
  else if($('#password').val() == "")
  {  
   alert("password is required");  
  }


  else  
  {  
   $.ajax({  
    url:"insertdata.php",  
    method:"POST",  
    data:$('#insert_form').serialize(),  
    beforeSend:function(){  
     $('#insert').val("Inserting");  
    },  
    success:function(data){  
     $('#insert_form')[0].reset();  
     $('#add_data_Modal').modal('hide');  
     $('#employee_table').html(data);  
    }  
   });  
  }  
 });




 $(document).on('click', '.view_data', function(){
  //$('#dataModal').modal();
  var user_id = $(this).attr("user_id");
  $.ajax({
   url:"view.php",
   method:"POST",
   data:{user_id:user_id},
   success:function(data){
    $('#employee_detail').html(data);
    $('#dataModal').modal('show');
   }
  });
 });
});  
 </script>

For the view inforamtion as follow.

view.php

    <?php  
//select.php  
if(isset($_POST["user_id"]))
{
 $output = '';
 $connect = mysqli_connect("localhost", "root", "", "testing");
 $query = "SELECT * FROM tbl_user WHERE user_id = '".$_POST["user_id"]."'";
  //$query = "SELECT * FROM tbl_user WHERE user_id = '".$_POST["id"]."'";
 $result = mysqli_query($connect, $query);
 $output .= '  
      <div class="table-responsive">  
           <table class="table table-bordered">';
    while($row = mysqli_fetch_array($result))
    {
     $output .= '
     <tr>  
            <td width="30%"><label> Staff Name</label></td>  
            <td width="70%">'.$row["uname"].'</td>  
        </tr>
        <tr>  
            <td width="30%"><label>Staff Id</label></td>  
            <td width="70%">'.$row["staff_number"].'</td>  
        </tr>
        <tr>  
            <td width="30%"><label>Staff Role</label></td>  
            <td width="70%">'.$row["staff_role"].'</td>  
        </tr>
        <tr>  
            <td width="30%"><label>password</label></td>  
            <td width="70%">'.$row["password"].'</td>  
        </tr>

     ';
    }
    $output .= '</table></div>';
    echo $output;
}
?>

Upvotes: 1

Views: 524

Answers (1)

Alexander Higgins
Alexander Higgins

Reputation: 6923

Your problem is that your $.ajax POST is sending JSON data but your PHP view is looking for items in $_POST.

To set $_POST values try this:

$.ajax({
  url: "view.php",
  method: "POST",
  data: "user_id="+user_id,
  success: function(data) {
    $('#employee_detail').html(data);
    $('#dataModal').modal('show');
  }
});

Note: Typically your input elements would be inside of a <form> tag. When they are you can use $('#formid').serialize() to convert your input elements into a string that you can pass to the ajax call as the data variable.

For example:

<form id="getUserDetails">
    <label for="user_id">A bar</label>
    <input id="user_id" name="user_id" type="text" value="" />
    <input type="submit" value="Send" onclick="PostThis();return false;
 />
</form>

var data = $('#getUserDetails').serialize();
$.ajax({
    url: "test.php",
    type: "post",
    data: data ,
    success: function (response) {
       $('#employee_detail').html(response);
        $('#dataModal').modal('show');              

    },
    error: function(jqXHR, textStatus, errorThrown) {
       console.log(textStatus, errorThrown);
    }


});

Upvotes: 1

Related Questions