Javascript通过AJAX实现Bootstrap Modal答案

【问题标题】：Javascript Implementing Bootstrap Modal via AJAXJavascript通过AJAX实现Bootstrap Modal
【发布时间】：2018-08-25 01:02:44
【问题描述】：

当前计划概念：

页面使用传递的 dataInput id 进行填充，然后创建一个表，其中包含一个按钮 input type=submit，当使用带有 dataInput id 的 onclick() 按下该按钮时，该按钮会调用函数 edit()。
edit() 函数随后使用 dataInput id 值对 /getData 进行 ajax 调用。
getData/ 在查询调用后返回结果。
然后在/editData页面中动态创建并填充表单。

期望的输出：

页面使用传递的 dataInput id 进行填充，然后创建一个表，其中包含一个按钮 input type=submit，当使用带有 dataInput id 的 onclick() 按下该按钮时，该按钮会调用函数 edit()。
edit() 函数随后会进行 ajax 调用，以在屏幕上使用带有 dataInput id 值的/getData 创建 bootstrap 4 模式。
getData/ 在查询调用后返回结果。
然后，模式中的表单会动态创建，并使用检索到的数据填充到当前页面中。

这是我目前的功能：

function populateData(dataInput) {
  var row = $('<tr id=' + dataInput.id + '/>');
  $('#table').append(row);
  row.append($('<td>' + dataInput.name + '</td>'));
  row.append($('<td>' + dataInput.description + '</td>'));
  row.append($(
    '<td><input type="submit" class="btn btn-warning" value="edit" onclick="edit(' +
    dataInput.id + ')"/>'));
}

function edit(id) {
  $.ajax({
    type: 'GET',
    url: '/getData?id=' + id,
    success: function(data) {
      var dataInput = JSON.parse(data)[0];
      window.location = '/editData?id=' + dataInput.id;

    }
  })
}

app.get('/getData', function(req, res) {
  var content = {};
  mysql.pool.query('SELECT * FROM dataTable WHERE id=?', [req.query.id],
    function(err, rows, fields) {
      if (err) {
        next(err);
        return;
      }
      content.results = JSON.stringify(rows);
      res.send(content.results);
    });
});

带有 html 表单布局的处理程序：

<div>
  <form id="form">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" placeholder="">

    <label for="description">Description:</label>
    <textarea id="description" name="description" rows="4" cols="50"></textarea>
  </form>
  <div class="centerButton">
    <input id="submit" class="btn btn-primary" type="submit" value="Save" onclick="save()" />
  </div>
</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">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

那么您收到的问题或错误信息到底是什么？
没有错误信息，如上问题所述，想知道上面的“Desired Output”如何实现。

标签： javascript jquery html ajax bootstrap-4

【解决方案1】：

我也遇到过类似的问题，研究了很多之后，我终于构建了一个js函数，可以根据我的需求动态创建模态框。使用此功能，您可以在一行中创建弹出窗口，例如：

puyModal({title:'Test Title',heading:'Heading',message:'This is sample message.'})

或者您可以使用其他复杂的功能，例如 iframe、视频弹出窗口等。您可能希望将其链接到在 ajax 请求成功后调用的编辑函数。这样，您将实时创建模态，而不必担心在 HTML 中填充数据。在https://github.com/aybhalala/puymodals 上找到它要演示，请转到http://pateladitya.com/puymodals/

【讨论】：