如何从php foreach循环中的div到模态框获取唯一值答案

【问题标题】：how to get unique values from a div in a php foreach loop to a modal box如何从php foreach循环中的div到模态框获取唯一值
【发布时间】：2018-04-28 03:44:32
【问题描述】：

我在 PHP foreach 循环中有一个 div 元素。在 div 里面我有一个按钮，它打开一个引导模式框。模式框在 php 循环之外。我想做的是，当用户单击按钮时从 div 获取 ID，然后运行查询使用该 ID 在模态框上显示信息。我不希望模态框循环多次。但找不到解决问题的方法。因为我不断在我的模态框中获取最后一个 div id

我的html代码：

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>

【问题讨论】：

您需要使用 ajax 和 javascript 在模态框上“写入”查询结果，将为此发布完整的答案，但这需要一些时间...稍等:-D跨度>
@FranciscoHahn 好的，谢谢
Here 一个更详细的方法，我发布的是我如何在应用程序中实现它，我删除了一些东西。

标签： php

【解决方案1】：

服务器端 (PHP)

假设你有一个函数来执行查询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;
}

关于结果，将在服务器端构建 html 的 div，假设您的表有三个字段 field_1, field_2, field_3（真正的原创）

//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;
}

如何使用 Jquery 和 ajax 调用它？

例如，您的信息图标将是这样的（使用 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!');
            });

});
});

希望我的回答对你有所帮助。

【讨论】：