Question

这就是场景。在jQuery DataTable中，我有一些值和一个编辑按钮来修改其中的两个;点击它，打开一个模态弹出窗口，并提供一个表格来插入笔记和状态的新值：

...

"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（＆＃39; id＆＃39;）;不起作用。我为idevent获得了未定义的值。

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

在这里你可以注意到button元素的数字id。

意图是：此表代表事件。当必须将2个字段修改，注释和状态发送到控制器时，我必须向其发送事件ID，并且我希望使用.attr()函数执行此操作。现在，必须在选择器上使用此函数;我可能想要使用按钮id作为选择器，但我有不同的ID不同的按钮。所以，如果我点击第4个按钮，id为4，我可能有：

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

如果我点击第5个按钮，代码必须是：

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

如果我点击第6个按钮：

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

等等。所以，我有一个变量选择器可供使用;我不知道如何执行此操作。

Answer 1

我会尝试在模态中添加一个隐藏的输入...

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

然后，当用户提交信息时，信息已经在表单中。
;）

如何将变量选择器传递给jquery .attr（）

1 个答案: