display data dynamically in bootstrap modal in laravel

Question

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>

**Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/5741187) — Dharman, Dec 26 '20 at 00:40
@KUMAR I don't even know what that means I got the code from tutorial then tweaked it a little bit to my data. but I saw a different tutorial but and the modal worked but now I have a search function but im stuck at displaying the search results :( — Fathi Omer, Dec 27 '20 at 09:29
@Dharman I am plain in PHP I did not understand what you saying but it's OJT project for college and it will be hosted locally so I guess it's alright (i just want to graduate lol). but thank you for the info I will look into it for future advanced projects — Fathi Omer, Dec 27 '20 at 09:35

score 0 · Answer 1 · answered Dec 25 '20 at 00:23

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>

answered Dec 25 '20 at 00:23

anas omush

322
1
7

I tried it the window still does not show – Fathi Omer Dec 25 '20 at 00:46
try check console and network if you have any error – anas omush Dec 25 '20 at 00:48
I got it now I had to watch a tutorial and redo all the codes but now I'm stuck at searching data in the table thank you for your help @anas – Fathi Omer Dec 27 '20 at 09:38

score 0 · Answer 2 · answered Dec 25 '20 at 02:27

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.

answered Dec 25 '20 at 02:27

solution

24
4

I might have done it without even knowing lol I'm new to laravel and following tutorials to finish OJT project :( – Fathi Omer Dec 27 '20 at 09:43

display data dynamically in bootstrap modal in laravel

2 Answers2