Question

我有一个包含以下代码的页面。我想要实现的是具有两个提交按钮的x可编辑形式，它应该调用两个不同的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);
        }
    });
});

问题在于，目前两个按钮都将相同的参数提交给相同的网址，即在可编辑的防火线上定义的网址。

提前谢谢！

Answer 1

试试这个：

{
    "name": "jodes/X",
    "require": {
        "monolog/monolog": "@stable",
        // .....
        "jodes/Y": "dev-master"
    },
    "repositories": [
        {
            "type": "vcs",
            "url": "http://bitbucket.org/Jodes/Y.git"
        }
    ]
}

[更新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');

而不仅仅是

ajaxOptions: { url: url },

我的工作小提琴：http://jsfiddle.net/rb1bxefv/
和你的ajax仿真：http://jsfiddle.net/qbeuanuf/5/

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

1 个答案: