Archive

Posts Tagged ‘dialog link’

Creating dialogs on demand

August 7th, 2009

In a previous article, I explained how to load a page into a dialog. The article focused on a simple solution to keep it easy to understand. However, that simplicity does come with a drawback; the page contents are loaded immediately after the document is ready, even if the user never opens the dialog. In this article, I’ll show how to load the page on demand while still only making a single request regardless of how many times the user opens the dialog.

On-demand page loading

In order to create the dialog on the first click, we’ll take advantage of jQuery’s .one() event binding method.one() binds a handler to an event, but the handler is only ever run once. Immediately after the handler runs it unbinds itself, preventing further execution. We’ll adapt the example from the previous article to take advantage of .one():

$(document).ready(function() {
	$('#page-help').each(function() {
		var $dialog = $('<div></div>');
		var $link = $(this).one('click', function() {
			$dialog
				.load($link.attr('href'))
				.dialog({
					title: $link.attr('title'),
					width: 500,
					height: 300
				});

			$link.click(function() {
				$dialog.dialog('open');

				return false;
			});

			return false;
		});
	});
});

Adding the final touch

Now that we’ve got our dialogs loading on demand, we need to account for network latency, slow connections, etc. Previously we were loading the page contents before the user ever saw the dialog, so any delay was hidden. A simple solution for this is to just show a loading image inside the dialog until the page contents are loaded. We’ll load this image immediately on document ready to make sure that it’s ready for use when the user clicks the link to open the dialog. Loading images are generally very small in terms of file size and they can be cached by the user, so the overhead of loading the image up-front is negligible.

$(document).ready(function() {
	var $loading = $('<img src="loading.gif" alt="loading">');

	$('#page-help').each(function() {
		var $dialog = $('<div></div>')
			.append($loading.clone());
		var $link = $(this).one('click', function() {
			$dialog
				.load($link.attr('href'))
				.dialog({
					title: $link.attr('title'),
					width: 500,
					height: 300
				});

			$link.click(function() {
				$dialog.dialog('open');

				return false;
			});

			return false;
		});
	});
});

View this example in a new window

jQuery UI - Dialog , , , , ,

Loading a page into a dialog

April 18th, 2009

I previously showed the basic usage of the jQuery UI dialog.  In this article, I’ll show how to open a page in a dialog.  We’ve all been to sites where there’s a help link that opens a popup with some short help text.  This is usually done with a simple window.open call attached to the click event of the link.

<a id="page-help" href="page.html" onclick="window.open(this.href, 'popupwindow', 'width=500,height=300'); return false;">what is this?</a>

Making it better

The one thing that this code has going for it is that users without JavaScript will still be able to get to the page with the help content. Of course, a better implementation would move the JavaScript out of the HTML, properly separating content from behavior.  We can spruce this up by loading the content into a dialog instead of a new window:

$(document).ready(function() {
	$('#page-help').each(function() {
		var $link = $(this);
		var $dialog = $('<div></div>')
			.load($link.attr('href'))
			.dialog({
				autoOpen: false,
				title: $link.attr('title'),
				width: 500,
				height: 300
			});

		$link.click(function() {
			$dialog.dialog('open');

			return false;
		});
	});
});

How it works

We’re finding the link, loading the contents of the linked page into a div and creating a dialog from that div.  We then bind a click event to the link to show the dialog.  This code by itself will work in many situations.  However, the page you’re linking to may have a heading that you’re already reproducing with the dialog title.  There may also be other elements on the page that won’t make sense in a popup, such as navigational elements or a page footer.  Luckily the .load() function allows us to pass in a selector to find the contents that we care about.  In this example we’ll assume the main content of the page is in a div with an id of content.

$(document).ready(function() {
	$('#page-help').each(function() {
		var $link = $(this);
		var $dialog = $('<div></div>')
			.load($link.attr('href') + ' #content')
			.dialog({
				autoOpen: false,
				title: $link.attr('title'),
				width: 500,
				height: 300
			});

		$link.click(function() {
			$dialog.dialog('open');

			return false;
		});
	});
});

View this example in a new window

jQuery UI - Dialog , , ,