2017-08-03 72 views
0

這是場景。在jQuery DataTable中,我有一些價值和編輯按鈕來修改其中的2個;點擊它,一個模式彈出打開,提供了一種形式來插入註釋和狀態的新值:如何將變量選擇器傳遞給jquery .attr()

...

"columnDefs": [ 
         { 
          "targets": [ 0 ], 
          "visible": false 
          //"searchable": false 
         }], 

       "columns": [ 
        { "data": "id" }, 
        { "data": "date" }, 
        { "data": "type" }, 
        { "data": "name" }, 
        { "data": "user_name" }, 
        { "data": "status" }, 
        { "data": "closing_date" }, 
        { "data": "info" }, 
        { "data": "note" }, 
        { "data": null, 
          "render": function (data, type, full, meta) { 

          return "<button type='button' class='btn btn-info btn-md' id=\'" + full.id + "\' data-toggle='modal' data-id=\'" + full.id + "\' data-target='#myModal'> Edit </button>"; 

         } 

...

正下方,我有ajax函數將插入的值發送到Spring控制器:

//This function is used to send the form data to Spring controller; cause we use a modal, with code that must be put in the file with html table head, 
    //we must replace the use of view made by jsp using an ajax function 
    $('#myModal').on('click', '.btn.btn-success', function(event) { 
     var form = $('#updateeventsform'); //recover the form inside modal by using id 
     var formdata = form.serializeObject(); //use the serializeObject function to prepare data for Json format 
     formdata.idevent = $(this).attr('data-id'); //add the event id to form data, after setting it with the IDnumber variabile 
     console.log(formdata, this); 
     event.preventDefault(); 

     //here starts the code to sending data to Spring controller 
     $.ajax({ 
       url: "../updateevents.json", 
       type: "post", 
       data: formdata, 
       success : function() { 

        console.log("Invio riuscito."); 
        DTevents.ajax.reload(null, false); //we reload the table, showing immediately the data updated. 
       } 

      }); 

     }); 

此代碼給了我一個未定義的值formdata.idevent;這是正確的,因爲$(this)值引用當前元素(在我的情況下,提交按鈕)。 正如您所看到的,該按鈕的ID是一個數字值,由full.id字段設置。 所以,我試了一下:把一個數字值作爲attr()函數的選擇器。我改變:

formdata.idevent = $(this).attr('data-id'); 

formdata.idevent = $('#5').attr('data-id'); 

和工作原理。

所以,問題是:是否有一種方法使用selector作爲.attr()函數的變量值?如果不是,我應該使用什麼將正確的值傳遞給控制器​​?

編輯評論答案。

已使用$(this).data('id');不起作用。我爲idevent得到了未定義的值。

<button type='button' class='btn btn-info btn-md' **id=\'" + full.id +** 

這裏你可以注意到button元素的數字id。

意圖是:此表代表事件。當修改了2個字段,註釋和狀態,必須發送給控制器,我必須發送事件ID給它,我想使用.attr()函數執行此操作。 現在,這個功能必須在選擇器上使用;我可能想使用按鈕ID作爲選擇器,但我有不同的按鈕與不同的ID。所以,如果我點擊第四按鈕,id爲4,我可能有:

formdata.idevent = $['#4'].attr('data-id'); 

如果我點擊了5按鈕的代碼必須是:

formdata.idevent = $['#5'].attr('data-id'); 

如果我點擊第六屆按鈕:

formdata.idevent = $['#6'].attr('data-id'); 

等等。所以,我有一個變量選擇器使用;我不知道如何執行此操作。

+0

難道你不能只格式化一個字符串作爲選擇器?我知道一個字符串作爲變量作爲選擇器(例如#test_1) – selten98

+0

嘗試使用'$(this).data('id');'。在你的例子中'$(this)'指的是'#myModal'而不是'#5' –

+0

不確定你在問什麼,但它看起來像你想要的:'var sel =「#5」; var id = $(sel).data(「id」);' –

回答

0

我會嘗試添加一個隱藏的輸入模態...

<input type="hidden" id="idevent" name="idevent"> 

而且在「編輯」按鈕點擊,攜旗下id的模式form

$(".btn.btn-info").on("click",function(){ 
    var idevent = $(this).data("id"); // Or $(this).attr("id") 

    // Delay for the modal openning animation... 
    setTimout(function(idevent){ 
    $('#myModal form #idevent').val(idevent); 
    },800); 
}); 

然後,信息應該已經在表單時,用戶提交的。
;)