CODEWITHSUNDEEP
jqueryinputjeditable
Koala7
Koala7

Reputation: 1404

Input type number in Jeditable

I am just wondering about one thing with Jeditable Plugin. I am already using and it works great but what about if i need an input type number? The demo examples cover : textarea, select, text and different events

What about if i need to specify an input type number on event click?

This is my code:

    $('.click').editable(function(value, settings) { 
     console.log(this);
     console.log(value);
     console.log(settings);
     return(value);
  }, {
      event     : "click",
      submit  : 'OK',
      style  : "inherit"
 });

Upvotes: 2

Views: 1843

Answers (2)

Reign.85
Reign.85

Reputation: 2518

or simply create your own custom type like describe in the docs : http://www.appelsiini.net/2007/custom-input-types

this should work pretty well :

$.editable.addInputType('number', {
  element : function(settings, original) {
      var input = $('<input type="number">');
      $(this).append(input);
      return(input);
  },
  submit : function (settings, original) {
      if (isNaN($(original).val())) {
          alert('You must provide a number')
          return false;
      } else {
          return true;
      }
  }
});

And then:

$('.edit_number').editable(page_url, 
    {
        type:   'number'
    }
);

Upvotes: 2

Koala7
Koala7

Reputation: 1404

Ok, i have done in this way and it looks working:

I have first added a new input type in my jquery.jeditable.js 

    number: {
        element : function(settings, original) {
            var input = $('<input type="number">');
            if (settings.width  != 'none') { input.attr('width', settings.width);  }
            if (settings.height != 'none') { input.attr('height', settings.height); }
            /* https://bugzilla.mozilla.org/show_bug.cgi?id=236791 */
            //input[0].setAttribute('autocomplete','off');
            input.attr('number','off');
            $(this).append(input);
            return(input);
        }
    },

then i have created the script in my html page:

    $('.number').editable(function(value, settings) { 
     console.log(this);
     console.log(value);
     console.log(settings);
     return(value);
  }, { 
     type    : 'number', 
     style  : "inherit"
 });

Here in my html

<p class="number" style="text-align: right;">000,00</p>

Upvotes: 0

Related Questions