What Is Best Way To Do Brazillian 2010

Magnolia, custom control, Freemarker and JavaScript

Carry, leaving curses and truthful information, a solution found for a custom control in Magnolia.

Problem
Create a custom control in Magnolia CMS with two select the first three options and the second with a dozen options, but not all have to be shown, but only those related to the option selected in the first select.

Solution (mine :-)) I created
a custom control using a Freemarker template for the first select, while the second is a standard select control. In
Freemarker template, I made up a stroke of Javascript, the creation of the second select, taking into account whether the previous user's choice.
I solved with a dictionary key value for the second option and select a set of array with the values \u200b\u200bselected by the choice of the first select ... clear no?
A little 'code to better understand, here's the dictionary and array: var

 
 secondaSelect = {"opt1", "Option 1", 
 "opt2": "Option 2", 
 "opt3" " Option 3 " 
 "opt4": "Option 4", 
 "opt5": "Option 5", 
 "opt6": "Option 6", 
 "opt7", "Option 7", 
 "opt8" Option "8", 
 "opt9": "Option 9" 
 "opt10", "Option 10"}; 
 
 OptionXPrimaSelect_0 var = ["opt1", "opt2", "opt5", "opt7"]; 
 
 OptionXPrimaSelect_1 var = [ "opt2", "opt4", "opt6", "opt8", "opt10"]; 
 
 OptionXPrimaSelect_2 var = ["opt3", "opt6", "opt9"]; 
 
 

Then I created the init function for the population and select:

 
 
 / / add option 
 function addOption (select, option) 
 
 {try {
 select.add (option, null) / / standards compliant, does not work in IE 
 
} catch (ex) {
 select.add (option) / / IE only} 
 
 
 
} / / remove all options 
 removeAllOptions function (select) {
 
 for (var i = select.childNodes.length-1, i> = 0; i -) {
 
 select.remove (select.childNodes [i]);} 
 
} 
 
 / / Init: function _initOptions 
 reset select (item, listOptions) {
 
 removeAllOptions (item); 
 for (var o in listOptions) 
 
 {var opt = document.createElement ('option'); 
 opt.text = listOptions [o] = o 
 opt.value; 
 addOption (item, opt);} 
 
} 
 
 

all'onchange function for the first select (code clearly intrusive), it is select the type \u0026lt; ; select id = "mySelectId" onchange = "changeSelect ">...

 
 
 changeSelect function (option, index) {
 
 
 var mySelect; 
 
 mySelect = document.getElementById ("firstSelect"); 
 
 if (index === 0) {
 
 _initOptions (mySelect, secondaSelect);} 
 
 
 if (options === 'a') {
 
 showOptions (mySelect, OptionXPrimaSelect_0) 
 
} else if (options === 'two') {
 
 showOptions (mySelect, OptionXPrimaSelect_1) 
 
} else if (options === "three") / / else: - ) {
 
 showOptions (mySelect, OptionXPrimaSelect_2) 
}} 
 
 

showOptions missing feature, the hinge This Freemarker template:

 
 
 showOptions function (item, optionsToDisplay) 
 
 {var = optionsSelect item.childNodes; 
 var optionTag; 
 var find = false; 
 
 / / Array containing the option to display 
 newSelectOptions var = []; 
 / / Option selected, if I get to edit a 
 var SelectedValue = ""; 
 for (var i = 0; the < optionsSelect.length; i++)
 
 optionTag = {optionsSelect [i]; 
 if (optionTag.selected) {
 
 SelectedValue = optionTag.value; 
 
 
} for (var j = 0, j {< optionsToDisplay.length; j++)
 
       if (optionTag != null && optionTag != "" && optionTag.value === optionsToDisplay[j]) 
         { 
           find = true; 
         } 
       } 
       if (find === true && optionTag != null) 
       { 
         newSelectOptions.push(optionTag); 
       } 
       find = false; 
     } 
      
     removeAllOptions(item); 
      
     // add child 
     var selected = 0; 
     var newOpt; 
     for (var i = 0; i  < newSelectOptions.length; i++)
     { 
       newOpt = newSelectOptions[i]; 
       addOption(item, newOpt); 
       if (newOpt.value === SelectedValue) 
 
 {selected = i;} 
 
 newOpt = null;} 
 
 item.selectedIndex = selected;} 
 
 
 

Note that using a variable to save the option selected, then set the selectedIndex property.
Although the objects in 'newSelectOptions' are all options, with IE not able to read the selected attribute (if any) and any verification (eg elemento.selected === 'selected' or elemento.selected or (!!(( element between the value, I managed to retrieve the option selected.
Finally, the function to load all this jumble of Javascript and HTML:

 
 
 (doSelectedOptions function () {var 
 oldonload = window.onload; 
 if (typeof window.onload! = 'Function') {window.onload 
 = func;} else {
 
 window.onload = function () {
 oldonload (); 
 var item = document.getElementById ("mySelectId"); 
 changeSelect (item.value);} 
 
 
}}) ( ) 
 
 

This post only to be insulted by the good Hot ... ;-), Had they promised! But also to share with the world something ... might be useful ... maybe not :-).

Questions doubts doubts, ask and you shall receive ... forever if I understand (how good the horse with pears (dixit)).

Clearly I missed the creation of dialogues, paragraphs, etc ... The idea was to share the solution and be insulted, of course! :-P

Side note ... yes, it works with IE6 ... for now!

Sani.

Resources:
http://stackoverflow.com/questions/386094/javascript-options-selected-ie6-vs-ff2
Magnolia CMS
Freemarker