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

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

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

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

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

Кнопка отправки Script:

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();
}

Uploadify 'On Complete':

'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 программно закрывает теневой блок и на родительской странице создается небольшой 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. Скриншоты цвета div выше были сделаны с использованием Safari, где у меня нет проблем, что бы это ни было.

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

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

Ответ 1

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

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

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

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

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

Обновление от Question Asker относительно реализации решения:

На всякий случай кто-то сталкивается с подобными проблемами. Возможное решение было связано с тем, что я манипулировал 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

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

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

Ответ 2

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

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

Ответ 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>

Ответ 4

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

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