Question

在花了相当多的时间研究和调试问题之后，我终于明白了自己的想法。结束，并希望得到一些帮助：

问题： Modal不会在其INPUT字段中显示插入变量。

背景信息 我从一个逐行显示的MySQL表中提取记录，其中包含＆＃34; EDIT＆＃34;按钮放在每行的最后一列。 EDIT按钮应该启动一个填充了每个INPUT字段中记录数据的模态，允许用户编辑记录。

到目前为止我尝试过的事情：

通过查看源中打印的内容来检查生成的变量是否为空。所有变量都是正确生成的，并且确实打印了值。
我从官方文档中复制了#MyModal JS和<div>，但无法使其工作（Link）
从网络上另一个为另一个用户工作的线程复制了#EDIT模式
包含来自Google和MaxCDN的引用，而不是我自己的JS Bootstrap / jQuery / CSS本地副本
试图在我的XAMPP服务器上运行代码但没有成功，显示出一些症状
在IE / Chrome / Firefox / Safari（MAC）中打开了网站，所有结果都相同
运行JS Fiddle成功移交变量，这让我觉得可能存在我不知道的服务器问题/配置要求（LINK）

代码：

<html>
<head>
    <!-- include jQuery 3.1.0 + jQuery CSS + min JavaScript -->

    <!-- latest jQuery 3.1.0 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


    <!-- JavaScript for Modal, #MyModal is straight from the documentation, #edit is a solution I got off the web -->
    <script>
    $('#edit').on('show.bs.modal', function(e) {
        var dataID = $(e.relatedTarget).data('id');
        $(e.currentTarget).find('input[name="dataID"]').val(dataID);
        var dataDate = $(e.relatedTarget).data('date');
        $(e.currentTarget).find('input[name="dataDate"]').val(dataDate);
    });

    $('#myModal').on('show.bs.modal', function(e) {
        var dataID = $(e.relatedTarget).data('id');
        $(e.currentTarget).find('input[name="dataID"]').val(dataID);
        var dataDate = $(e.relatedTarget).data('date');
        $(e.currentTarget).find('input[name="dataDate"]').val(dataDate);
        var dataTime = $(e.relatedTarget).data('time');
        $(e.currentTarget).find('input[name="dataTime"]').val(dataTime);
        var dataStaff = $(e.relatedTarget).data('staff');
        $(e.currentTarget).find('input[name="dataStaff"]').val(dataStaff);
        var dataDept = $(e.relatedTarget).data('dept');
        $(e.currentTarget).find('input[name="dataDept"]').val(dataDept);
        var dataProb = $(e.relatedTarget).data('prob');
        $(e.currentTarget).find('input[name="dataProb"]').val(dataProb);
        var dataGuest = $(e.relatedTarget).data('guest');
        $(e.currentTarget).find('input[name="dataGuest"]').val(dataGuest);
        var dataRoom = $(e.relatedTarget).data('room');
        $(e.currentTarget).find('input[name="dataRoom"]').val(dataRoom);
    });
    </script>
    <!-- End of Modal Javascript -->
</head>

<body>

    <table>
        <tr>
            <td>
                <label>Button for Modal #MYMODAL"</label>
            </td>
            <td>
                <button type="button" class="btn btn-block btn-primary btn-xs" data-toggle="modal" data-target="#myModal" data-keyboard="true" 
                data-id="1234"
                data-date="2001-01-31" 
                data-time="13:00" 
                data-staff="Some Name" 
                data-dept="Some Department" 
                data-prob="Problem" 
                data-guest="Guest Name" 
                data-room="1111" >Modal 1</button>
            </td>
        </tr>
        <tr>
            <td>
                <label>Button for Modal #EDIT"</label>
            </td>
            <td>
                <button type="button" class="btn btn-block btn-primary btn-xs" data-toggle="modal" data-target="#edit" data-keyboard="true" 
                data-id="1234"
                data-date="2001-01-31">Modal 2</button>
            </td>
        </tr>
    </table>

    <!-- Modal MYMODAL -->
    <div class="modal modal-primary modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Edit Record</h4>
          </div>
          <div class="modal-body">
            <table class="table">
                <tr>
                    <td>ID No.: </td>
                    <td>
                      <input type="text" id="dataID" name="dataID" value="" disabled />
                    </td>
                </tr>
                <tr>
                    <td>Date: </td>
                    <td>
                      <input type="date" id="dataDate" name="dataDate" value="" />
                    </td>
                </tr>
                <tr>
                    <td>Time: </td>
                    <td>
                      <input type="time" id="dataTime" name="dataTime" value="" />
                    </td>
                </tr>
                <tr>
                    <td>Staff: </td>
                    <td>
                      <input type="text" name="dataStaff" value="" />
                    </td>
                </tr>
                <tr>
                    <td>Department: </td>
                    <td>
                      <input type="text" name="dataDept" value="" />
                    </td>
                </tr>
                <tr>
                    <td>Problem: </td>
                    <td>
                      <input type="text" name="dataProb" value="" />
                    </td>
                </tr>
                <tr>
                    <td>Guest: </td>
                    <td>
                      <input type="text" name="dataGuest" value="" />
                    </td>
                </tr>
                <tr>
                    <td>Room No.: </td>
                    <td>
                      <input type="text" name="dataRoom" value="" />
                    </td>
                </tr>
            </table>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary">Save changes</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
    <!-- /.Modal MYMODAL -->

    <!-- Modal EDIT-->
    <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Edit Details</h4>
          </div>
          <div class="modal-body">
            <table class="table">
                <tr>
                    <td>ID No.: </td>
                    <td>
                      <input type="text" id="dataID" name="dataID" value="" disabled />
                    </td>
                </tr>
                <tr>
                    <td>Date: </td>
                    <td>
                      <input type="date" id="dataDate" name="dataDate" value="" />
                    </td>
                </tr>
            </table>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
    <!-- /.Modal EDIT -->

</body>

</html>

Answer 1

您的脚本需要位于html之后的底部。我相信当你的脚本执行时，html还不存在。

JS Modal不在输入字段中显示变量 - 服务器配置要求？

1 个答案: