taking decimal inputs for x-editable field

Question

I am using x-editable with bootstrap

I have the following html field defined

<div class="form-group">
    <label class="col-sm-4">Service Charges(%)</label>
    <div class="col-sm-6 hoverEdit">
        <a class="editableAccount" id="serviceTax"></a>
    </div>
</div>

I have the following script defined to make the field editable

$('.editableAccount').editable({
    type : 'number',
    title : 'Enter New Value',
    success : function(response, newValue) {
        updateAccount(this.id, newValue);
    }
});

Now when i try to edit the field and enter decimal values i get this

I want to make this field editable so that i can enter decimal values. I can't see any help on the documentation. Some one please help me here, i am fairly new to html and javascript.

Answer 1

I used the x-editable shown event and set the step attribute there:

var edit = (function () {

    var $editable = $('.editable');

    var setInputStep = function(editable, step) {
        var input = editable.input;
        if (input.type == 'number')
            input.$input.attr('step', step);
    };

    var shownEvent = function (e, editable) {
        setInputStep(editable, 0.01);
    };

    var init = function () {
        $editable.editable();
        $editable.on('shown', shownEvent);
    };

    return {
        init: init
    };

})();

edit.init();

And in html make sure to set the data-type="number"

<a href="#" class="editable" data-type="number" data-pk="1" data-url="/edit/" data-title="Enter Value" data-name="value">Sample</a>