Search code examples
jqueryjquery-uireactjsreact-dom

Dialog is not a function - React

I know there are a lot of questions about this already but none of them seem to match my problem.

I am creating a React component using JQuery-UI dialog It looks like this:

var VehiclePlantDialog = React.createClass({
    handleSubmit: function(e) {
      e.preventDefault();
      this.props.closeDialog();
    },
    render: function () {
        return (
            <div>
                <form>
                    <input ref="inputText" />
                    <input type="submit" />
                    <button onClick={this.props.closeDialog}>Cancel</button>
                </form>
            </div>
        );
    }
});

var VehiclePlants = React.createClass({

    openDialog: function (e) {
        e.preventDefault();

        var myDialog = $('<div>').dialog({
            title: 'Dialog example',
            width: 400,
            close: function (e) {
                React.unmountComponentAtNode(myDialog);
                $(this).remove();
            }
        });

        var closeDialog = function (e) {
            e.preventDefault();
            myDialog.dialog('close');
        };
        $(document).ready(function () {
            ReactDOM.renderComponent(<VehiclePlantDialog closeDialog={closeDialog} />, myDialog);
        });
    },
    render: function () {
        return (
            <div>
                    <button onClick={this.openDialog}>Open dialog</button>
            </div>
        );
    }
});

Having this, in my ejs file for including jquery

<% script('/scripts/jquery.js') -%>
<% script('/scripts/jquery-ui.min.js') -%>

The include works but, when I click on the open dialog button, the console says dialog is not a function while if I write it in the console it does. enter image description here

Anyone who can help me out?

Note: I am using Bower, Gulp, React, ReactDom, jquery, jquery-ui

Solution

  • I think the problem is with the selector

    $('<div>').dialog({

    try to inspect $('') from the developer tools.

    might be this should work

    $("<div>My div content</div>").dialog({

    EDIT Yes you are correct. But there is no problem with you code. It is already working fine.

    Please check this fiddle