MiBol MiBol - 3 months ago 33
HTML Question

jeditable dynamic select options

I have a page that it using jEditable, and I want to load dynamically the options of a picklist (Depending of the current element).

I have the following example in fiddle:
http://jsfiddle.net/mbv401920150/2rdco6qL/1/

$(document).ready(function() {
$('.edit').editable(function(value, settings) {
console.log(this);
console.log(value);
console.log(settings);
return(value);
}, {
data : " {'E':'E','F':'F','G':'G', 'selected':'F'}", // <---- I WANT TO CHANGE THIS CODE
// ******************************************
// DYNAMIC LOAD - DEPENDING OF THE ELEMENT ID
// ******************************************
// data : function(currentElement) {
// if(currentElement.id == "A") return " { '1':'1', '2':'2', '3':'3' }";
// else return " { 'A':'A', 'B':'B', 'C':'C' }";
// }
type : 'select',
onblur: 'submit'
});
});


I want retrieve the list of specific options depending of the element.
This could be possible?

Answer

I figured out how accomplish this task, I include an additional class per each element.

Here is a full solution: http://jsfiddle.net/mbv401920150/2rdco6qL/3/

$(document).ready(function() {
  $('.letter, .number').each(function(i, e) {
    $(e).editable(function(value, settings) {
      console.log(this);
      console.log(value);
      console.log(settings);
      return (value);
    }, {
      data: ($(e).hasClass('letter') ?
        " { 'A':'A', 'B':'B', 'C':'C' }" :
        " { '1':'1', '2':'2', '3':'3' }"),
      type: 'select',
      onblur: 'submit'
    });
  });
});

If is a dynamic generation (on mouse over, on click); I remove the auxiliary class after the initialization of jEditable.

Comments