jQuery UI 对话框 - 未捕获的异常

Question

我在一个页面中有以下 jQuery 方法

<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>

在页面正文中

<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>

但是点击提交按钮后，对话框打不开。错误控制台给出此消息“未捕获的异常：无法在初始化之前调用对话框上的方法；试图调用方法‘打开’”。

我也无法将光标聚焦在 USIN 输入框中。早些时候，我在 jquery post 中尝试了简单的 alert() 方法，而不是模式对话框。此警报有效，但当时焦点也不起作用。因此，我认为使用模态会有所帮助。

无论哪种方式，（使用 jQueryUI 模态或警报）我希望在提交表单后光标位于 USIN 输入框中。其余部分工作正常，包括数据更新

Answer 1

如果这是正文中的完整 HTML，那么您没有任何 id 为 dialog-message 的元素，并且您可能在错误的选择器上初始化了 dialog，因此当您尝试 open 对话框时出现错误。

按照这段代码：

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

你应该替换选择器：

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

当您使用以下命令打开对话框时，这样做不会引发任何错误：

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

这里是工作演示：http://jsfiddle.net/lotusgodkk/GCu2D/193/

修改：

1. 我更改了jQuery('#dialog-message').dialog('open');中的选择器

2. 添加了一个似乎丢失的临时对话框 div：

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

而且效果很好。

Answer 2

变化：

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

收件人：

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

注意：

默认情况下，jQuery UI 对话框的autoOpen 设置默认设置为true。因此，您可以使用第二行同时初始化和打开对话框。一旦对话框被初始化——无论是通过上面行中的初始化+打开还是通过设置各种选项的设置——你可以使用open方法，就像你试图做的那样，打开它随后的时间。

大多数人喜欢如下初始化dialogs - 在DOM ready内：

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

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

这里的对话框初始化为DOM ready，每当单击.somebutton 时，它都会初始化为opens。请注意，按钮点击总是发生在初始化之后。