Get it All
Together

I’m not a fan of unstyled content. I don’t think many developers are. Worse, while I like to reuse my dialog divs, I don’t want the old content confusing users when the dialog first opens. And of course, users often rush to try to use dialogs as soon as they open, so we need to give the dialog a chance to load it’s content before that. So I needed to create a generic function for opening a jQuery dialog box, putting a “spinner” in the box until the proper content loads. Here is my solution:

https://gist.github.com/holisticnetworking/2a9652eb9cc161a5254177893e81f2d9

The function presumes you will be loading content from an AJAX call and provides a couple of very handy parameters. First, you can pass the complete option object for the jQuery Dialog API into your function call, making the dialog itself completely customizable. Second, it provides a callback function parameter, which will be run after the content is loaded into the content area of the dialog.

To use this function, simply include the following HTML into your page, somewhere near the footer (I use CakePHP, but you can just use a regular image call to get the spinner:

https://gist.github.com/holisticnetworking/65740348887ebe435e73d716005fb945

Use your CSS to hide the #popup div and you’re ready to start implementing dialog boxes the smart way!

Because someone asked me and because I haven’t seen quite the same solution out there on the nets, I’m posting this really quick for the benefit of those who need a quick submit button confirmation. If, for example, you want to prompt users to confirm whether or not they wish to delete an item out of a form, you can use the below JavaScript function to get it done. The function is designed to serve as confirmation for many different types of events, so it’s quite flexible:
[javascript]
// confirmButton: simple function to test user response
function confirmButton(message) {
var conf = confirm(message);
if(conf) {
return true;
} else {
return false;
}
}
[/javascript]
To us it, I use my trusty Unobtrusive JS action loading function like so:
[js light=”true”]
addEvent(editsubmitbtnz[i], ‘click’, function() { return confirmButton(‘Are you sure you want to edit this feed?’); });
[/js]
You could also add the function directly to the button like so:
[html light=”true”]<input type="submit" value="Delete This" onclick="return confirmbutton(‘Are you sure you want to delete this feed?’);" />[/html]
The result is a JavaScript function that will halt all action on the screen when you hit the submit button that the function is assigned to. It prompts the user to say whether or not they agree with the statement passed as a reference to the function, then pass that value (true or false) back to the page and either submit the form as normal or cancel the operation.