X-editable custom field type not respecting overridden defaults

X-editable custom field type not respecting overridden defaults

I have a custom x-editable input type for entering a city and selecting a country that renders like so:

Notice the buttons at the bottom; This is so because the initialization code contains showbuttons: ‘bottom’:
$(‘#location’).editable({
url: ‘/post’,
title: ‘Enter city and country’,
showbuttons: ‘bottom’,
value: {
city: “Napier”,
country: “nz”
},
sourceCountry: [
{value: “af”, text: “Afghanistan”},

{value: “zw”, text: “Zimbabwe”}
]
});

But for this widget it makes no sense to render the buttons at the side; so I wanted the buttons to be there by default;
Hence I tried setting the default for this editable type:
Location.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
tpl: ” +

‘ +
‘ +

‘ +

‘ +
‘ +

‘,

inputclass: ”,
showbuttons: ‘bottom’,
sourceCountry: []
});

But the showbuttons key is being ignored; the others are applying fine, but not this one. So how can I set the default for a editable type?
Here’s the editable code,
(function ($) {
“use strict”;

Related:  MVC bootstrap navbar not working after running NuGet updates

var Location = function (options) {
this.sourceCountryData = options.sourceCountry;
this.init(‘location’, options, Location.defaults);
};

//inherit from Abstract input
$.fn.editableutils.inherit(Location, $.fn.editabletypes.abstractinput);

$.extend(Location.prototype, {

render: function () {
this.$input = this.$tpl.find(‘input’);
this.$list = this.$tpl.find(‘select’);

this.$list.empty();

var fillItems = function ($el, data) {
if ($.isArray(data)) {
for (var i = 0; i < data.length; i++) { if (data[i].children) { $el.append(fillItems($('‘, {
label: data[i].text
}), data[i].children));
} else {
$el.append($(‘

fillItems(this.$list, this.sourceCountryData);

},

value2html: function (value, element) {
if (!value) {
$(element).empty();
return;
}
var countryText = value.country;
$.each(this.sourceCountryData, function (i, v) {
if (v.value == countryText) {
countryText = v.text.toUpperCase();
}
});
var html = $(‘

‘).text(value.city).html() + ‘ / ‘ + $(‘

‘).text(countryText).html();
$(element).html(html);
},

html2value: function (html) {
return null;
},

value2str: function (value) {
var str = ”;
if (value) {
for (var k in value) {
str = str + k + ‘:’ + value[k] + ‘;’;
}
}
return str;
},

str2value: function (str) {
return str;
},

value2input: function (value) {
if (!value) {
return;
}
this.$input.filter(‘[name=”city”]’).val(value.city);
this.$list.val(value.country);
},

input2value: function () {
return {
city: this.$input.filter(‘[name=”city”]’).val(),
country: this.$list.val()
};
},

activate: function () {
this.$input.filter(‘[name=”city”]’).focus();
},

autosubmit: function () {
this.$input.keydown(function (e) {
if (e.which === 13) {
$(this).closest(‘form’).submit();
}
});
}
});

Related:  Twitter Bootstrap 3 same height fluid grid layout?

Location.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
tpl: ” +

‘ +
‘ +

‘ +

‘ +
‘ +

‘,

inputclass: ”,
showbuttons: ‘bottom’, //WHY ISN’T THIS WORKING!!!
sourceCountry: []
});

$.fn.editabletypes.location = Location;

}(window.jQuery));

Solutions/Answers:

Solution 1:

It’s possible you have an old version of x-editable. You can find the version in the link you use to include it in the <head> of your document.

Only version 1.1.1 and later supports the showbuttons command.

If this is not the issue, let me know and I’ll see what else I can figure out.

References