FormDialog Instances

FormDialog takes general HTML FORMs and changes them into Dialogs. Values inputted by users in Forms is converted into JavaScript objects (Dictionary or Hash).

 

Generating FormDialog Instances

You can create instances through the code shown below:

  1. var dialog = new xq.Control.FormDialog(xed, html, onLoadHandler, onCloseHandler);

 

The first argument (xed) is an instance of xq.Editor. The second argument is an HTML string that will be shown on the screen. You can just use the following format "<form ...> ... </form>". Or for nonvisible domains or in other words, DIV that is set as style="display: none;", put that into the FORM. You can obtain the corresponding innerHTML and leave it as an argument. The third argument, when you are ready to have the FORM appear on the screen, this becomes the called callback function which can be shortened by leaving it as null. The function onCloseHandler occurs when the user submits or cancels the FORM. If the FORM is submitted, the callback function's argument will be carried over as a JavaScripot object.

 

For example, when FORM is the same as the following:

  1. <form>
  2. <input type="text" name="field1" />
  3. <input type="text" name="field2" />
  4. </form>

if the user inputs "hello" in field1 and "world" in field2 and then submits, the callback function's first argument will be as follows:

  1. {field1: "hello", field2: "world"}

thus, using the code shown below, you can obtain form values:

  1. var onCloseHandler = function(data) {
  2. alert(data.field1 + " " + data.field2);
  3. }

 

Displaying FormDialog on the screen

If you have generated FormDialog, using the following code will allow you to display a dialog on the screen:

  1. dialog.show();

Take note that, if you want to give automatic Focus to a certain field you must set class="initialFocus" at the corresponding field:

  1. <input type="text" name="url" class="initialFocus" />

 

Example

From the xq.Editor.handleLink function, refer to the embodied code for basic link dialog by using the FormDialog API.

 

Back