Javascript通过AJAX实现Bootstrap模式

Question

Current Program Concept:

1. Page populates using the passed dataInput id which then creates a table with a row that has a button input type=submit that makes a call to the function edit() when pressed using onclick() with the dataInput id.
2. the edit() function then makes an ajax call to the /getData with the dataInput id value.
3. getData/ returns after a query call and with the results.
4. Then the form is dynamically created and populated in the /editData page.

Desired Output:

1. Page populates using the passed dataInput id which then creates a table with a row that has a button input type=submit that makes a call to the function edit() when pressed using onclick() with the dataInput id.
2. the edit() function then makes an ajax call to create a bootstrap 4 modal on the screen with /getData with the dataInput id value.
3. getData/ returns after a query call and with the results.
4. Then the form in the modal is dynamically created and populated in the current page with the data retrieved.

Here are my current functions:

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

handler with the html form layout:

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

Bootstrap Modal Example:

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

Answer 1

I had a similar problem, after researching a lot, I finally built a js function to create modals dynamically based on my requirements. Using this function, you can create popups in one line such as:

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

Or you can use other complex functionality such as iframes, video popups, etc. You might want to link it up to your edit function that is being called after the ajax request is successful. This way you would be creating the Modal in real time and would not have to worry about populating data inside HTML. Find it on https://github.com/aybhalala/puymodals For demo, go to http://pateladitya.com/puymodals/