#jquery dialog is not a function

Question

Following the indications found here: Jquery dialog dialog is not a function

I imported and used jQuery in my Electron-React-Typescript-Webpack app as follows:

import jQuery from 'jquery';

let jj = jQuery.noConflict();


  jj(document).ready(function () {
    jj('#new-contact').click(function (ev) {
        jj('#contact_dialog').dialog('open');
    });
  });

but still I get the error: TypeError: jj(...).dialog is not a function

@types/jquery: ^3.5.5
@types/jqueryui: 1.12.15
jquery: ^3.6.0
node: v14.17.0
webpack: ^5.23.0

How to solve the problem?

Looks like you imported jquery twice. With the 3.6.0 *after* jquery ui 1.12.15. Only include it once, and make it first. Importing again will overwrite any plugins (ie remove jqueryui) — freedomn-m, Jun 29 '21 at 15:17
Yeah. That post had `` at the top, so you need to import jquery-ui however you're supposed to do it with ES6+ import statements — Samathingamajig, Jun 29 '21 at 15:18
Hi all! Thank you very much for your kind help. I installed jquery-ui: ^1.12.1 and imported as `import jqueryui from 'jquery-ui';` Do I have to do do something else? — Raphael10, Jun 29 '21 at 15:34
@freedomn-m This is what I have done: `import jQuery from 'jquery'; import jQueryUI from 'jquery-ui'; let jj = jQuery.noConflict();` . Did I import jquery twice? — Raphael10, Jun 29 '21 at 15:39
No idea, not a node developer, but your bulleted list that you provided has jquery ^3.5.5 and jquery ^3.6.0. What's the bulleted list represent in your question? — freedomn-m, Jun 29 '21 at 15:43
@freedomn-m The bullet list in my question represents the packages installed and thus present in `package.json` file — Raphael10, Jun 29 '21 at 15:48
So you are installing jquery "package" twice... does it also represent the order they're installed? Remove the second jquery should fix your issue. — freedomn-m, Jun 29 '21 at 15:51
I solved following these two indications: 1) https://stackoverflow.com/questions/38836553/how-to-use-jquery-ui-with-react-js 2) https://stackoverflow.com/questions/13520139/jquery-ui-dialog-cannot-call-methods-on-dialog-prior-to-initialization . Thank you guys for your kind hints. — Raphael10, Jun 29 '21 at 16:01

score 0 · Answer 1 · answered Jun 29 '21 at 16:04

I solved following these two indications:

How to use jQuery UI with React JS

jquery ui Dialog: cannot call methods on dialog prior to initialization .

import jQuery from 'jquery';
//import 'jquery-ui';
import 'jquery-ui-bundle';
import 'jquery-ui-bundle/jquery-ui.min.css'
let jj = jQuery.noConflict();

  jj(document).ready(function () {

    jj('#new-contact').click(function (ev) {
        jj('#contact_dialog').dialog().dialog('open');
    });
  });

Thank you guys for your kind hints.

#jquery dialog is not a function

1 Answers1