Question

I have two select boxes in a dialog..I was wondering if i can set the contents of the second select box based on the selection of the first box..i.e if select box1 has x selected, then select box2 contents are a, b, c..if select box1 has y selected, then select box2 contents are d, e, f.. Is this possible to implement?

Thanks

Answer 1

I’m guessing that the dialog with two select boxes you mentioned is part of a custom plugin you are creating. So my answer shows code you could use in the dialog file that’s being created as part of the plugin.

The onChange function of Selector One creates a reference to Selector Two using:

dialog.getContentElement( 'general', 'selectorTwo' )

‘general’ is the id of the dialog panel containing the selectors.
‘selectorTwo’ is the id of the second selector.

I modified the source code from the SimpleLink tutorial hosted at cksource.com:
Creating a CKEditor Plugin with a Custom Dialog Window
http://docs.cksource.com/CKEditor_3.x/Tutorials/SimpleLink_Plugin_Part_1

Download the SimpleLink source code here:
http://docs.cksource.com/images/a/a8/SimpleLink.zip

Unzip and add the simpleLink folder to your ckeditor/plugins directory.

Update your config file by adding the simpleLink plugin to your extraplugins list:
config.extraPlugins = ‘onchange,insertsnippet,resconfinearea,resiframe,simpleLink’,

Or when you do CKEDITOR.replace use:
extraPlugins : ‘onchange,insertsnippet,resconfinearea,resiframe,simpleLink’,

Also add the button to your toolbar – ‘SimpleLink’

You’re going to insert the code snippet from the bottom of this message into the ckeditor/plugins/simpleLink/plugin.js file.

To make the insertion point easy to locate, the first twelve lines of the snippet overlap with lines ( 111 – 122 ) of the simpleLink/plugin.js file.

After you insert the snippet, open ckeditor/_source/plugins/forms/dialogs/select.js.
Copy the following three functions from the top of the select.js file and add them at the top of the simpleLink/plugin.js file:
addOption()
removeAllOptions()
getSelect()

---

Open a page that’s using CKEditor and click on the SimpleLink button you added, you’ll see selectors one and two at the bottom of the dialog window. When you change selector one, selector two will be updated. You should be able to modify the code to suit your application.

These pages have some useful information you can refer to when reviewing the code I posted:

Creating a CKEditor Plugin with a Custom Dialog Window
http://docs.cksource.com/CKEditor_3.x/Tutorials/SimpleLink_Plugin_Part_1

Class CKEDITOR.dialog
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.html

Class CKEDITOR.dialog.definition
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.definition.html

Here’s the code snippet to insert into the ckeditor/plugins/simpleLink/plugin.js file.
Just select lines ( 111 – 122 ) and paste this in:

{
  type : 'checkbox',
  id : 'newPage',
  label : 'Opens in a new page',
  // Default value.
  // http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.checkbox.html#constructor
  'default' : true,
  commit : function( data )
  {
    data.newPage = this.getValue();
  }
},
{
  type : 'select',
  id : 'selectorOne',
  label : 'Selector One',
  items :
  [
    [ '<none>', '' ],
    [ 'Set 1', 1],
    [ 'Set 2', 2 ],
    [ 'Set 3', 3 ]
  ],
  onChange : function()
  {
    var dialog = this.getDialog(),
      values = dialog.getContentElement( 'general', 'selectorTwo' ), // 'general' is the id of the dialog panel.
      selectedSet = parseInt(this.getValue());

    switch(selectedSet)
    {
    case 1:
      optionsNames = new Array("Set One <none>","Set One A","Set One B","Set One C"),
      optionsValues = new Array("","setOneA","setOneB","setOneC");
      break;
    case 2:
      optionsNames = new Array("Set Two <none>","Set Two A","Set Two B","Set Two C"),
      optionsValues = new Array("","setTwoA","setTwoB","setTwoC");
      break;
    case 3:
      optionsNames = new Array("Set Three <none>","Set Three A","Set Three B","Set Three C"),
      optionsValues = new Array("","setThreeA","setThreeB","setThreeC");
      break;
    default:
      optionsNames = new Array("<none>"),
      optionsValues = new Array("");
    }

    removeAllOptions( values );

    for ( var i = 0 ; i < optionsNames.length ; i++ )
    {
      var oOption = addOption( values, optionsNames[ i ],
        optionsValues[ i ], dialog.getParentEditor().document );
      if ( i == 0 )
      {
        oOption.setAttribute( 'selected', 'selected' );
        oOption.selected = true;
      }
    }
  },
  commit : function( data )
  {
    data.selectorOne = this.getValue();
  }
},
{
  type : 'select',
  id : 'selectorTwo',
  label : 'Selector Two',
  items :
  [
    [ '<none>', '' ]
  ],
  commit : function( data )
  {
    data.selectorTwo = this.getValue();
  }
},

