Javascript Implementing Bootstrap Modal via AJAX


Ask A Question





Login To post a 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>

For more info please click herehttps://stackoverflow.com/q/49312658



Have a question or need a custom quote?
info@smartinfocare.com