jQuery UI dialog box - uncaught exception

Question

I have the following jQuery methods in a page

<script type="text/javascript">
jQuery.noConflict();
jQuery.validator.setDefaults({
    submitHandler: function () {
        var usin = jQuery('#usin').val();
        var user = jQuery('#user').val();
        var ph = jQuery('#ph').val();
        var conductivity = jQuery('#conductivity').val();
        var hardness = jQuery('#hardness').val();
        var tds = jQuery('#tds').val();
        var turbidity = jQuery('#turbidity').val();
        var alkalinity = jQuery('#alkalinity').val();
        var chloride = jQuery('#chloride').val();

        jQuery.post("scripts/water_qual_add.php", {
            "usin": usin,
                "user": user,
                "ph": ph,
                "conductivity": conductivity,
                "hardness": hardness,
                "tds": tds,
                "turbidity": turbidity,
                "alkalinity": alkalinity,
                "chloride": chloride
        }, function (data) {
            jQuery('#dialog').dialog('open');
            return false;
            jQuery('#eff_entry').each(function () {
                this.reset();
            });
            //jQuery('#usin').focus();
        });
    }
});

jQuery(document).ready(function () {
    jQuery("#dialog-message").dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            Ok: function () {
                jQuery(this).dialog("close");
                jQuery('#usin').focus();
            }
        }
    });

    jQuery("#datepicker").datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: "dd-mm-yy",
        altFormat: "yy-mm-dd",
        altField: "#stddate"
    });
    jQuery('#usin').focus();
    jQuery("#eff_entry").validate();
    jQuery("#usin").change(function () {
        var usin = jQuery('[name="usin"]').val();
        jQuery.post("get_sample_details.php", {
            "usin": usin
        }, function (data) {
            if (data.msg) {
                // message_box.show_message(data.msg,'Please Enter a valid no.');
                alert(data.msg);
                jQuery('#usin').focus();
            } else {
                jQuery('#submit_btn').show();
                jQuery('#comment').hide();
                jQuery('#doc').val(data.date);
                jQuery('#desc').val(data.description);
                jQuery('#loc').val(data.location);
            }
        });
    });
});
</script>

And in the body of the page

<div id="content">
    <div id="welcome">Welcome&nbsp;&nbsp;
        <?php echo $_SESSION[ 'EMPNAME']; ?>
    </div>
    <div id="dialog" class="dialog" title="Water Quality Data Entry">
        <hr class="noscreen" />
        <form id="eff_entry" name="eff_entry" action="">
            <fieldset>
                <div id="rawdata">
                    <legend>Water Quality Parameters</legend>
                    <label for="usin">USIN</label>
                    <input name="usin" id="usin" type="text" class="usin" required/>
                    <br />
                    <br/>
                    <label for="ph">pH</label>
                    <input name="ph" id="ph" value='0.0' required />
                    <label for="conductivity">Conductivity</label>
                    <input name="conductivity" id="conductivity" value='0.0' required />
                    <br />
                    <label for="tds">TDS</label>
                    <input name="tds" id="tds" value='0.0' required/>
                    <br/>
                    <label for="turbidity">Turbidity</label>
                    <input name="turbidity" id="turbidity" value='0.0' required />
                    <br/>
                    <label for="chloride">Chloride</label>
                    <input name="chloride" id="chloride" value='0.0' required />
                    <br/>
                    <label for="alkalinity">Alkalinity</label>
                    <input name="alkalinity" id="alkalinity" value='0.0' required />
                    <br />
                    <label for="hardness">Hardness</label>
                    <input name="hardness" id="hardness" value='0.0' required/>
                    <label for="user">Data Entered By</label>
                    <input id="user" name="user" style="color:#FF0000; background-color:#FFFF33; font-weight:bold" onfocus="this.blur();" onselectstart="event.returnValue=false;" value="<?php echo $_SESSION['EMPNO']; ?>" />
                    <br/>
                    <br/>
                    <div align="center">
                        <input id="submit_btn" type="submit" name="submit" value="Submit" />
                    </div>
                </div>
                <div id="calculated">
                    <label for="loc">Location</label>
                    <input readonly="readonly" name="loc" id="loc" />
                    <br/>
                    <label for="desc">Type</label>
                    <br/>
                    <input readonly="readonly" name="desc" id="desc" />
                    <br/>
                    <label for="doc">Date of Collection</label>
                    <br/>
                    <input readonly="readonly" name="doc" id="doc" />
                    <br/>
                </div>
            </fieldset>
        </form>
        <div id="type2"></div>
    </div>
