javascript - X-editable custom field type not respecting overridden defaults -


i have custom x-editable input type entering city , selecting country renders so:
enter image description here

notice buttons @ bottom; because initialization code contains showbuttons: 'bottom':

$('#location').editable({     url: '/post',     title: 'enter city , country',     showbuttons: 'bottom',     value: {         city: "napier",         country: "nz"     },     sourcecountry: [         {value: "af", text: "afghanistan"},         ...         {value: "zw", text: "zimbabwe"}     ] }); 

but widget makes no sense render buttons @ side; wanted buttons there default; hence tried setting default editable type:

location.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {     tpl: '' +         '<div class="editable-location">' +         '<label><span>city: </span><input type="text" name="city"></label>' +         '</div>' +         '<div class="editable-location">' +         '<label><span>country: </span><select name="country"></select></label>' +         '</div>',      inputclass: '',     showbuttons: 'bottom',     sourcecountry: [] }); 

but showbuttons key being ignored; others applying fine, not one. how can set default editable type?

here's editable code,

(function ($) {     "use strict";      var location = function (options) {         this.sourcecountrydata = options.sourcecountry;         this.init('location', options, location.defaults);     };      //inherit 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)) {                     (var = 0; < data.length; i++) {                         if (data[i].children) {                             $el.append(fillitems($('<optgroup>', {                                 label: data[i].text                             }), data[i].children));                         } else {                             $el.append($('<option>', {                                 value: data[i].value                             }).text(data[i].text));                         }                     }                 }                 return $el;             };              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 = $('<div>').text(value.city).html() + ' / ' + $('<div>').text(countrytext).html();             $(element).html(html);         },          html2value: function (html) {             return null;         },          value2str: function (value) {             var str = '';             if (value) {                 (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();                 }             });         }     });      location.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {         tpl: '' +             '<div class="editable-location">' +             '<label><span>city: </span><input type="text" name="city"></label>' +             '</div>' +             '<div class="editable-location">' +             '<label><span>country: </span><select name="country"></select></label>' +             '</div>',          inputclass: '',         showbuttons: 'bottom', //why isn't working!!!         sourcecountry: []     });      $.fn.editabletypes.location = location;  }(window.jquery)); 

it's possible have old version of x-editable. can find version in link use include in <head> of document.

only version 1.1.1 , later supports showbuttons command.

if not issue, let me know , i'll see else can figure out.


Comments