Creating some custom editor fieldTypes, first "set" call doesn't seem to be able to reference CSS

bucketfan

I'm creating a series of extended fieldTypes that I plan to contribute back, but I have having a common issue with all of them.

The first time that the "set" function is called seems to be before the create function data has been added to the DOM.

As such, if you want to incorporate object data into the custom field it seems in set you have to reference to the childNodes as opposed to using their css or JQ locators, for instance, in creating a "hour" / "minute" / AM vs PM field type. What this does is attempt to auto populate the 3 dropdowns accordingly. The issue, is that on the first click to edit, the CSS selectors aren't present as (I believe, anyways) this div hasn't yet been added to the DOM. If you then X the edit dialogue, and re-open it - it works on subsequent draws.

If you look at the HERE you will see the work around which allows access on the first instance. However, this feels wrong and I want to contribute "clean" fieldTypes not awful ones :)


"create": function ( conf ) {
var that = this;
var label = $(conf)[0].label;
conf._enabled = false;

conf._input = $(
''+ ' 12 1 2 3 4 5 6 7 8 9 10 1100153045pmam ' +
'')[0];

return conf._input;
},


"set": function ( conf, val ) {
var timeselect = val.split(" ");
var timesplit = timeselect[0];
var ampm = timeselect[1];
var split = timesplit.split(":");
var hour = split[0];
var min = split[1];

console.log("select hour " + hour + " and minute to " + min + " and selector to " + ampm);
// HERE
// $(".hour").val(hour);
conf._input.childNodes[1].value = hour;
conf._input.childNodes[2].value = min;
conf._input.childNodes[3].value = ampm;
},


So on 2nd or more edit dialogues, the $(".hour").val(whatever) works fine. But not on the first draw of the edit dialogue. ONLY accessing theru the conf._input accessors will it work.

Am I doing something silly here ? Or is this just how it is :)

allan

> $(".hour").val(hour);

I think you want:

[code]
$(".hour", conf._input).val(hour);
[/code]

This has two effects:

1. It limits the jQuery selector search to just what is in conf._input - i.e. that input control. Otherwise it is doing a global search, and would break if you had more than one instance of this field.

2. The element hasn't been added to the DOM, as you correctly surmise, so the global search won't work, but since we have a reference to the element (conf._input) we can use it to get the value.

Allan

bucketfan

That's a lot cleaner thanks Allan. Once I have these overrides setup, what's the best way to contribute them ?

Thanks again!