javascript - x-可编辑多个提交按钮 - 不同的 url 或参数

Question

我有一个包含以下代码的页面。 我想要实现的是带有两个提交按钮的 x-editable 表单，它应该调用两个不同的 url 或调用相同的 url 但具有不同的参数。

这是html代码

<table width="100%" height="100%" border="1">
    <tr>
        <td>Name</td>
        <td>First name</td>
        <td>Position</td>
        <td>Company</td>
    </tr>

    <tr>
        <td class="editable" id="required" data-pk='1' data-name="name1">Name 1</td>
        <td class="editable" id="required" data-pk='2' data-name="name2">Firstname 1</td>
        <td class="editable" id="required" data-pk='3' data-name="name3">Position 1</td>
        <td class="editable" id="required" data-pk='4' data-name="name4">Company 1</td>
    </tr>

    <tr>
        <td class="editable" id="required" data-pk='5' data-name="name5">Name 2</td>
        <td class="editable" id="required" data-pk='6' data-name="name6">Firstname 2</td>
        <td class="editable" id="required" data-pk='7' data-name="name7">Position 2</td>
        <td class="editable" id="required" data-pk='8' data-name="name8">Company 2</td>
    </tr>

    <tr>
        <td class="editable" id="required" data-pk='9' data-name="name9">Name 3</td>
        <td class="editable" id="required" data-pk='10' data-name="name10">Firstname 3</td>
        <td class="editable" id="required" data-pk='11' data-name="name11">Position 3</td>
        <td class="editable" id="required" data-pk='12' data-name="name12">Company 3</td>
    </tr>
</table>

这是 JavaScript

$.fn.editable.defaults.mode = 'popup';
$.fn.editable.defaults.title = 'Edit';
$.fn.editable.defaults.type = 'text';
$.fn.editable.defaults.toggle = 'dblclick';

$.fn.editableform.buttons  = 
    '<button type="button" class="btn btn-primary btn-sm editable-submit"><i class="glyphicon glyphicon-ok"></i></button>'+
    '<button type="button" class="btn btn-default btn-sm editable-cancel"><i class="glyphicon glyphicon-remove"></i></button>'+
    '<button type="button" class="btn btn-default btn-sm editable-off"><i class="glyphicon glyphicon-trash"></i></button>';

$('.editable').editable({
    validate: function(value) {
        if($.trim(value) == '') {
            return 'Value is required.';
        }
    },
    url: 'save.php',
    send: 'always'
});

$(document).on('click','.editable-submit',function() {
    $('.editable-open').editable('submit', {
        url: 'save.php',
        params: function (params) {
            var data = {};
            data['value'] = params.value;           
            data['pk'] = params.pk;
            data['originalValue'] = $(this).text();
            data['action'] = 'edit';
            return data;
        },
        success: function(params, config) {
            console.log(params);
        }
    });
});

$(document).on('click','.editable-off',function() {
    $('.editable-open').editable('submit', {
        url: 'save2.php',
        params: function (params) {
            var data = {};
            data['value'] = params.value;           
            data['pk'] = params.pk;
            data['originalValue'] = $(this).text();
            data['action'] = 'exclude';
            return data;
        },
        success: function(params, config) {
            console.log(params);
        }
    });
});

问题是目前两个按钮都将相同的参数提交到相同的 url，即在可编辑火线上定义的参数。

提前谢谢您!

Answer 1

试试这个:

function SubscribeSendButton(url, btnClass){
  $(document).on('click',btnClass,function(){
    $('.editable-open').editable('submit', {
      ajaxOptions: { url: url },
      params: function (params) {
                  var data = {};
                  data['value'] = params.value;           
                  data['pk'] = params.pk;
                  data['originalValue'] = $(this).text();
                  data['action'] = 'exclude';
                  return data;
              },
      success: function(params, config) {
          console.log(params);
      }
    });
  });
};

SubscribeSendButton('save1.php','.editable-off');
SubscribeSendButton('save2.php','.editable-submit');

[更新1]

你应该使用

ajaxOptions: { url: url },

而不仅仅是

 { url: url }

我的工作 fiddle :http://jsfiddle.net/rb1bxefv/
和你的 ajax 模拟:http://jsfiddle.net/qbeuanuf/5/