Introduction to dialog() integration.

Wednesday, April 21st, 2010|Beginner tips, Version 3|by Romans

jQuery UI have a good support for dialogs and windows. Agile Toolkit 4 takes it to the next level. Most importantly it manages to create contents of the boxes on the fly. Let’s review what we have.

univ().dialogOK()

This is one of the simplest interfaces to create dialog. Here is how you call it from inside PHP:

$this->js(true)->univ()->dialogOK(‘Hello’,'World’);

of course you can bind it to the buttons etc. Functions takes 4 arguments:

  • title
  • text for the dialog itself
  • function to call when user clicks ok
  • options for dialog (such as width, etc – see jQuery UI manual)

System will properly handle if you have multiple dialogs, although one will always be modal. Another issue is when you close nested dialog, key bindings for Esc (and possibly some other keys) are not working. If you know why – please tell me how to fix.

Binding to button’s click:

$button->js(‘click’)->univ()->dialogOK(‘Are you sure?’,'Clicking OK does nothing’);

univ().dialogConfirm()

Very similar concept, but it features 2 buttons. OK will execute action as specified in 3rd argument. Let’s enhance our example to use this dialog type.

$button->js(‘click’)->univ()->dialogOK(‘Are you sure?’,'This will take you to other page’,

$button->js()->univ()->page($this->api->getDestinationURL(‘page2′))

);

univ().dialogURL()

Finally if you want to load URL inside that box, here is a way:
$button->js('click')->univ()->dialogURL('Page 2', $this->api->getDestinationURL('page2'));

In addition you can also look at:

  • dialogError(text,options,fn)
  • dialogAttention(text,options,fn)

getFrameOpener()

Once you are inside a dialog, let's say you want to get out and find out which button caused dialog to open. You can do so by:

$this->js(true)->getFrameOpener()->hide();

This will hide the original $button, which caused dialog to open through URL.

This is useful if you want to refresh part of original content after page inside frame added new entries. For example, here is the exmaple:

page1:

$grid->addButton('Add New')

->js('click')->univ()->dialogURL('Page 2', $this->api->getDestinationURL('page2'));


page2:


if($form->isSubmitted()){

$form->univ()->getFrameOpener()->closest('.atk4_grid')->atk4_grid('reload');

}

2 Comments

Svetlozar Kondakov
Posted April 21, 20107:50 pm

This indeed takes atk4 to the next level! Next step is I suppose to rewrite current functionality to use these new dialogs as grid delete formatter

romaninsh
Posted April 22, 20104:20 pm

Yeah, I’ll fix it at some point, but if you feel up to it – you can email me a patch. Basically you need to rewrite format_delete to rely on on _button but also catch the request and delete record. Also I suggest you to clone grid’s $dq for your request, to make sure all the extra condition applied on grid are also applied on the deletion procedure.