jQuery dialog box not loading

  • Can’t seem to get a jQuery dialog box to open. Here is the code, which I have broken out into a separate HTML page (not using the WP enqueue method):

    <html>
<head>
	<script type='text/javascript' src='https://[mydomain]/wp-includes/js/jquery/jquery.js?ver=1.11.3'></script>
</head>
<body>

	<div id="dialog" title="Basic dialog">Here is my dialog box</div>
	<script>
		jQuery(document).ready(function($){
			$( "#dialog" ).dialog();
		});
	</script>

</body>
</html>

    The error is: Uncaught TypeError: $(…).dialog is not a function

    If I try to add the jquery ui dialog code:

    <html>
<head>
	<script type='text/javascript' src='https://[mydomain]/wp-includes/js/jquery/jquery.js?ver=1.11.3'></script>
	<script type='text/javascript' src='https://[mydomain]/wp-includes/js/jquery/ui/dialog.min.js'></script>
</head>
<body>

	<div id="dialog" title="Basic dialog">Here is my dialog box</div>
	<script>
		jQuery(document).ready(function($){
			$( "#dialog" ).dialog();
		});
	</script>

</body>
</html>

    I get the errors:

    Uncaught TypeError: a.widget is not a function
    Uncaught TypeError: $(…).dialog is not a function

    Please let me know the way forward,

    ted

Viewing 2 replies - 1 through 2 (of 2 total)

  • Ted, have you tried including the ui core, and widget scripts. You can find a list of dependencies here: https://api.jqueryui.com/dialog/

    Thread Starter screener

    (@screener)

    Adding core, widget and button to the dialog worked, thanks:

    <html>
<head>
	<script type='text/javascript' src='https://[...]/wp-includes/js/jquery/jquery.js?ver=1.11.3'></script>
	<script type='text/javascript' src='https://[...]/wp-includes/js/jquery/ui/core.min.js'></script>
	<script type='text/javascript' src='https://[...]/wp-includes/js/jquery/ui/widget.min.js'></script>
	<script type='text/javascript' src='https://[...]/wp-includes/js/jquery/ui/button.min.js'></script>
	<script type='text/javascript' src='https://[...]/wp-includes/js/jquery/ui/dialog.min.js'></script>
</head>
<body>

	<div id="dialog" title="Basic dialog">Here is my dialog box</div>
	<script>
		jQuery(document).ready(function($){
			$( "#dialog" ).dialog();
		});
	</script>

</body>
</html>

    Honestly not sure whether I will do this, so messy. It does work to enqueue these files as follows, fwiw:

    wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-ui-widget');
wp_enqueue_script('jquery-ui-button');
wp_enqueue_script('jquery-ui-dialog');
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘jQuery dialog box not loading’ is closed to new replies.