i have custom x-editable input type entering city , selecting country renders so:
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
Post a Comment