We have a custom button on the detail page of the case designed to open a modal dialog popup, however receiving the $g(...).dialog is not a function error message. I've searched around the web and can't find a solution that quite fits, below is code, any suggestions are much appreciated:

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

var html = '<div id="dialog" title="Drivers License Builder"><p> Here is the first line of the DL builder</p></div>';

   var $g = jQuery.noConflict();
    $g(function() {
        $g('head').append('<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" type="text/css"/>');

        $g("#dialog").dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                "Generate License": function() {
                    $g(this).dialog("close");
                },
                "Cancel": function() {
                    $g(this).dialog("close");
                }
            }
        });
    });
}

catch(error) {
    alert(error);
}
  • Is there a specific error you are trying to catch? – Bradley Delaune Jan 14 '15 at 6:12
up vote 10 down vote accepted

Check the following things: 1. Button Behavior Execute JavaScript
2. JavaScript:

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

var html = '<div id="dialog" style="display: none" title="Drivers License Builder"><p> Here is the first line of the DL builder</p></div>'; 

var $g = jQuery.noConflict(); 
$g(function() { 
    $g('head').append('<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" type="text/css"/>'); 
    $g('body').append(html); 

    $g("#dialog").dialog({ 
        autoOpen: true, 
        modal: true, 
        buttons: { 
            "Generate License": function() { 
                $g(this).dialog("close"); 
            }, 
            "Cancel": function() { 
                $g(this).dialog("close"); 
            } 
        } 
    }); 
});


The thing is that you were not appending the dialog in your html and directly displaying it. So first add it to html. Then display it.
Also set the dialog autoOpen attribute to true so that it shows up automatically.
P.S. The above code works in my D.E. org.

Screenshot

P.S. Select this as an accepted answer if it works for you

  • Saket thanks for the suggestion, I've updated the code to your specs and its still not working. I am still receiving (based on browser) undefined is not a function. – George Albrecht Jan 14 '15 at 21:04
  • I tried it in my dev org however and it is working, so I am thinking now that there is something blocking it our sandbox where I am testing – George Albrecht Jan 14 '15 at 21:09

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.