WordPress JQuery: “Uncaught TypeError: $(…).dialog is not a function”

Problem:

You’ve added JQuery dialog boxes to your WordPress page, and you added the following to $(document).ready(function()... in your JQuery file.

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

Now your Chrome debugger complains about: Uncaught TypeError: $(…).dialog is not a function

Reason:

Your JQuery file needs /wp-includes/js/jquery/ui/dialog.js which is not loaded.

Solution:

To add dialog.js as a dependency to your JQuery file.

• Find dialog.js in https://developer.wordpress.org/reference/functions/wp_register_script/#core-registered-scripts. From the table, the handle for dialog.js is jquery-ui-dialog
• Now go to the your PHP file and find the function that loads your JQuery file:

  wp_enqueue_script('my-ajax-script-file', '/../MyJQueryFile.js', 
       array('jquery'));

• Change it to:

  wp_enqueue_script('my-ajax-script-file', '/../MyJQueryFile.js', 
       array('jquery', 'jquery-ui-dialog'));

By adding jquery-ui-dialog to the array, your file now depends on it. Now when you click on View Source, dialog.js is included and the error is gone.