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

Included jQuery files
Setup Ajax dialog
Source code of Ajax dialog

Implementation
Testing automation

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.

jQuery dialog example

Then push "Show dialog" button, then the dialog below appears.

jQuery dialog using ajax

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.

After closed jQuery dialog

top of this page

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.


<link rel="stylesheet" href="/jquery/themes/cupertino/jquery-ui.css">

<script src="/jquery/jquery-1.10.2.js"></script>
<script src="/jquery/ui/jquery.ui.core.js"></script>
<script src="/jquery/ui/jquery.ui.widget.js"></script>
<script src="/jquery/ui/jquery.ui.mouse.js"></script>
<script src="/jquery/ui/jquery.ui.button.js"></script>
<script src="/jquery/ui/jquery.ui.draggable.js"></script>
<script src="/jquery/ui/jquery.ui.position.js"></script>
<script src="/jquery/ui/jquery.ui.resizable.js"></script>
<script src="/jquery/ui/jquery.ui.button.js"></script>
<script src="/jquery/ui/jquery.ui.dialog.js"></script>
<script src="/jquery/ui/jquery.ui.effect.js"></script>

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.

jQuery css themes

top of this page

Setup Ajax dialog

By calling dialog() function of jQuery UI.


<script>
<!--
$(function() {
	$( "#dialog" ).dialog({
		height: 600,
		width: 1000,
		autoOpen: false,
		show: {
			effect: "blind",
			duration: 1000
		},
		hide: {
			effect: "explode",
			duration: 1000
		}
	});

	$( "#btndlg" ).click(function() {
		var url = "/samples/dialog/innerdlg.html";
		
		var str01 = $("#str01").val();
		var sel01 = $("#sel01").val();
		
		$.ajax({
			type: 'POST',
			url: url,
			data: {
				str01: str01,
				sel01: sel01
			},
			dataType: 'html',
			success: function(data) {
				$('#dialog').html(data);
			},
			error:function() {
				alert('Error occur');
			}
		});
		
		
		$( "#dialog" ).dialog( "open" );
	});
});
-->

The index.html has blank div tag whose id is "dialog.


<div id="dialog" title="Basic dialog"></div>

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.

parameters to jQuery dialog

top of this page

Source code of Ajax dialog

This dialog set form valiable of the parent html's form variable. And it is normal html.


<!DOCTYPE html>
<html lang="en">
<body>
<script>
$(function() {
	$( "#btnclosedlg" ).click(function() {
		
		$( "#str01" ).val($("#dlgstr01").val());
		$( "#sel01" ).val($("#dlgsel01").val());
		
		$( "#dialog" ).dialog( "close" );
	});
	
	
});
</script>
<h1>Inner dialog</h1>

<p>
	Please take a look at "innerdlg.html".
</p>
<p>
	The "innerdlg.html" has javascript section.
	You can access the form in "index.html".
	Change value of this form and close this.
</p>

<p>
<form name="frm" action="index.html" method="post">

<input type="text" name="str01" id="dlgstr01" value="{$IN.str01}" />
<select name="sel01" id="dlgsel01" value="{$IN.sel01}">
<option value="">--- select ---</option>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>


<button type="button" id="btnclosedlg">Close</button>
</form>
</p>

</body>
</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.