JqueryUi Dialog giving Uncaught TypeError: this._addClass is not a function error

Question

I have a site we needed some custom php coding to connect to an external database to grab product review urls for several vendors that sell our products. The basic idea we are trying to accomplish is to have the user register their product and then extend their warranty if they are willing to leave a review. I'm using xyzscripts.com's "Insert PHP" plugin to accomplish this. The theme initially had only jQuery loaded so as to keep from creating a child theme we are loading jQueryUI in the php script. So we have jQuery loaded in the header and jQueryUI loaded in the body of the document. Im not quite sure if this is being caused because of the order the scripts are being loaded or if some other conflicting javascript is causing the error. You can see the error in the image below.

Chrome's Console Output On Calling The Dialog

Relevant Code

<script>
jQuery.ajax({
    type: 'GET',
    url: "<?=$ajax_handler?>?method=check_warranty&model="+model,
    success: function(response) {
        if (response == '')
            duration = '6';
        else
            duration = response;

        jQuery('#warranty_length').val(duration);

        jQuery('#warranty_dialog').dialog({
            width:'700px',
            height:'408px',
            position:'absolute',
            top:'300px'
        }).html("HTML TO DISPLAY REVIEW LINK BUTTON");
        jQuery('.titlebar-close').hide();
    }
});
</script>

As you can see the code is pretty straightforward. After the user fills out the form I make an ajax call that queries our database with the Model and Vendor to get the appropriate review link for that product and then creates a link to the review page for that Vendor and Model.

I'm trying to determine if the error is being caused by one of three things.

1. There is an issue with the order jQuery & jQueryUI are being loaded.
2. There is an issue with my code (I have successfully used this script on some of our other sites).
3. If there's possibly other javascript in the theme that is conflicting with my script.

I can provide any other relevant code you need on the php script if necessary. The url to page is:

http://www.kriegermfg.com/register-test/

Any help will be greatly appreciated.

Edit Just to give some further context this is jQueryUI is failing.

Answer 1

Your JS looks to be written inline vs. in its own JS file or at least enqueued on its own. In other words, it doesn't look like its being loaded properly re WordPress.

Note the WP function wp_enqueue_script() has a dependency parameter where you can pass an array of script handles (as registered via wp_register_script()). The parameters of this function helps you ensure that you load header + footer scripts in the desired location (header vs. footer) and desired order.

Docs:

https://developer.wordpress.org/reference/functions/wp_enqueue_script/ https://developer.wordpress.org/reference/functions/wp_register_script/

In the JS itself, make use of $( document ).ready():

http://learn.jquery.com/using-jquery-core/document-ready/

Your code is sitting in the markup before JQuery UI is loaded, which is a potential issue right there to resolve. If it was in its own file and properly enqueued in your theme's functions.php (or by a site plugin) then it could specify JQuery UI's handle as a dependency and WordPress will always load it after.

If you still have issues I would also disable your other plugins + any other bits of JS you've tossed in there (temporarily) to see if you can get this to work. If so, you could re-enable them one-by-one to identify the culprit.

It also looks like both Contact Form 7 and your theme/plugins are loading JQuery UI, and both depend on date pickers, etc. Contact Form 7's core is loading before the JQuery UI (and loading its other JQuery UI dependencies after) but I don't have enough experience with that plugin to know off-hand if that is a potential source of issues (it might also be something to look into).

Answer 2

I got here debugging the same error on my WP installation. The previous answer was for developer of plugin/theme, so being an admin, I needed a little different approach. I had to find the source of the problem myself.

As I learned here I used following line in my config.php to get unminified version of Javascript sources.

define('SCRIPT_DEBUG', true);

TL;DR In browser I then caught the file to be failing as sotrtable.js. Then I went to my hosting server and searched the wordpress root directory for it using the silver searcher: ag -l sortable. There I noticed that in wp-content/themes/OurCustomTheme/functions.php there is a call of wp_enqueue_script('jquery-ui', '//code.jquery.com/ui/1.11.4/jquery-ui.js', array(), '20120206') pulling a fixed version of jQuery ui from CDN. I replaced it with wp_enqueue_script('jquery-ui-core') which is current version of the lib that comes along with WordPress installation and is imported in wp-includes/script-loader.php.

I'm describing the whole problem to show others, what kind of resolution process is ahead of them, when they bump into such Javascript exception caused by theme or plugin pulling incorrect version of some JS sources and overriding the correct one.

Answer 3

The jQuery Migrate Helper fixed it. I’ll troubleshoot which plugin is causing the issue later.