jQuery.dialog () глюк пользовательского интерфейса в IE9 - PullRequest
0 голосов
/ 12 апреля 2019

Я реализовал простой модальный диалог jQuery UI (1.9.2), который будет отображать форму, когда пользователь нажимает.Он работает, как и ожидалось, во всех современных браузерах.В IE8 это не удается.В IE9 он работает только после 1-го открытия инструментов разработчика (то есть нажатия клавиши F12).В частности, откроется диалоговое окно, но оно не закроется.

Наверняка, возникает ошибка сценария, которая не всплывает на консоль, потому что у меня есть проверка при отправке формы, которая также не запускается.Пожалуйста, порекомендуйте.Я могу жить без поддержки IE8, но тот факт, что он работает для IE9 только после открытия инструментов разработчика (даже после его закрытия), действительно озадачивает меня.

Ссылка на форму кода (3-я страница в): https://www.panelistsurvey.com/se/6321D147384607F3

Целевая страница - просто нажмите Далее

Страница 1 - выберите Да

Страница 2 - выберите 1

Страница 3 - это гдемодальный должен появиться, когда вы установите флажок кошка.

function LoadPage() {
    $('html').addClass('hidden');
    var isTestMode = ['%[TestMode]Q11LBL%'].toString().toLowerCase() === 'true';
    var css = $('<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">');
    var force_ie9 = $('<meta http-equiv="x-ua-compatible" content="IE=9" />');
    css.appendTo($('head:first'));
    if ($('html').attr('class').match(/ie9/gi)) {
        force_ie9.appendTo($('head:first'));
    }
    $.getScript("https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js").done(function(script, textStatus) {
        $('.ncp_img').addClass('edit').css('z-index', '50');

        $('.animal_container').each(function(index, element) {
            var dialog_title = "Cat " + (index + 1).toString();
            var handler = $('.question:first input[id]').filter(function(input_index, input_element) {
                return ToInt($(input_element).attr('id').split('_').pop()) === ToInt(index + 1);
            });
            var edit_button = $('<insert class="edit">Please select to enter information.</insert>');
            var status_icon = $('<insert class="alert"></insert>');
            var not_ready_img = $('<img src="https://www.panelistsurvey.com/static/15.1/images/warning.png" />');
            var ready_img = $('<img class="green-check" src="/AppData/1663160647/Group%20Media/green-check.jpg" />');

            $(element).dialog({
                autoOpen: false,
                modal: true,
                title: dialog_title,
                maxWidth: 450,
                minHeight: 600,
                closeOnEscape: false,
                position: {
                    my: "left top",
                    at: "left top",
                    of: $(window)
                },
                resize: function(event, ui) {
                    return false;
                },
                buttons: [{
                        text: "Save",
                        click: function() {
                            $(element).dialog('close');
                        }
                    },
                    {
                        text: "Cancel",
                        click: function() {
                            $(element).dialog('close');
                        }
                    }
                ],
                open: function(event, ui) {
                    setTimeout(function() {
                        if (ToInt($('.ui-dialog:visible').length) > 0) {
                            $(".ui-dialog:visible").position({
                                my: "left top",
                                at: "left top",
                                of: $(window)
                            });
                        }
                    }, 50);
                },
                beforeClose: function(event, ui) {
                    var cat_name = $.trim($(element).find('[type="text"]').val()).length > 0;
                    var cat_info = $(element).find('select').filter(function(select_index, select_element) {
                        return $(select_element).val() > 0;
                    }).length === $(element).find('select').length;
                    console.log('Cat name: ' + cat_name);
                    console.log('Cat info: ' + cat_info);
                    if ((cat_name === true) && (cat_info === true)) {
                        $(status_icon).html(ready_img);
                        //return false; 
                    } else {
                        $(status_icon).html(not_ready_img);
                    }
                }
            }); // close dialog setup 

            $(handler).on('change', function(evt) {
                if ($(evt.target).is(':checked')) {
                    $(element).dialog('open');
                }
            }); //close event handler 

            //Force checkbox 
            $(handler).on('change', function(evt) {
                if ($(evt.target).is(':checked') === false) {
                    $(evt.target).closest('.response').addClass('checked');
                    $(evt.target).attr('aria-checked', true).prop('checked', true).change();
                }
            }); //close event handler 

            $(status_icon).html(not_ready_img);

            $(handler).closest('.response').find('label').append(status_icon);
            $(handler).closest('.response').find('label').append(edit_button);

        }); //close iteration 
        $('html').removeClass('hidden');
    }).fail(function(jqxhr, settings, exception) {
        //$( "div.log" ).text( "Triggered ajaxError handler." ); 
    });

} //close LoadPage() 

function ProcessSubmit() {
    var filled_count = $('.green-check').length;
    var input_count = $('[id]').filter(function(index, element) {
        return $(element).attr('id').toLowerCase().match(/_wrapper/gi);
    }).first().find('input[id]').length;

    var cat_name_proxy = $('.cat_name_proxy').closest('.question').find('textarea');
    var name_array = [];
    var input_fields = $('.brand_name').closest('.question').find('[type="text"]').filter(function(text_input, text_element) {
        return $.trim($(text_element).val()).length > 0;
    });
    input_fields.each(function(index, element) {
        name_array.push($(element).val());
        name_array = RandomizeArray(name_array);
    });

    if (name_array.length) {
        $(cat_name_proxy).val(name_array[0].toString());
    }

    console.log('test');

    if (filled_count !== input_count) {
        alert('Please fill in the details for each cat.');
        return false;
    }

} //close ProcessSubmit() 
...