Hope this does the trick, let me know if something isn’t clear,
Joe

---

Hi oggiemc,

Good to know that you’ve had a chance to experiment with the code and it’s great that it’s been helpful.

Answers to the additional questions about the functions copied from the plugins/forms/dialogs/select.js file.

1) The three functions shouldn’t be called when the dialog is opened. That’s not occurring in the sample I created as outlined in my initial answer. You might want to search your code for the three function names to see if they are being called someplace other than the ( onChange : function() ) contained in the selectorOne definition.

2) I broke down the ( removeAllOptions() function ) and included it below. It has a similar line of code. For the line you asked about:

if (combo && oOption && oOption.getName() == 'option'),

It says If ( combo exists ) AND ( oOption exists ) AND ( oOption.getName() == ‘option’ ) the If statement is true.
By “exists”, I mean it’s not null and not something that evaluates to false (either 0 or a binary Not true).

3) Yes, in this particular usage of the addOption() function, the index variable isn’t used. You can remove the two if statements and just leave the code statement from each else clause.

4) obj.getInputElement() returns the DOM element object, but obj.getInputElement().$ only returns the HTML tag for the DOM object. Try adding some console.log calls to the getSelect() function and you’ll see the difference:

if ( obj && obj.domId && obj.getInputElement().$ ) {        // Dialog element.
  console.log(obj.getInputElement().$); // ADDED CONSOLE.LOG
  console.log(obj.getInputElement()); // ADDED CONSOLE.LOG

return obj.getInputElement();

Here is the flow for the removeAllOptions() function:
In the onChange() function for selectorOne we create a variable “values” which represents selectorTwo.
values = dialog.getContentElement( ‘general’, ‘selectorTwo’ )

Before populating selectorTwo with new option values based on the option selected in selectorOne, we remove any existing options from selectorTwo:
removeAllOptions( values ); // values represents selectorTwo

Within the removeAllOptions() function the variable “combo” is assigned the value that was passed in the function call, so:
combo = values = selectorTwo.

The removeAllOptions() function calls the getSelect() function and sends it the “combo” variable as a parameter.
The “combo” variable will be assigned the value that is returned by the getSelect() function.

Within the getSelect() function the variable “obj” is assigned the value that was passed in the function call, so:
obj = combo = values = selectorTwo.

The getSelect() function can return one of three values:
A) if ( obj && obj.domId && obj.getInputElement().$ )
If obj is true AND if obj.domId is true AND if obj.getInputElement().$ returns anything other than false or null, it will return the value of obj.getInputElement().
So, if the obj variable exists and the domId property of obj is set, it will run the getInputElement() function on obj and check that the DOM property ($) is set.
getInputElement() uses the domId to return the DOM element that corresponds to the selectorTwo element.

B) If not all three parts of A were true, the getSelect() function tries:
if ( obj && obj.$ )
So, if the obj variable exists and it already is the DOM element ($), it will just send back obj.

C) If step B fails, then getSelect() returns false and selectorTwo doesn’t have any option elements to remove.

Now back to the removeAllOptions() function to see what happens if step A or B of getSelect() returns something.
In both cases the “combo” variable will be the selectorTwo object with the DOM element (combo.$) set.
It runs a while loop over the array of option elements inside selectorTwo and removes them.
It gets the first option element “getChild( 0 )” and removes it, the option element that was at position Child( 1 ) moves to position Child( 0 ) and the loop continues until there are no option elements left.

The getInputElement() function is located at line ( 1085 ) of ckeditor_source\plugins\dialogui\plugin.js
The getInputElement() function calls the getElement() function.
The getElement() function is located at line ( 2560 ) of ckeditor_source\plugins\dialog\plugin.js

function removeAllOptions( combo )
{
  combo = getSelect( combo );
  while ( combo.getChild( 0 ) && combo.getChild( 0 ).remove() )
  { /*jsl:pass*/ }
}

function getSelect( obj )
{
  if ( obj && obj.domId && obj.getInputElement().$ )        // Dialog element.
    return  obj.getInputElement();
  else if ( obj && obj.$ )
    return obj;
  return false;
}

Be Well,
Joe