Alert with Three Options – jQueryUI in a Salesforce Custom Button

18 Aug

Recently, I was asked to create a custom button that would allow a user to choose between two SuperClone Configuration options. jQueryUI provides a nice modal dialog that solved the problem. The dialog showed two buttons for the configurations and a cancel button. Below is the sample code for what I put together. The actions for each button could be swapped out to load other any other pages or run javascript methods.

A few stackoverflow posts helped me put this together. Credit to:
http://stackoverflow.com/questions/9091001/how-to-show-confirmation-alert-with-three-buttons-yes-no-and-cancel-as-it.
http://salesforce.stackexchange.com/questions/63291/open-jquery-dialog-from-custom-button
http://stackoverflow.com/questions/16170157/dialog-was-hidden-behind-overlay-when-modal-true-on-jquery-dialog-in-asp-net
jQueryUI Modal Dialog

{!REQUIRESCRIPT('//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js')} 
{!REQUIRESCRIPT('//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js')} 

var $g = jQuery.noConflict(); 
$g(function() {
      $g('head').append(''); 
      $g('body').append(''); 
      $g("#dialog").dialog({ 
        autoOpen: true, 
        modal: true, 
        buttons: { 
            "Config 1": function() {window.open("superclone url here for config 1","_self");},
            "Config 2":  function() {window.open("superclone url here for config 2","_self");},
            "Cancel":  function() {$g(this).dialog("close");}
        } 
    }); 
});