Current Program Concept:
- 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 functionedit()
when pressed usingonclick()
with the dataInput id. - the
edit()
function then makes an ajax call to the/getData
with the dataInput id value. getData/
returns after a query call and with the results.- Then the form is dynamically created and populated in the
/editData
page.
Desired Output:
- 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 functionedit()
when pressed usingonclick()
with the dataInput id. - the
edit()
function then makes an ajax call to create a bootstrap 4 modal on the screen with/getData
with the dataInput id value. getData/
returns after a query call and with the results.- 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">×</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>