Question posted in
You can find the official documentation here.

display data dynamically in bootstrap modal in laravel – Jquery ajax

I was watching tutorial on how to display MySQL data in dynamic window then I realized its not for laravel i hope there is a why to use it on laravel.

jQuery / AJAX :

<script>  
 $(document).ready(function(){  
      $('.view_data').click(function(){  
        var student_id = $($this).attr("id");
        $.ajax({
          url:select.php,
          method:"post",
          data:{student_id:student_id},
          success:function(data){
            $('student_detail').html(data);
            $('#dataModal').modal("show");  
          }
        });
        
      });  
 });  
 </script>

the window shows up when the script has only this line: $('#dataModal').modal("show"); so script works when its like this but does not show any data.

<script>  
 $(document).ready(function(){  
      $('.view_data').click(function(){  
        var student_id = $($this).attr("id");
        $('#dataModal').modal("show");  

        });         
 });  
 </script>

url:select.php

<?php  
 if(isset($_POST["student_id"]))  
 {  
      $output = '';  
      $connect = mysqli_connect("localhost", "root", "", "sms");  
      $query = "SELECT * FROM students WHERE id = '".$_POST["student_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>first name</label></td>  
                     <td width="70%">'.$row["firstName"].'</td>  
                </tr>  
                
                ';  
      }  
      $output .= "</table></div>";  
      echo $output;  
 }  
 ?>

I have more data columns but im using firstName for now

and this is the window model that shows up :-

<div id="dataModal" class="modal fade">  
      <div class="modal-dialog">  
           <div class="modal-content">  
                <div class="modal-header">  
                     
                     <h4 class="modal-title">Employee Details</h4>  
                </div>  
                <div class="modal-body" id="student_detail">  
                </div>  
                <div class="modal-footer">  
                     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>  
                </div>  
           </div>  
      </div>  
 </div>
Tags:

2

Answers


  1. 0

    Try this

    
<script>  
 $(document).ready(function(){  
      $('.view_data').click(function(){  
        var student_id = $(this).attr("id");// also here $this will be not defined
        $.ajax({
          url:select.php,
          method:"post",
          data:{student_id:student_id},
          success:function(data){
            $('#student_detail').html(data);//selector are not valid you are missing to add # at the beginning 
            $('#dataModal').modal("show");  
          }
        });
        
      });  
 });  
 </script>
    Login or Signup to reply.
  2. 0

    You should do a test first, check (I don’t know if you did this already or not) if the PHP script actually returns some data. You can do an ajax call and display the response in the console.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search