jEditable: Display Option Text (and not Value) after submit

╄→尐↘猪︶ㄣ 提交于 2019-12-04 13:19:14

Just add a callback in the editable configuration object, with this:

callback: function (value, settings) { 
      $(this).html(settings.data[value]);
 }

Almost there. I had two problems with William Niu's code. First, you can not access to variable data this way, use settings.data instead. Second, variable data is not an array, but a string, so data[value] will not work. Here is my code, try this.

$(".editable").editable("yoursave.php", { 
    type   : 'select',
    data   : '{'E':'Letter E','F':'Letter F','G':'Letter G'}',
    callback: function(value, settings) {
        $(this).html(jQuery.parseJSON(settings.data)[value]);
    }
});

jEditable provides various callback functions for you to manipulate the data. It may depend on how you obtain the data to populate the select. For example, if you the data is a constant map, you can easily find the value from the returned key:

var data = {'E':'Letter E','F':'Letter F','G':'Letter G'};

$('#editable').editable('some url', {
    type: 'select',
    data: data,
    callback: function(value, settings) {
        $(this).html(data[value]);
    },
    submit: 'ok'
});

Example: http://jsfiddle.net/william/mT4XV/

mbit

The callback function in Hammers code is correct, but I had problems with parsing the data:

"JSON.parse: expected property name or '}' "

The data should be json-conform, means: data : '{"E":"Letter E","F":"Letter F","G":"Letter G"}',

So the correct code is like

$(".editable").editable("yoursave.php", { 
    type   : 'select',
    data : '{"E":"Letter E","F":"Letter F","G":"Letter G"}',
    callback: function(value, settings) {
        $(this).html(jQuery.parseJSON(settings.data)[value]);
    }
});

If you have a simple array instead of the associative array you can use Niu´s callback.

return $(this).find('option:selected').text();

in the callback function worked for me :)

I had a similar problem. I am using post to function and loadurl.

By modifying var str = settings.target.apply(self, [input.val(), settings]); to var str = settings.target.apply(self, [input.val(), settings, input]); I had control over the select element in my target function

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!