x-editable multiple submit buttons - different url or parameters

Question

I have a page with the below code. What I'm trying to achieve is x-editable form with two submit buttons, which should either call two different url or call the same url but with different parameters.

This is the html code

<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>

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

The problem is that at present moment both buttons submit same parameters to same url, the one defined at the editable fire line.

Thank you in advance!

Answer 1

Try out this:

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

[update 1]

you should use

ajaxOptions: { url: url },

instead of just

 { url: url }

my working fiddle: http://jsfiddle.net/rb1bxefv/
and your's with ajax emulation: http://jsfiddle.net/qbeuanuf/5/