[Moo] setHTML not working in IE (MooTools 1.11)

[moleculezz]

Hello,

I am trying to make a form dynamic using mootools 1.11, for specific
reasons I cannot upgrade atm.
I'm trying to manipulate a select field to have dynamic options. I'm
using a calendar plugin which has a function "onHideComplete". I use
this to call my function and output the select options dynamically.
This works in Firefox & Chrome but not IE. In IE it shows an empty
dropdown box. Hope there's someone that can help me out here.


The code:
window.addEvent('domready', function() {
var myOptions = function(start, end, type){
var options = '';
if(type == 'uur'){
for (var n = start; n <= end; n++){
if(n < 10){
options = options + '<option value="0'+n+'">0'+n+'</option>';
} else {
options = options + '<option value="'+n+'">'+n+'</option>';
}
}
} else {
for (var n = start; n <= end; n=n+5){
if(n < 10){
options = options + '<option value=":0'+n+'">0'+n+'</option>';
} else {
options = options + '<option value=":'+n+'">'+n+'</option>';
}
}
}
return options;
}

var myMinutes = function(thisMin){
var min = 0;
if(thisMin <= 55){
var mod = thisMin%5; // = 2
if(mod != 0){
var dif = 5-mod;
min = thisMin+dif;
} else {
min = thisMin;
}
} else {
min = 55;
}
return min;
}

var myDates = function(dateField) {
var t = new Date();
var dateArray = dateField.getValue().split('/');
var u = new Date(dateArray[2], parseInt(dateArray[1])-1,
dateArray[0], t.getHours(), t.getMinutes(), t.getSeconds(),
t.getMilliseconds());

var uY = u.getFullYear();
var uM = u.getMonth();
var uD = u.getDate();

var y = t.getFullYear();
var m = t.getMonth();
var d = t.getDate();
var h = t.getHours();
var mn = t.getMinutes();

var myTime = {now: {time: t, year: y, month: m, day: d, hour: h,
min: mn}, user: {time: u, year: uY, month: uM, day: uD}};
return myTime;
}

var outputOptions = function(dateField, hourField, minuteField) {
//Call function myDate and calculate dates & times
var times = myDates(dateField);

var myHr = '';
var myMin = '';
if(times.user.year == times.now.year && times.user.month ==
times.now.month && times.user.day == times.now.day)
{
//Do this if today
myHr = myOptions(times.now.hour+1, 23, 'uur');
hourField.setHTML('<option value="">Kies uur</option>'+myHr);

var hrsChanged = '';
hourField.addEvent('change', function() {
hrsChanged = hourField.getValue();
hrsChanged = parseInt(hrsChanged);
if(times.now.hour+1 == hrsChanged)
{
//Do this if selected hour is the first selectable hour
var minutes = myMinutes(parseInt(times.now.min));
myMin = myOptions(minutes, 55, 'min');
minuteField.setHTML('<option value="">Kies minuten</
option>'+myMin);
}
else
{
//Do this if not the first selectable hour
myMin = myOptions(0, 55, 'min');
minuteField.setHTML('<option value="">Kies minuten</
option>'+myMin);
}
});
} else {
//Do this if not today
myHr = myOptions(7, 23, 'uur');
hourField.setHTML('<option value="">Kies uur</option>'+myHr);

myMin = myOptions(0, 55, 'min');
minuteField.setHTML('<option value="">Kies minuten</
option>'+myMin);
}
}

var datumCalc = function() {
outputOptions($('datum'), $('vertrektijd_uur'), $
('vertrektijd_min'));
}

myCal_datum.addEvent('onHideComplete', datumCalc);
});

[Johnny Fuery]

I'd recommend using inject(). setHTML with a bunch of raw markup just leaves that not-so-fresh feeling.

e.g.:

var sel = new Element('select').inject(myArbitraryContainerInTheDOM);

opts = {k:'value', 1:'foo', 2:'bar'};

$each(opts, function(el,k){

   new Element('option',{'text':el, 'value':k}).inject(sel);

});

Just function-ize this and dispose() and recreate your select options at will.

[moleculezz]

Hi, tried that, but I need it to replace the options that are already
there. Each time an event occurs it replaces with different options.
This method adds additional options. Also I noticed that the viewable
text is blank. What you have done, adds a property "text" and adds the
value. But this doesn't show.

I rewrote the function and it outputs everything correctly, also in
IE. But now I don't know which function replaces the options. I looked
at the documentation but it doesn't seem like any of the functions
does what I need. Some help will be much appreciated.

var myOptions = function(start, end, type, field){

if(type == 'uur'){
for (var n = start; n <= end; n++){
if(n < 10){

//options = options + '<option value="0'+n+'">0'+n+'</option>';
new Element('option',{'value':'0'+n}).set(field).setText('0'+n);
} else {
//options = options + '<option value="'+n+'">'+n+'</option>';
new Element('option',{'value':n}).set(field).setText(n);

}
}
} else {
for (var n = start; n <= end; n=n+5){
if(n < 10){

//options = options + '<option value=":0'+n+'">0'+n+'</option>';
new Element('option',{'value':'0'+n}).set(field).setText(':0'+n);
} else {
//options = options + '<option value=":'+n+'">'+n+'</option>';
new Element('option',{'value':n}).inject(field).setText(':'+n);

[moleculezz]

Oops.. some of the code is wrong. Here is the code.

var myOptions = function(start, end, type, field){
if(type == 'uur'){
for (var n = start; n <= end; n++){
if(n < 10){

new Element('option',
{'value':'0'+n}).inject(field).setText('0'+n);
} else {
new Element('option',{'value':n}).inject(field).setText(n);

}
}
} else {
for (var n = start; n <= end; n=n+5){
if(n < 10){

new Element('option',{'value':'0'+n}).inject(field).setText(':
0'+n);
} else {

[moleculezz]

I think what I need is a way to clear the options before I start
injecting. Then the code would work properly.
Hope someone can shed some light on my problem.

var myOptions = function(start, end, type, field){

        // Clear options here before injecting ???

> ...
>
> read more »

[Steve Onnis]

$("selectboxid").options.length = 0


That will do it

[moleculezz]

Thanks.. that worked!
Much appreciated

> ...
>
> read more »