jEditable: Display Option Text (and not Value) aft

问题:

I'm using jEditable on a Select list. It works beautifully, except for the following issue. jEditable displays in place whatever a server posts back after a submit. That works great for text boxes etc. where you can simply post the submitted value back from the server.

However, this makes no sense on select lists because the value posted is simply the Id of an option element. If I post that back, then my text changes to the Id instead of the friendly text that was there before.

How can I turn this behavior off? I don't want to have to fetch the text value using the submitted Id from from the DB again just to post it back for display purposes. There should be a way to retain the option text and then have jEditable put it back in the label after submission. Help?

回答1:

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

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

回答2:

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]);
    }
});

回答3:

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/

回答4:

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.

回答5:

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

in the callback function worked for me :)

回答6:

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