CODEWITHSUNDEEP
php
sach jot
sach jot

Reputation: 570

how to get unique values from a div in a php foreach loop to a modal box

I have a div element in a PHP foreach loop. Inside the div I have a button which opens up a bootstrap modal box.The modal box is outside the php loop.What I am trying to do is that, get the ID from the div when the user click the button and then run a query using that ID to display the information on the modal box. I don't want the modal box to loop several times.But can't find a way through problem. As I am keep getting the last div id in my modal box

My html code: 

foreach($query as $data){
   $id = $data['ID'];
   $Access = $data['Access'];
    if(strlen($Access) > 3){
      echo'
           <div class="box" >
           <input type="hidden" value='.$id.' class="ID" >
           <textarea class="Access">'.$Access.'</textarea>
           <i class="fas fa-info-circle"  data-id ='.$id.' data-toggle="modal" data-target="#exampleModal"></i>
 </div>';

}

 <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
 <div class="modal-dialog" role="document">
   <div class="modal-content">
   <div class="modal-header">
         <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
      <button type="button" class="close" data-dismiss="modal" aria label="Close">
      </button>
  </div>
 <div class="modal-body">
  <div><?php echo $id; ?></div>    //printing the div id
 </div>
 <div class="modal-footer">
 <button type="button" data-dismiss="modal">Close</button>
     <button type="button">Save changes</button>
   </div>
      </div>
     </div>

Upvotes: 1

Views: 229

Answers (1)

Francisco Hahn
Francisco Hahn

Reputation: 435

Server side (PHP)

Let's say you have a function to execute the query WHERE id = $id

public function query($id){
     //some code to execute the query and getting the result array
     //i can provide you an example, but i guess u have that figured out
     return $result;
}

About the result, gonna build the html fot the div on the server side, lets assume your table has three field field_1, field_2, field_3 (really original)

//The name describes what the function does
public function imCallingThisFunctionViaAjaxToGetMyDataInTheModal(){
     $theresult = query($_POST['id']);
     //of course validate if empty or whatever
     $html = "";
     //lets create a simple table
     $html.="<table class="table table-bordered">"; //bootstrap classes
     $html.="<thead><th>field_1</th><th>field_2</th><th>field_2</th></thead><tbody>";
     foreach($theresult as $item){
           $html.="<tr>";
           $html.="<td>".$item['field1']."</td>";
           //same with field_2, and field_3
           $html.="</tr>";
     }
     $html.="</tbody></table>";
     echo $html;
}

How to call it using Jquery and ajax?

for the example, your info icon will be like this (using the id)

<i class="fas fa-info-circle" id="get-my-data-icon" data-id ='.$id.' data-toggle="modal" data-target="#exampleModal"></i>

$(document).ready(function () {
$(document).on('click', '#get-my-data-icon', function (e) {
    e.preventDefault();
    var uid = $(this).data('id'); //here your get the id
    $('.modal-body').html('');    //empty the html of the modal body
    $.ajax({
        url: "../imCallingThisFunctionViaAjaxToGetMyDataInTheModal",
        type: 'POST',
        data: {id: uid}
    })
            .done(function (data) {
                console.log(data); //if u want...
                $('.modal-body').html("<div>"+data+"</div>"); 
                //print the result in the modal-body 
            })
            .fail(function () {
                //in case it fails
                $('.modal-body').html('<i class="fa fa-warning"></i> Try again!');
            });

});
});

Hope my answer helps you.

Upvotes: 1

Related Questions