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
- Testing automation
In order to access this example, please access the url below or "jQuery Dialog" link from the toppage.
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.
This example shows you how to use ajax dialog and how the dialog part communicates with the parent form in the root HTML.
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.
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.
This dialog set form valiable of the parent html's form variable. And it is normal html.
This example is testable code, there is more example to do testing automation. Please take a look at Testing jQuery Dialog example.