JQuery "Aw Snap!" в Chrome, но не сбой любого другого браузера

Question

У меня возникли трудности с управлением страницей администрирования, где я постоянно получаю 'Aw Snap' в Chrome.

У меня есть страница администрирования товаров, где вы можете добавлять новые продукты на сайт.
Если пользователь выбирает «футболку» в качестве типа продукта, появляются некоторые новые параметры. А именно размер и цвет.

Размер - это просто поле множественного выбора, но нажатие на «Добавить цвет» инициализирует блок теней.

Теневой ящик позволяет пользователю ввести имя для цвета и выбрать шестнадцатеричный цвет (с помощью плагина Wheel Color Picker ) и загрузить репрезентативное изображение (с помощью Uploadify ). При отправке сценарий Uploadify загружает файл, а затем по завершении сценарий отправляет другую информацию о цвете в базу данных через JQuery AJAX.

Сценарий кнопки отправки:

function add_colour_submit(){
    $('#admin-add-colour-response').text('Processing...').fadeIn(1000);
    $('#admin-add-colour-image').uploadifySettings('scriptData', {
        'title': $('#admin-add-colour-title').val(),
        'hex': $('#admin-add-colour-hex').val(),
        'gender': $('#admin-add-colour-gender').val()
    });
    $('#admin-add-colour-image').uploadifyUpload();
}

Выгрузить «Завершено»:

'onComplete': function (event, ID, fileObj, response, data) {
    $("#admin-add-colour-response").fadeTo(200,0.1,function(){
        $("#admin-add-colour-response").html('Complete.').fadeTo(900,1,
            function()
            {
                var responseArray = response.split(',');
                var id = responseArray[0];
                var title = responseArray[1];
                var hex = responseArray[2];
                var gender = responseArray[3];
                parent.get_colour(id, title, hex, gender);
            });
        });
    }

Когда операция AJAX завершена, в сообщении обратной связи отображается «Complete».
По истечении этого времени код JQuery программно закрывает shadowbox, и на родительской странице создается небольшой div для представления представленного цвета.

Потенциал для добавления нескольких с использованием этого метода.

Функция получения цвета:

function get_colour(id, title, hex, gender){
    $('#sb-nav-close').click(); //trigger shadowbox close
    //create colour object div
    var colourObject = '<div class="colourObject"><div class="colourPreview" style="background:#'+hex+'"></div><div class="colourInfo"> '+title+' / '+gender+'</div><div class="colourRemove"><a href="#" onclick="remove_colour('+id+')">x</a></div</div>'
    var currentList = $('#colour-list').html();
    $('#colour-list').html(currentList+colourObject);

    //re-initialise any shadowbox links in the page
    Shadowbox.init({
        skipSetup: false
    });
    Shadowbox.setup();
}

Моя проблема в том, что во время вышеупомянутой функции, возможно, во время закрытия shadowbox, я получаю Aw Snap в Chrome. Снимки экрана с вышеприведенным цветовым блоком были сделаны с использованием Safari, и у меня нет никаких проблем.

У меня есть несколько плагинов (shadowbox, колесо выбора цвета, uploadify, jquery), поэтому их столкновение может вызвать ошибку?

Update.
Мне только что удалось протестировать это в еще нескольких браузерах, и это определенно проблема, связанная только с Chrome.

Answer 1

Я бы прошел через эту функцию get_colour и начал бы удалять вещи по одному, начиная с повторной инициализации вашего Shadowbox.Существует вероятность того, что инициализация / настройка дважды приведет к его поломке.

Если комментирование вызовов .init и .setup действительно устраняет сбой, я бы тогда начал изучать, как полностью удалить (или де-инициализировать) ваши Shadowboxes перед их повторной инициализацией.

Если это не исправит это, я продолжу двигаться вверх через эту функцию, удаляя код, пока вы не сможете остановить его сбой.

Кроме того, закрытие shadowbox, вероятно, скажет ему сделатькуча закулисной работы (удаление элементов dom и всего, что Shadowbox делает глубоко внутри своего ядра JS).Возможно, проблема в том, что вы закрываете его, а затем говорите, что инициализировать слишком рано, и Chrome все еще держится за ссылку на (еще не закрытый) лайтбокс.

Чтобы проверить / исправить это,попробуйте полностью перевести вызовы init и setup в другую функцию и вызывайте ТОЛЬКО, когда вы вручную нажимаете на тестовую ссылку на своей странице.Сначала убедитесь, что ваша get_colour функция запускается и успешно завершается.Если это работает, то вы знаете, что это проблема, и что вам нужно немного подождать, прежде чем вызывать .init и .setup.Возможно, вы можете вызвать эти два метода во время события onClose в Shadowbox ... или где-нибудь еще позже в вашем коде.

Обновление от Вопроса Аскера относительно реализации решения:

На всякий случай, если кто-нибудь ещесталкивается с подобной проблемой.Возможное решение состояло в том, что я манипулировал DOM с помощью вызова .html (), в то время как вызов .click (), казалось, все еще находился в работе.

Решение потребовало от меня поставить .click () ПОСЛЕВызов .html (), как и раньше, работал.

//create colour object div
var colourObject = '<div class="colourObject"><div class="colourPreview" style="background:#'+hex+'"></div><div class="colourInfo"> '+title+' / '+gender+'</div><div class="colourRemove"><a href="#" onclick="remove_colour('+id+')">x</a></div</div>'
var currentList = $('#colour-list').html();
$('#colour-list').html(currentList+colourObject);

$('#sb-nav-close').click(); //trigger shadowbox close

Теперь он работает безупречно во всех браузерах.

Полагаю, урок здесь состоит в том, чтобы не обрабатывать слишком много за один раз, яперегружен браузер внешностью вещей.

Answer 2

Смотрите эту страницу, которая описывает "Aw Snap!"страница: http://www.google.com/support/chrome/bin/answer.py?answer=95669

Обычно это вызвано тем, что на компьютере недостаточно памяти.Возможно, ваше приложение использует слишком много ресурсов.Попробуйте набрать изображения и JavaScript и использовать только столько, сколько вам нужно.

Answer 3

Следующее будет последовательно генерировать сообщение «Aw Snap» в Chrome, но отлично работает в Firefox и Safari:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" id="haemosphere">
  <head>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>    
    <script type="text/javascript">

    $(function() {

    $("#user-action-div").on("click", function(ev, ui) {
            $(this).empty().append("<select id='user-action-sel'>");
        $('select', this).append("<option value='nop' selected='selected'>Rugby</option>");
        $('select', this).append("<option value='profile'>My Profile</option>");
        $('select', this).append("<option value='logout'>Log Out</option>");
        $("select", this).trigger("create");
    });

    });

    </script>
  </head>
  <body>
    <span id="user-action-div">Click Here</span>
  </body>
</html>

Answer 4

Если это проблема, связанная с Chrome, попробуйте отправить ее в Chromium Bug Tracker (см. Где я могу найти и отправить отчеты об ошибках в браузере Google Chrome? ) или, по крайней мере, посмотреть, есть ли подобные проблемыСуществуют.

Возможно, предоставьте им минимальную страницу, где возникает эта проблема (например, создание фиктивной страницы с использованием jsfiddler )