Bootstrap Modal Popup mit Spring MVC und jQuery DataTable

Question

In meiner App Entwicklung (mit Spring Boot, Bootastrap, jQuery und jdbcTemplate) habe ich einige Ergebnisse nach dem Abfragen eines Formulars in Tabellenformat zu zeigen, und um dies zu erreichen, habe ich jQuery DataTable verwendet . Alles funktioniert perfekt.

Die nex Aufgabe besteht darin, eine Spalte in der Tabelle mit einer Schaltfläche hinzuzufügen, um einige Dateien zu bearbeiten; Zum Beispiel, für die Ereignisse Daten, klicken Sie auf die Schaltfläche muss es möglich sein, ändern Sie 2 Werte, Notiz und Status. Um dies durchzuführen, habe ich Bootstrap Modal (zum ersten Mal, ich Newbee mit diesem Tool) in die js-Datei mit dem DataTable-Code.

Dies ist der Code der js-Datei:

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">&times;</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>'; 
        } } 
       ] 
      }); 
    }); 

Mit diesem Code, wenn ich das Formular abfragen, zum Beispiel auf dem OS-Typ, erhalten i diese Ausgabe:

Table results Popup results

Wie Sie sehen können, erhalte ich ein Popup mit Formularbearbeitung. Und es ist in Ordnung. Also, was ist das Problem?

1. Es ist orrible, für mich, legte den Code der Modals direkt in der js-Datei der Datentabelle; Ich möchte eine externe Datei haben, um in diese js-Datei zu importieren/einzuschließen. Ist es möglich, dies zu erreichen?

2. Dieses Formular ist ein "leeres" Formular; Ich meine, dass es nicht wirklich interaktiv ist. Wenn ich auf die Schaltfläche "Speichern" klicke, werden keine Änderungen vorgenommen. Ich habe das DAO und den Controller Spring mvc gemacht, also muss ich das Formular "verlinken". Im Rest meines Projekts mache ich das leicht, weil ich die jsp-Datei verwende; aber diese Form ist natürlich nicht auf einer JSP-Datei. Also, meine Frage ist: Wenn ich den Code von Modal in eine JSP-Datei einfügen, kann ich diese Datei innerhalb der JS-Datei von DataTable verwenden und wenn nicht, wie kann ich dieses Formular wirklich interaktiv gestalten?

UPDATE: nach Antworten unten, geändert ich meinen Code auf diese Weise:

(aus Datenspalten)

{ "render": function (data, type, full) { 

         return '<a class="btn btn-info btn-md">' + 'Edit' + '</a>'; 
        } 
        } 

(Funktion für Veranstaltungen heandling, wo #mymodal die ID der ist modal, in einem anderen JSP definiert HINWEIS: Im Moment habe ich die Datenlogik und das Senden an die Controller nicht implementiert, da ich vorher sicher sein möchte, dass das Popup geöffnet ist)

$("#eventsdata").on("click", ".btn btn-info btn-sm", function() { 
    var html = "/jsp/editbutton.jsp"; 
    $("#eventsdata").load(html); 
    $("#myModal").modal('show'); 
}); 

Die editbutton.jsp ist die Datei, in der ich den modalen Code setzen und ist unter src/main/webapp/WEB-INF/jsp

Allerdings ist mein Code nicht funktioniert; Es wird kein Popup-Modal geöffnet. Ich kann den Knopf sehen, aber wenn ich klicke, passiert nichts. Was ich falsch mache?

EDIT2: gegründet.Das Problema war doppelt: der Code der Funktion "on" war AUSSERHALB des fertigen Dokuments; und die Schaltfläche Klasse muss sein, immer in der auf Funktion, nicht:

".btn btn-info btn-sm" 

aber

".btn.btn-info.btn-md" 

EDIT3: Der Code ist jetzt das:

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

}); Das eigentliche Problem ist, dass beide Modal Show-Lösung (mit der Jquery-Funktion .on("click") und die im Code, data-toggle='modal' data-target='#myModal') nicht das Hauptproblem lösen: Wie kann ich die externe JSP mit dem Modal-Code laden ?

Das Problem, genauer gesagt, ist nicht, was Verwendung (ich nehme an, ich kann die jquery laden Funktion), aber wo es verwenden. Zum Beispiel, wenn ich auf #eventsdata (das ist die ID der Seite mit Tabellenüberschrift und auf denen ich Datentabelle verwenden) verwenden, haben (natürlich) die Bildung von Tabellendaten mit etwas anderes 8 und dies ist nicht das modale, weil ich eine leere Seite bekommen habe).

Answer 1

ich glaube, Sie

"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>'; 
     .................... 
    } 

und tun Ajax laden sollten die Daten für diese Schaltfläche spezifisch mit id=modal_1 laden Sie diese Zeichenfolge schneiden ID von Daten erhalten

Answer 2

Sie können eine benutzerdefinierte Schaltfläche hinzufügen und Ereignis, um es wie diese

"render": function(data, type, full) { 
    var str = ""; 
    if(data != null){ 
     str = "<input type='button' class='clsGuidelines' value='View' />"; 
    } 
    return str; 
} 

Event-Handler hinzufügen:

$("#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 


});