Spring MVCとjQuery DataTableを使用したブートストラップモーダルポップアップ

Question

私のアプリケーション開発では（SpringBoot、Bootastrap、jQuery、jdbcTemplateで作成）、フォームをテーブル形式にクエンチングした後に表示し、これを達成するためにjQuery DataTable 。すべては完璧に動作します。

nexタスクは、いくつかのフィールドを編集するためのボタンをテーブルに追加することです。たとえば、イベントデータの場合、ボタンをクリックすると、2つの値、メモ、およびステータスを変更できなければなりません。 これを実行するために、私はDataTableコードでjsファイルにBootstrapモーダル（初めてこのツールでnewbee）を使用しました。

これは、JSファイルのコードである：私はフォームを照会する場合は、このコードで

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

、OSの種類、例えば、私はこの出力を得る：

Table results Popup results

ご覧のとおり、私はフォーム編集でポップアップを取得します。それは大丈夫です。だから問題は何ですか？

1. 私の場合は、Modalsのコードを直接データテーブルのjsファイルに入れてください。このjsファイルにインポート/インクルードするための外部ファイルを用意したいと思います。これを達成することは可能ですか？

2. このフォームは空のフォームです。私は本当に対話的ではないという意味です。保存ボタンをクリックすると、変更は行われません。私はDAOとコントローラのmvcを作成したので、フォームをこれにリンクする必要があります。 残りのプロジェクトでは、jspファイルを使用するため、これを簡単に実行します。もちろん、この形式はjspファイルにはありません。だから、私の質問は：jspファイルの中にModalのコードを入れたら、このファイルをDataTableのjsファイルの中で使うことができますか？そうでなければ、どうすればこのフォームを本当にインタラクティブにすることができますか？

UPDATE：以下応答した後、私は、このように自分のコードを変更し：

（データ列から）

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

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

#mymodalでのIDであるheandlingイベント用（関数、他のJSPで定義されています。注：今のところ、私はポップアップが開かれていることを確認したいので、データロジックとコントローラへの送信は実装していません。

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

editbutton.jspは、私はモーダルコードを入れて、しかしsrc/main/webapp/WEB-INF/jsp

の下で、私のコードは動作しませんファイルです。ポップアップモーダルは開かれません。私はボタンを見ることができますが、クリックすると何も起こりません。何が悪いですか？

EDIT2：設立。問題は二重であった。「オン」の機能のコードは準備が整った文書の外にあった。ボタンクラスは、機能上の内部では常に、であってはならないこと：

".btn btn-info btn-sm" 

しかし

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

EDIT3：コードは今、このです：

するvar DTevents =偽; $（ドキュメント）.ready（関数（）{

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

}）。

実際の問題は、2つのモーダルショーソリューション（jquery関数.on("click")とコードで使用されているもの、data-toggle='modal' data-target='#myModal'）が主な問題を解決しないことです。つまり、モーダルコードで外部jspをロードするにはどうすればよいですか？ ？

問題は、より具体的には、何を使用するか（私はjqueryロード関数を使用することができますが）どこでそれを使用するとは限りません。 たとえば、私が#eventsdata（テーブル見出しのあるページのIDで、私がデータテーブルを使用している場合）を使用すると、テーブルデータの汚れが何か他のもので8あり、これはモーダルではありません。空白のページがあるので）。

Answer 1

は、私はあなたが

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

をロードして、あなたはカスタムボタンを追加することができます

Answer 2

データのIDを取得するには、この文字列をカットすることができid=modal_1 と、特定のボタンのためにデータをロードするために、AJAXをやるべきだと思うし、

：この

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

イベントハンドラのようにそれにイベントを追加

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


});