jQuery Dialog example
jQuery Dialog is main and basic part to use Ajax. This example shows you how to use Ajax jQuery Dialog.
Access and work the example
In order to access this example, please access the url below or "jQuery Dialog" link from the toppage.
http://localhost:8080/samples/dialog/
Then the page below will appear.
Then push "Show dialog" button, then the dialog below appears.
This html of the dialog is loaded by Ajax. Input any word into the text box and select any item in the dialog, and push "Close" button.
Implementation
This example shows you how to use ajax dialog and how the dialog part communicates with the parent form in the root HTML.
Included jQuery files
This example uses css and JavaScript files of jQuery, listed below.
This is the header section of "index.html". If you want to change the theme of css, change "/jquery/themes/cupertino/jquery-ui.css" into "/jquery/themes/[Other theme]/jquery-ui.css".
The themes are in the "ALINOUS_HOME/jquery/themes/" folder.
Setup Ajax dialog
By calling dialog() function of jQuery UI.
The index.html has blank div tag whose id is "dialog.
The $( "#dialog" ).dialog() set the div tag as dialog part.
The script binds click function of the button whose id is "btndlg". When the button clicked, by calling $.ajax, access the url "/samples/dialog/innerdlg.html" and get html the url returns, and input the html into "#dialog" div tag.
Then the parameter for the inner dialog html is str01 and sel01. They are the value of the first form's input, these are text and combobox.
The "innerdlg.html" accessed, the parameter comes from the $.ajax, so put it as the default value of the form inputs in the dialog's form.
Source code of Ajax dialog
This dialog set form valiable of the parent html's form variable. And it is normal html.
In this part, you can write JavaScript, and access the parent Html's form by using jQuery by id. You can get both inner dialog's html objects and parent Html's ones.
Testing automation
This example is testable code, there is more example to do testing automation. Please take a look at Testing jQuery Dialog example.