JQuery 'Aw Snap!' in Chrome but not crashing any other browser

Question

I'm having some difficulty with managing an administration page, where I constantly get an 'Aw Snap' in Chrome.

I have a 'merchandise' administration page where you can add new products to the website.
If the user selects 'T-shirt' as the product type, some new options appear. Namely size and colour.

Size is just a multiple select box but clicking on 'Add Colour' initialises a shadowbox.

The shadowbox allows the user to input a name for the colour and choose a hex colour (via the Wheel Colour Picker plugin) and upload a representative image (via Uploadify). On submission the Uploadify script uploads the file and then upon completion script sends the other colour information to the database via JQuery AJAX.

Submit Button 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);
            });
        });
    }

When the AJAX operation is complete, a feedback message shows 'Complete'.
After this time, the JQuery code closes the shadowbox programatically and on the parent page, a small div to represent the submitted colour is created.

Potential to add multiple using this method.

Get Colour Function:

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

My issue is that during the above function, perhaps during the closing of the shadowbox, I get an Aw Snap in Chrome. The screenshots of the colour div above were made using Safari where I have no problems what so ever.

I have several plugins (shadowbox, wheel colour picker, uploadify, jquery) so could a clash of these be causing the error?

Update.
I've just managed to test this in a few more browsers, and it's definitely a problem associated only with Chrome.

Answer 1

I would go through that get_colour function and start removing things one at a time, starting with the re-initialization of your Shadowbox. There's a chance that initializing / setting it up twice is breaking it.

If commenting out the .init and .setup calls DOES fix the crash, I would then start looking into how to completely remove (or de-initialize) your Shadowboxes before re-initializing them.

If it does not fix it, I would continue to move upwards through that function, removing code until you can stop it from crashing.

Also, closing the shadowbox probably tells it to do a bunch of work behind the scenes (removing dom elements, and whatever else Shadowbox does deep within it's JS core). Perhaps the issue is that you're closing it, and then telling it to initialize too soon, and Chrome is still holding on to a reference to the (not yet closed) lightbox.

To test / fix this, try moving the init and setup calls to another function entirely, and ONLY call that when you manually click a test link on your page. Make sure your get_colour function runs and finishes successfully first. If it works, then you know that this is the issue, and that you need to wait a bit longer before calling .init and .setup. Maybe you can call these two methods during the Shadowbox's onClose event instead... or somewhere else later in your code.

Update from Question Asker regarding implementation of solution:

Just in case anyone else runs into similar trouble. The eventual solution was because I was manipulating the DOM with the .html() call whilst the .click() call seemed to still be in the works.

The solution required me to put the .click() AFTER the .html() call as previously worked.

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

It now works flawlessly in all browsers.

I suppose the lesson here is to not process too much at any one time, I overloaded the browser by the looks of things.

Answer 2

See this page which describes the "Aw Snap!" page: http://www.google.com/support/chrome/bin/answer.py?answer=95669

This is normally caused by the computer running low on memory. It may be that your application uses too many resources. Try dialing down the images and javascript and only use as much as you need.

Answer 3

The following will consistently generate the "Aw Snap" message on Chrome, but works fine on Firefox and 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

If it is a Chrome related issue, you should try submitting it to Chromium Bug Tracker (see Where can I find and submit bug reports on Google's Chrome browser? ) , or at least see if similar issues exist.

Maybe provide them with the minimal page where this issue arises (creating for instance a dummy page using jsfiddler)