While dojo toolkit’s dijit.Dialog is a great tool to use, it’s a bit confusing as to how it can be reused as a function. For example, to replace the common JavaScript function confirm() you can use this code:
var c = confirm( "Please confirm deleting this item" ); alert( "you picked: " + c) |
While not exactly the prettiest or the most elegant solution – it is the quickest. Why spend time creating HTML and writing large routines when you can fall back onto one of the few synchronous functions available for browsers?
Well, this might be why. Kind of an eye-sore.
While this can be done with toolkits, such as Dojo, it can be cumbersome. You have to create some HTML for each dialog and write routines to make it work.
Worse yet – toolkits, much like rest of JavaScript, are asynchronous – meaning that you can’t pause execution of code until the user responds. Thus, you’d probably have to revise your code execution workflow to get prettier dialogs.
Luckily and thanks to the foresight of the Dojo guys, you can easily reuse the dialog and make a generic and reusable JavaScript function to use dijit.Dialog. You just have to alter your way of thinking a tiny bit.
First, some HTML:
<div id="id_dialog" dojoType="dijit.Dialog" title="fidget"> <div style="width:300px; height:150px"> <div id="id_dialog_text"></div> </div> <div class="dijitDialogPaneActionBar"> <button dojoType="dijit.form.Button" type="submit" id="id_dialog_button_1" >Yes</button> <button dojoType="dijit.form.Button" type="button" onClick="dijit.byId('id_dialog').onCancel();" id="id_dialog_button_2" >Cancel</button> </div> </div> |
Now, this is a gross-oversimplification, but you’ll get the idea. To see examples of how to implement dijit.Dialog in its entirety (note this example uses declarative widget creation instead of programmatic), see http://docs.dojocampus.org/dijit/Dialog
<script type="text/javascript"> dojo.require("dijit.Dialog"); dojo.require("dojo.parser"); function fancy_confirm(title, message, onYes, onNo) { dijit.byId('id_dialog_button_1').attr("style", "color:crimson;font-weight:bold"); dijit.byId('id_dialog_button_1').attr("label", "Yes, Delete"); var p = dijit.byId('id_dialog'); p.attr( "title", title ); dojo.byId('id_dialog_text').innerHTML = message; p.execute = dojo.hitch( p, function() { if( dojo.isObject( arguments ) ) { onYes(); } else { onNo(); } }); p.show(); } </script> |
To use this generic function, you simply wrap your follow-up code inside a function:
fancy_confirm( "Please Confirm deleting", "Are you sure you want to delete this pretty thing? <html goes here />", function() { alert( "sadly, you picked yes" ); }, function() { alert( "hooray, this content item lives on" ); } ); |
This page is somehow one of the highest traffic pages on this puny site; it baffles me, but, moreso raises the question to readers who visit:
Is any of this helpful to what you were looking for?
This actually was useful to me. I’m in the process of learning how Dijit and Dojo are put together and this is a great example of what I thinks is a fairly generic and fundamental technique.
Very useful! Your solution is very elegant, and simple to integrate into an existing project. Thanks!
one of the hits from googling: dojo confirmation dialog
thanks!
Sorry for being so obtuse, but how do I hide/show the html? This is a problem for me on all dojo stuff. I never see a technique for display:none then on execution display:true. Can someone help here with clarity?
@cpanon – Think what you’re trying to fix there is commonly referred to as flashing, or flashover. Not the friendliest term to google for as you get inundated with Adobe Flash references. In my past experience, dojo/dijit has struggled with correctly computing layouts if you set display:none.
This is some rusty code that I can’t exactly remember, but, what I’ve done in the past is set opacity:0 to a div#mycontainer and then I would show it with dojo.addOnLoad( function() { dojo.byId(“mycontainer”).css( { opacity: 1 } ); Alternatively you can animate the opacity for a smooth transition.