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

Resolved

(@milene)

Hello,

I try to open a pdf file on a dialog with jQuery with a click function on a link. But I have this error : TypeError: $(…).dialog is not a function.

I looked for in all forums but I have still this error. I’m just a beginner with jQuery.

Here is my code :

wp_register_script('jquery-ui', get_template_directory_uri() . '/js/jquery-ui.js', array('jquery'), '1.0.0'); // Custom scripts
wp_enqueue_script('jquery-ui'); // Enqueue it!

wp_register_script('jquery-ui-min', get_template_directory_uri() . '/js/jquery-ui.min.js', array('jquery'), '1.0.0'); // Custom scripts
wp_enqueue_script('jquery-ui-min'); // Enqueue it!

<script language="javascript" type="text/javascript">
  $(document).ready(function() {

  	var dialogPdf = $("#dialog").dialog({ autoOpen: false });

    $('#trigger').click(function(e){
        dialogPdf.dialog('open');
        return false;
    });
  });
</script>

<div id="dialog" class="dialog" style="display:none">
	<?php
	$file = get_field('livret_pdf');
	if( $file ): ?>
	    <div>
	    	<iframe src="<?php echo $file['url']; ?>"></iframe>
	    </div>
    <?php endif; ?>
</div>

When I put dialog on display: block or other, I can see the pdf perfectly. It’s a jquery problem.

Thanks for your help,

Milene

https://ww.wp.xz.cn/plugins/jquery-ui-widgets/

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

Plugin Author David Gwyer
(@dgwyer)

10 years, 1 month ago
Hi Milene,

The ‘jQuery UI Widgets’ plugin simply adds the scripts you want to your site as well as the custom jQuery code you enter in plugin options.

Are you using the plugin to add the dialog scripts to your site? Also, try using this wrapper for your jQuery code instead:
```
jQuery(document).ready(function($) {
  // Add jQuery code here...
});
```
If you are still stuck you can contact me (via my profile info) for further assistance.

David
Thread Starter milene
(@milene)

10 years, 1 month ago
Hi David,

Thanks for you reply.

I downloaded the custom file from this website http://jqueryui.com/download/ and check that the file contained the dialog widget, dialog.js.

By saying “using the plugin” you mean if the librairy is well included in my website ?

I called the file in function.php :
```
wp_register_script('jquery-ui', get_template_directory_uri() . '/js/jquery-ui.js', array('jquery'), '1.0.0'); // Custom scripts
wp_enqueue_script('jquery-ui'); // Enqueue it!

wp_register_script('jquery-ui-min', get_template_directory_uri() . '/js/jquery-ui.min.js', array('jquery'), '1.0.0'); // Custom scripts
wp_enqueue_script('jquery-ui-min'); // Enqueue it!
```
Also, I tried to replace
$(document).ready(function() {
By your code (I already tried it)
`
jQuery(document).ready(function($) {

var dialogPdf = $(“#dialog”).dialog({ autoOpen: false });

$(‘#trigger’).click(function(e){
dialogPdf.dialog(‘open’);
return false;
});
});
Thread Starter milene
(@milene)

10 years, 1 month ago

Sorry mishandling. Here is the rest of my message :

I tried the code you gave me, but still nothing. Any idea ?

Plugin Author David Gwyer
(@dgwyer)

10 years, 1 month ago

Have you tried just using the ‘jQuery UI Widgets’ plugin to load the jQuery dialog scripts, and add your jQuery to plugin options?

If not I’d recommend you try that next (remove all your other custom jQuery code you previously added).

Then you could just add the HTML for the dialog to a WordPress page and it should all work.
Thread Starter milene
(@milene)

10 years, 1 month ago
Yes I tried to load only the widgets I needed with the custom download (core.js, widget.js, mouse.js, position.js, draggable.js, resizable.js, button.js, dialog.js) but I have still the error.

I don’t know what to do.

The HTML dialog is already on a wordpress page. But not working.
```
<?php /* Template Name: Vision 2020 */ ?>
<?php get_header('cofely-display'); ?>

<script language="javascript" type="text/javascript">
	jQuery(document).ready(function($) {

		var dialogPdf = $("#dialog").dialog({ autoOpen: false });

		$('#trigger').click(function(e){
			dialogPdf.dialog('open');
			return false;
		});
	});
</script>

<div id="dialog" class="dialog" style="display:none">
	<?php
	$file = get_field('livret_pdf');
	if( $file ): ?>
	    <div>
	    	<iframe src="<?php echo $file['url']; ?>"></iframe>
	    </div>
    <?php endif; ?>
</div>
```
Maybe a conflict somewhere ? Is it possible ?
Plugin Author David Gwyer
(@dgwyer)

10 years, 1 month ago

I meant have you tried ONLY using my ‘jQuery UI Widgets’ plugin to add the required scripts rather than adding them yourself?

If you use my plugin you can also add the code to initialize the dialog when the trigger is clicked.

This is a bit outside the scope of free plugin support. If you still cannot get it to work please feel free to contact me via my profile info.

Plugin Author David Gwyer
(@dgwyer)

9 years, 1 month ago

Marking as resolved due to lack of response.

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

The topic ‘TypeError: $(…).dialog is not a function’ is closed to new replies.

Tags