Tuesday 21 September 2010

Using JQuery dialog boxes

I was having a discussion with a client recently about how many users ignore any pop-up messages that may appear. I've seen it many times, particularly in Forms applications, where the user just dismisses any pop-up before reading it while I stand behind them thinking "I'm pretty sure that message was important!"

I think the same can be said for JavaScript messages, which is why I'm really liking the JQuery dialog box. Instead of just being a message, you can use it to dim the entire browser canvas and the dialog box appears quite imposing. Check out the demo here.

I've been using JQuery for specific components, such as the Datepicker in Apex 3.x, so since my library is already included in my application, it's not much to replace the JavaScript messages. When you construct your library, ensure you include the Dialog widget.

The implementation of a JQuery dialog box also lends itself to customising the message content via PL/SQL quite easily.

Let's take the example of replacing the standard Delete question. First, define your message as a hidden DIV"
<div id="DELETE_MSG" title="Delete record"  style="display:none">
<p>
Are you sure you wish to delete this record?
(You may undelete in future)
</p>
</div>
This could quite easily be a PL/SQL canvas, or any other method to dynamically generate HTML of your choosing.

Then you define a normal javascript function that your button would call:
function delete_msg() {

   $('#DELETE_MSG').dialog('open');

}
At the same place you can define the actual dialog call. Review the JQuery documentation for all the implementation options
$(function(){
  // Dialog
  $('#DELETE_MSG').dialog({
    autoOpen: false,
    resizable:false,
    modal:true,
    width: 600,
    buttons: {
      "Delete": function() {
        $(this).dialog("close");
        doSubmit('DELETE');
      },
      "Cancel": function() {
        $(this).dialog("close");
      }
    }
  });
});

The highlighted line doSubmit() is where you essentially change the value of :REQUEST, which you would interrogate after page submission to decide what processes/branches to execute. Alternatively, you could replace it with whatever other JavaScript you wish to action.

The possibilities are endless :-)

 ScottWe

2 comments:

mnolan said...

Hey Scott

Me again :) you're posting quite often, good stuff! Most APEX bloggers are pretty infrequent, myself included!

I too am a fan of integrating third party features. Here's a solution that I use for Ext JS which you could adapt for the dialog function.

http://application-express-blog.e-dba.com/?p=376

Overriding the javascript function confirmDelete means that there will be less setup work and will give you an application wide solution that reuses the standard APEX delete button definition.

It's not to replace your solution as it will have its own uses for other messages, but for delete buttons I'd recommend the javascript override for consistency and maintenance.

Looking at how the dialog function works you probably just need a PLSQL page process on page zero to query the data dictionary and print out your shortcut "delete message" wrapped in the DIV. Combined with you javascript confirmDelete override function

Just an idea.

Cheers Matt

Scott Wesley said...

You again, huh? ;-)

My posts come in waves. Sometimes I'll have the opportunity to write a few up in a session, (then with the magic of the Internet) I just schedule them up.

Then I might get real busy and not do any for a month!

I haven't jumped on the ExtJS train just yet, I'm still busy soaking in everything there is to learn about JQuery, but I shall read through your work with interest - cheers.