Question

我有表名，当我点击名字时我需要打开模态并输入我点击的名称。我怎么能这样做？提前致谢

report.php

按钮：

<a href='#ReportModal' data-id='1' data-toggle='modal'>Open</a></td>

模态：

<div id="ReportModal" class="modal" role="dialog" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">asd</h4>
      </div>
      <div class="modal-body">
        //HOW TO PRINT HERE?
      </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() {
    $(document).on("click",".get-data"function(){
       var val = $(this).attr("data-id");    
       $.ajax({
            url: "../dist/scripts/report.userinfo.php",
            type: "POST",
            dataType: "HTML",
            async: false,
            success: function(data) {
               $('.modal-body').html(data);          
           }
         }); 

     });
});
</script>

report.userinfo.php

<?php
         include($_SERVER['DOCUMENT_ROOT']."/dist/config.php");
         $id = $_POST['id'];
         $query =  $db->query ("select Name from _reports where ID = '$id' ") or die($db->error());
         $rows= $query->fetch_array();
         echo $rows['Name'];
    ?>

Answer 1

你几乎就在那里，现在只需要执行分配给类get-data的元素的代码 - 为了实现这一点，你可以将类添加到你的锚中。

$(document).ready(function() {

  $("#ReportModal").dialog();

  $(document).on("click", ".get-data", function() {

    var val = $(this).attr("data-id");

    // for the sake of testing we assume your AJAX call works
    // and then you can remove the following line and handle it
    // in the success handler as shown in the comment below
    $('.modal-body').html("You clicked: " + val);

    /*
    $.ajax({
      url: "../dist/scripts/report.userinfo.php",
      type: "POST",
      dataType: "HTML",
      async: false,
      success: function(data) {
        $('.modal-body').html(data);
      }
    });*/

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<a href='#ReportModal' data-id='1' data-toggle='modal' class="get-data">Open</a>

<div id="ReportModal" class="modal" role="dialog" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">asd</h4>
      </div>
      <div class="modal-body">
        //HOW TO PRINT HERE?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

从模态页面获取价值

1 个答案: