how do you make ajax data key dynamic in jquery?

Question

I'm trying to make my inline edit to be dynamic so it will just depend on some data- attributes from my markup so here's the code for now:

$(".inline-edit").editable(
  function(value, settings) {
    var editableField = $(this);

    $.ajax({
          type: 'PUT',
          url: editableField.attr('data-href'),
          dataType: 'html',
          success: function(html) {
            editableField.parents('.replaceable').replaceWith(html);
          },
          data: { 'regression_test_environment[name]' : value }
        });
        return(value);
  },
  {
    event: 'click',
    width: '80%',
    height: '20',
    submit : 'OK'
  }
)

i want the name in regression_test_environment[name] to be editableField.attr('data-column-name') but it always fails in compiling because it keeps taking the key as a string. I tried making a variable after the editable field variable assignment and building the string as a different variable but it doesn't want to evaluate the key as a function.

Is there a way to do this? or am i stuck in creating a separate .editable call for each of my editable fields?

Answer 1

Better, less confusing answer:

var data = {};
data[thisField] = $(this).text();

$.ajax({
    data: data
});