In my app developing (made with Spring Boot, Bootstrap, jQuery and jdbcTemplate), I have some results to show after querying a form into table format and to achieve this I used jQuery DataTable. All works perfectly.
The next task is to add a column on the table with a button to edit some fields; for example, for the Events data, clicking the button it must be possible modify 2 values, note and status.
To perform this, i used Bootstrap modal (for the first time, I am a newbee with this tool) into the js file with the DataTable code.
This is the code of the js file:
var DTevents = false;
$(document).ready(function() {
DTevents = $('#eventsdata').DataTable(
"serverSide": true,
"ajax":{
url: "../getevents.json",
type: "post",
"data": function (d)
d = $.extend(d, {statusname : $('#statusname').val()}, {typename : $('#typename').val()}, {infoname : $('#infoname').val()},
{notename : $('#notename').val()}, {idname : $('#idname').val()}, {username : $('#username').val()},
{hostname : $('#hostname').val()});
"columns": [
{ "data": "date" },
{ "data": "type" },
{ "data": "name" },
{ "data": "user_name" },
{ "data": "status" },
{ "data": "closing_date" },
{ "data": "info" },
{ "data": "note" },
{ "render": function(o){
return '<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Edit</button>' +
'<div id="myModal" class="modal fade" role="dialog">' +
'<div class="modal-dialog">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<button type="button" class="close" data-dismiss="modal">×</button>' +
'<h4 class="modal-title">Modal Header</h4>' +
'</div>' +
'<div class="modal-body">' +
'<form class="form-horizontal" role="form">' +
'<div class="form-group">' +
'<label class="col-sm-2 control-label"' +
'for="inputNotes">Notes</label>' +
'<div class="col-sm-10">' +
'<input type="text" class="form-control"' +
'id="newnote" placeholder="Put here the note"/>' +
'</div>' +
'</div>' +
'<div class="form-group">' +
'<label for = "type" class = "col-sm-2 control-label">Status</label>' +
'<div class = "col-sm-10">' +
'<select class = "form-control" id = "typename" name="type options">' +
'<option value="open">open</option>' +
'<option value="closed">closed</option>' +
'</select>' +
'</div>' +
'</div>' +
'</form>' +
'</div>' +
'</div>' +
'<div class="modal-footer">' +
'<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
'<button type="submit" class="btn btn-default" data-dismiss="modal">Save</button>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
With this code, if i query the form, for example on the os type, i obtain this output:
Table results
Popup results
As you can see, i obtain a pop up with form editing. And it's ok. So, what's the problem?
It's orrible, for me, put the code of the Modals directly inside the js file of data table; I would like to have an external file to import/include into this js file. Is it possible to achive this?
This form is an "empty" form; i mean that it is no truly interactive. If i click the save button, no modify are made; i made the DAO and the controller Spring mvc, so i must "link" the form to this.
In the rest of my project i perform easily this, becaus i use the jsp file; but this form, of course, is NOT on a jsp file. So, my question is: if i put the code of Modal inside a jsp file, can i use this file inside the js file of DataTable?And if not, how can i make this form truly interactive?
UPDATE: after responses below, I modified my code in this way:
(from data columns)
{ "render": function ( data, type, full) {
return '<a class="btn btn-info btn-md">' + 'Edit' + '</a>';
(function for events heandling, where #mymodal is the id of the modal, defined in another jsp. NOTE: for now i have not implemented the data logic and the sending to controllers, because i want before be sure that the pop up is opened)
$("#eventsdata").on("click", ".btn btn-info btn-sm", function () {
var html = "/jsp/editbutton.jsp";
$("#eventsdata").load(html);
$("#myModal").modal('show');
The editbutton.jsp is the file where i put the modal code and is under src/main/webapp/WEB-INF/jsp
However, my code does not work; no pop up modal is opened. I can see the button but if I click, nothing happens. What I wrong?
EDIT2: founded. The problema was double: the code of the function "on" was OUTSIDE the ready document; and the button class must be, always inside the on function, not:
".btn btn-info btn-sm"
".btn.btn-info.btn-md"
EDIT3: the code is now this:
var DTevents = false;
$(document).ready(function() {
DTevents = $('#eventsdata').DataTable(
"serverSide": true,
"ajax":{
url: "../getevents.json",
type: "post",
"data": function (d)
d = $.extend(d, {statusname : $('#statusname').val()}, {typename : $('#typename').val()}, {infoname : $('#infoname').val()},
{notename : $('#notename').val()}, {idname : $('#idname').val()}, {username : $('#username').val()},
{hostname : $('#hostname').val()});
"columns": [
{ "data": "date" },
{ "data": "type" },
{ "data": "name" },
{ "data": "user_name" },
{ "data": "status" },
{ "data": "closing_date" },
{ "data": "info" },
{ "data": "note" },
{ "render": function ( data, type, full, meta) {
return "<button type='button' class='btn btn-info btn-md' data-toggle='modal' data-target='#myModal'> Edit </button>";
The actual problem is that, both two modal show solution (using the jquery function .on("click") and the one used in the code, data-toggle='modal' data-target='#myModal') don't solve the main problem: how may i load the external jsp with the modal code?
The problem, more specifically, is not what use (i suppose i may use the jquery load function) but where use it.
For example, if I use on #eventsdata (that is the id of the page with table heading and on wich i use Data Table), in have (of course) the sobstitution of table data with something else 8and this is not the modal, because i got a blank page).
"render": function ( data, type, full, meta ) {
return <button type="button" id="modal_ +'+data.id+' " class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Edit</button>';
....................
and do ajax to load data for this button specific with id=modal_1
You can cut this string to get id of data
You can add a custom button and add event to it like this
"render": function(data, type, full) {
var str = "";
if(data != null){
str = "<input type='button' class='clsGuidelines' value='View' />";
return str;
Event Handler:
$("#eventsdata").on("click", ".clsGuidelines", function () {
var iPos = $(this).closest("tr").index();
var aData = $("#eventsdata").DataTable().fnGetData( iPos ); //get data of the clicked row
// aData has all values for clicked row
// Open dialog or Modal here
// you can load your JSP page here and continue
–
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
site design / logo © 2019 Stack Exchange Inc; user contributions licensed under cc by-sa 3.0
with attribution required.
rev 2019.1.22.32706
