Диалоговое окно пользовательского интерфейса jQuery - неперехваченное исключение

У меня есть следующие методы 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. Раньше я пробовал простой метод alert() в сообщении jquery вместо модального диалога. Это оповещение работало, но в то время не работал фокус. Поэтому я подумал, что использование модального окна поможет.

В любом случае (используя модальность или предупреждение jQueryUI) я хочу, чтобы курсор находился в поле ввода USIN после отправки формы. Остальные части работают нормально, включая обновление данных


person mansoondreamz    schedule 23.06.2014    source источник
comment
Попробуйте с jQuery('#dialog').dialog().dialog('open');, вы должны инициализировать диалог для элемента.   -  person Shaunak D    schedule 23.06.2014
comment
comment
Не дубликат. Я внимательно прочитал этот вопрос и ответил.   -  person mansoondreamz    schedule 23.06.2014


Ответы (2)


Если это полный HTML внутри тела, то у вас нет элемента с идентификатором 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>

И это работало нормально.

person K K    schedule 23.06.2014
comment
Ваше замечание было правильным, и я заменил селектор. Все та же ошибка - person mansoondreamz; 23.06.2014
comment
Можете ли вы создать скрипт для своего кода, заменив весь php-код некоторыми значениями по умолчанию? - person K K; 23.06.2014
comment
Это не имеет ничего общего с php-кодом. Диалоговое окно должно открыться после получения ответа на сообщение. Все остальные коды в этом работают, кроме диалога. Я попытался создать скрипку, но не смог. В любом случае это ссылка на скрипт jsfiddle.net/4f7sV/12 - person mansoondreamz; 23.06.2014
comment
Я использовал скрипт в скрипке. Но все же это не сработало. Затем я изменил версии jQuery и пользовательского интерфейса jQuery на своем сервере. После этого работает. - person mansoondreamz; 25.06.2014

Изменять:

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

To:

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

ПРИМЕЧАНИЕ:

По умолчанию для параметра autoOpen диалогового окна пользовательского интерфейса jQuery установлено значение true по умолчанию. Поэтому вы можете одновременно инициализировать и открыть диалоговое окно, используя вторую строку. После того, как диалоговое окно было инициализировано — будь то с помощью initialize + open, как в приведенной выше строке, или с помощью настроек, которые устанавливают различные параметры — вы можете использовать метод 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 и opens всякий раз, когда нажимается .somebutton. Обратите внимание, что нажатие кнопки всегда происходит после инициализации.

person PeterKA    schedule 23.06.2014
comment
Я также сделал то же самое. Инициализирован диалог на DOM готов. И использовал метод открытия после нажатия кнопки отправки. Я также пробовал ваше исправление, но не работает - person mansoondreamz; 23.06.2014
comment
Вы инициализировали #dialog-message, но не #dialog; каждое диалоговое окно должно быть явно инициализировано или с помощью «группового селектора». - person PeterKA; 23.06.2014