1

Accessing JQuery UI Dialog’s Options and Methods From Within The Dialog

Posted (Updated ) in Javascript

I discovered recently a little quirk with accessing a JQuery UI Dialog‘s options and methods from within the dialog itself. I was AJAXing the dialog’s contents and was having difficulty figuring out how to access the dialog’s methods. As it turns out, from the contents of the dialog you don’t use

$(this).closest('.ui-dialog').option()

which returns a javascript object, but instead use

$(this).closest('.ui-dialog-content').option()

Seeing as this post would otherwise be pretty short, let’s do a little more than simply retrieving options. Below I’ll explain not only to open a AJAX dialog from a HTML link, but also tell the dialog what element opened it. This could be useful in such instances as when you need to click a link which opens a dialog allowing you to upload a user avatar, and upon uploading, replaces the link with the avatar image.

For the lazy, you can download the complete tutorial files here.

Firstly a simple AJAX dialog example. Call this file simple_ajax_dialog.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple AJAX Jquery UI Dialog Demo | Flynsarmy</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/smoothness/jquery-ui.css" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.1.min.js'></script>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js'></script>
<script>
	//Retrieve the HTML element used for the dialog
	function get_ajax_dialog()
	{
		var $dialog = $("#ajax_dialog");
		//No DOM element with this ID exists - create it
		if ( !$dialog.size() )
			$dialog = $('<div id="ajax_dialog" style="display:none;"></div>').appendTo('body');
 
		return $dialog;
	}
 
	$(function() {
 
		$('a.modal').live('click', function() {
			var $dialog = get_ajax_dialog();
			var url = $(this).attr('href');
			var title = $(this).attr('title');
 
			//load remote content
			$dialog.load(
				url,
				{},
				function(responseText, textStatus, XMLHttpRequest) {
					if (textStatus == 'error')
						$dialog.html(responseText);
 
					$dialog.dialog({
						modal: true,
						title: title,
						//Destroy on close. Required for some stacked modal functionality
						close: function(ev, ui) {
							$(this).remove();
						}
					});
				}
			);
 
			return false;
		});
 
	});
</script>
</head>
<body>
	<a href="ajax/get_dialog_option.html" class='modal' title="AJAX modal">Load Dialog</a>
</body>
</html>

You’ll also need the ajax file this page is loading. Create ajax/ajax_content.html:

<!-- This HTML is loaded via AJAX into a JQuery UI Dialog -->
 
AJAX success!

Fire it up! You should see a blank page with a link at the top left. Click the link to AJAX load the dialog contents. If all went to plan you should get a happy ‘AJAX success!’ message.

We now know how to AJAX load dialogs, so let’s go one step farther. In this example we’ll AJAX load a page with a button that grabs one of its dialogs options (in this case its title). Create a file ajax/get_dialog_option.html with the following contents:

<!-- This HTML is loaded via AJAX into a JQuery UI Dialog -->
 
<script type='text/javascript'>
	//Alert specified option of the btn's dialog.
	function get_option( btn, optionName )
	{
		alert(
			'The "'+optionName+'" option of this dialog is: ' +
			$(btn).closest('.ui-dialog-content').dialog('option', optionName)
		);
	}
</script>
 
<!-- On click, alert the diloag's 'title' option -->
<input type="button" value="Get Title" onclick="get_option(this, 'title')" />

Update the link on line 54 above and refresh. In the dialog there should now be a button that pops up a message box telling you the dialog’s title when clicked.

Now for the big kahoona. We can AJAX dialogs, we can grab its options from within the dialog itself but we still don’t know what element opened it. Create a new file simple_ajax_dialog_parent.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple AJAX Jquery UI Dialog Demo With Parent | Flynsarmy</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/smoothness/jquery-ui.css" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.1.min.js'></script>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js'></script>
<script>
	//Retrieve the HTML element used for the dialog
	function get_ajax_dialog()
	{
		var $dialog = $("#ajax_dialog");
		//No DOM element with this ID exists - create it
		if ( !$dialog.size() )
			$dialog = $('<div id="ajax_dialog" style="display:none;"></div>').appendTo('body');
 
		return $dialog;
	}
 
	$(function() {
 
		$('a.modal').live('click', function() {
			var $dialog = get_ajax_dialog();
			var $parent = $(this);
 
			//load remote content
			$dialog.load(
				$parent.attr('href'),
				{},
				function(responseText, textStatus, XMLHttpRequest) {
					if (textStatus == 'error')
						$dialog.html(responseText);
 
					$dialog.dialog({
						modal: true,
						title: $parent.attr('title'),
						//Destroy on close. Required for some stacked modal functionality
						close: function(ev, ui) {
							$(this).remove();
						}
					}).data('parent', $parent); //Let the dialog know what opened it
				}
			);
 
			return false;
		});
 
	});
</script>
</head>
<body>
	<a href="ajax/get_parent_text.html" class='modal' title="AJAX modal">Load Dialog With Parent</a>
</body>
</html>

You’ll notice one major update here: I’ve added a .data() call on line 42 which attaches the parent element to the #ajax_dialog HTML DOM element. Now create ajax/get_parent_text.html which will use that info:

<!-- This HTML is loaded via AJAX into a JQuery UI Dialog -->
 
<script type='text/javascript'>
	//Alert specified option of the btn's dialog.
	function get_parent_text( btn )
	{
		alert(
			'The link you clicked says: ' +
			$(btn).closest('.ui-dialog-content').data('parent').html()
		);
	}
</script>
 
<!-- On click, alert the diloag's 'title' option -->
<input type="button" value="Get Parent Link Text" onclick="get_parent_text(this)" />

Open the new page, click the link and then the button in the AJAX’d dialog. You’ll be notified of the text the link says.

You can download the complete tutorial files here.

Have fun and use it wisely!

  • Sascha

    Great stuff!