Category Archives: jQuery

jQuery multiple dialog problem solved

I’ve been creating a dynamic jQuery user interface for Hypersocket and came across a problem with the jQuery dialog. My user interface has a core that dynamically loads ‘modules’ from the menu. This will allow us to plugin new functionality in the future without hard coding menu options. The basic function is for each menu option a html fragment is loaded into a div.

When a user clicks on a new menu option I empty the main content div:

$('#mainContent').empty();

Then load the new modules content:

$('#mainContent').load('modules/content' + name + '.html', function() {
    hideBusy();	
});

The problem I had is that when the page fragment is loaded it was creating a dialog with one of the divs in the fragment, nothing unusual except that JQuery was placing this dialog element in the body of the DOM. This meant it was moved outside of my main content div, so subsequent loads of the modules content would see additional dialog divs being created in the document. This caused problems with my dialogs as some select tags that were loaded based on their id would see multiple versions of the data.

I found the solution here. Simply move the dialog back into the main content div once it has been created.

$('#addRealmForm').dialog({ .. });
$('#addRealmForm').parent().appendTo('#mainContent');

This way when my main content div is emptied, the dialog is removed too. There is only one problem with this, the dialog is constrained to the parent div so if you drag it around the browser it will disappear when its bounds go outside the parent.

This can be resolved with a little more code before we open the dialog:

$('#addRealmForm').parent().appendTo('body');

And when we close the dialog we put it back where we want it in the main div:

$('#addRealmForm').parent().appendTo('#mainContent');

Dropping GWT for jQuery

I’ve been playing around with GWT for a few days and have come to the conclusion its too bloated for my needs. I want Hypersocket to be as lightweight as possible and the GWT UI just doesn’t feel right. I would also have to get over the issues of not being able to run server-side code within GWT itself (because Netty is providing the HTTP layer) and was looking at having to proxy my REST API calls during development.

Using JQuery makes things simpler, and I can get rid of that GWT Eclipse plugin that seems to have slowed down my development environment since it as installed.