如何使 Javascript 按钮 onclick() 调用使用 Ajax 请求打开引导模式的函数？

Question

我正在尝试制作一个 bootstrap 4 模式，当在动态创建的元素内按下按钮时打开该模式，该元素向预先填充了相关 ID 中的数据的表单发出 Ajax 请求，然后是一个按钮以保存更新信息到数据库中。

目前，编辑按钮会打开一个新页面“editData”，其中包含与传递的 id 关联的预填充数据，然后可用于在按下按钮时更新信息，然后返回上一页。

有哪些方法可以让按钮在当前页面打开一个可以提供相同功能的模态？

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;

    }
  })
}

这是动态填充表格的 getData

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

这里是editData.handler的内容

<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>

Answer 1

这是一个简单的引导模式。

<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>

现在 JavaScript 部分用于发出 ajax 请求并将数据嵌入到模式中。

function populateData(dataInput) {
  var row = $('<tr id=' + dataInput.id + '/>');
  $('#table').append(row);
  row.append($('<td>' + dataInput.name + '</td>'));
  row.append($('<td>' + dataInput.description + '</td>'));

  //check that I have added attributes data-toggle and data-target to point example modal
  row.append($(
    '<td><input type="submit" data-toggle="modal" data-target="#exampleModal" 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];

      //commented following line and adding code to embed data into modal  
      //window.location = '/editData?id=' + dataInput.id;
      $('.modal-body').html('html that you want to show');
    }
  })
}

它有效，这是一个demo on Codepen。

请确保您已包含 bootstrap 和 jquery。