open up Jquery Dialog from form actions

[JoshuaW]

I want to create an elegant dialog message using Jquery UI with 'Save', 'No' and 'Cancel' buttons, each one will have events.

I'm fully aware Jquery is purely for client-side cosmetic changes, but is it possible to control form events from jquery?

I'm using Tabset, so if I click on a different tab, I want the ebase script to confirm changes have been made, then trigger the jquery dialog, if no changes are found, carry on to a different tab, but if save, then action ebase script to save data.

Many thanks
Josh

[Wai]

Hi Joshua,

In the next version of Ebase we will be looking to introduce a client-server API which will allow you to interact with the server more elegantly.

In the meantime, there are workable solutions.

The JQuery Dialog has a "close" event:

Example from JQuery API

Code: Select all

$( ".selector" ).dialog({
  close: function( event, ui ) {}
});

An example in Ebase:
You might have a panel on your page with an ID "showbox". This will be your dialog.

Trigger the dialog from a button or link etc. In the HTML Element Properties, add a JQuery event which defines the dialog.

Code: Select all

$( "#showBox" ).dialog(
{
	height: 320,
	width: 350,
	title: "My Dialog",
	modal: true,
	zIndex: 100000,
	close: function(event, ui)
	{
		$(this).dialog( "option", "modal", false );
		$('#updateForm').trigger('click');
	}
}

On your form you could also have another button, which has an ID "updateForm". This is the button we want to trigger when the dialog closes.

You can see in the example above, we add a click trigger event onto our button. When the dialog closes, the Ebase script on the button will be executed.

Hope that helps.

[Dave]

Hi Joshua - have a look at http://forum.ebasetech.com/forum/viewtopic.php?t=412 for a related example.