</div>
<!--end content -->
<!--end navbar -->
<div id="siteInfo">
    <?php include( 'footer.php');?>
</div>
<br />
</div>

But after clicking submit button, the dialog box not opening. Error console gives this message "uncaught exception: cannot call methods on dialog prior to initialization; attempted to call method 'open'".

Also I am unable to focus cursor in the USIN input box. Earlier I was trying simple alert() method in jquery post instead of modal dialog. This alert was working, but focus was not working at that time also. Hence I thought using a modal will help.

Either way, (using jQueryUI modal or alert) I want the cursor to be in the USIN input box after submitting the form. Rest of the parts are working properly including data update

Try with `jQuery('#dialog').dialog().dialog('open');`, you have to initialise the dialog for the element. — Shaunak D, Jun 23 '14 at 05:50
possible duplicate of [jquery ui Dialog: cannot call methods on dialog prior to initialization](http://stackoverflow.com/questions/13520139/jquery-ui-dialog-cannot-call-methods-on-dialog-prior-to-initialization) — Shaunak D, Jun 23 '14 at 05:52

PeterKA · Answer 1 · 2014-06-23T06:13:57.223

Change:

jQuery('#dialog').dialog('open');

To:

jQuery('#dialog').dialog();

NOTE:

By default jQuery UI dialog's autoOpen setting is set to true by default. Therefore you can both initialize and open the dialog at the same time using the second line. Once a dialog has been initialized -- whether it is via initialize + open as in the above line or via settings that set various options -- you can use the open method, as you're trying to do, to open it subsequent times.

Most people like to initialize dialogs as follows - within DOM ready:

jQuery(function() {
   //Initialize dialog 
   jQuery(".selector").dialog({
        autoOpen: false,
        modal: true,
        ......
    });

    //set up dialog opener
    $('.somebutton').on('click', function() {
        $('.selector').dialog('open');
    });
});

Here the dialog is initialized at DOM ready and it opens whenever .somebutton is clicked. Notice that button clicking always happens after initialization.

I also did the same thing. Initialized the dialog on DOM ready. And used the method open after clicking submit button. I also tried your correction but not working — mansoondreamz, Jun 23 '14 at 07:57
You initialized `#dialog-message` but not `#dialog`; each dialog has to be explicitly initialized or via a 'group selector'. — PeterKA, Jun 23 '14 at 11:35

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

0

If that is the complete HTML inside body, then you don't have any element of id dialog-message and possibly you initialised the dialog on wrong selector and hence the error when you try to open the dialog.

As per this code:

jQuery("#dialog-message").dialog({
    autoOpen: false,
    modal: true,
    buttons: {
        Ok: function () {
            jQuery(this).dialog("close");
            jQuery('#usin').focus();
        }
    }
});

you should replace the selector:

jQuery("#dialog").dialog({
    autoOpen: false,
    modal: true,
    buttons: {
        Ok: function () {
            jQuery(this).dialog("close");
            jQuery('#usin').focus();
        }
    }
});

doing this will not throw any error when you open the dialog using:

jQuery('#dialog').dialog('open');

Here is the working Demo: http://jsfiddle.net/lotusgodkk/GCu2D/193/

Modifications:

I changed the selector in jQuery('#dialog-message').dialog('open');
Added a temporary dialog div which seemed to be missing:

<div id="dialog-message">Hello</div>

And it worked fine.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 23 '14 at 06:59

K K

17,794
4
30
39

Your observation was right and I replaced the selector. Still same error – mansoondreamz Jun 23 '14 at 10:14
Can you create a fiddle for your code by replacing all the php code with some default values? – K K Jun 23 '14 at 10:21
It has nothing to do with php code. Dialog box should open after getting the post reply. All other codes in this is working except dialog. I tried to create a fiddle but failed. Any way this is the fiddle link http://jsfiddle.net/4f7sV/12/ – mansoondreamz Jun 23 '14 at 11:12
I used the script in fiddle. But still it was not working. Then I changed versions of jQuery and jQuery UI in my server. After that it is working. – mansoondreamz Jun 25 '14 at 09:13

jQuery UI dialog box - uncaught exception

2 Answers2