IE 7 "stop running this script" error using jQuery

Question

I can't seem to find what is causing this error in IE 7 works in Chrome. When loading my page in internet explorer it pops up the error "stop running this script message". Any ideas?

 $(document).ready(function() {
    var icons = {
    header: "ui-icon-circle-plus",
    headerSelected: "ui-icon-circle-minus"
    };  

   $('.ui-accordion').accordion({
   active: false,
   collapsible: true,
   autoHeight: false,
   icons: icons
   });

   $("a").click(function (event) {
    event.stopPropagation();
   });

   $('.requirementCheckBox').click(function() {
     getReq();
   });
 });


function getReq() {

  var componentList;
  var selected = $(":checkbox:checked");

  if(selected.length ==0){
    $('#requirements_table_wrapper').remove();
  }

  else {
    $.each(selected , function(i, n){

    if(i == 0){
      componentList = n.value;
    }
    else{
      componentList += ',' + n.value;
    }
 });


$.getJSON("addRequirements/GetRequirements/?componentList=" + componentList, function    (data) {

  $('#requirements_table_wrapper').remove();

    var reqString = '<table id="requirements_table"><thead><tr><th>Requirement ID</th><th>Requirements</th><th>Reference</th></tr></thead><tbody>';

    for (var i = 0; i < data.length; i++) {
      reqString += '<tr><td>'+ data[i].reqID  + '</td><td>' + data[i].reqText + '</td>' + '<td>' + data[i].reqReference + '</td></tr>';
    }

    reqString += '</tbody></table>';

    $("#requirementsDiv").append(reqString);

    $("#requirements_table").dataTable({
        "bJQueryUI": true,
        "bPaginate": false,
        "bRetrieve": true,
    "oLanguage": {"sSearch" : "Filter Requirements:"}
    });

  });
}

}

I don't immediately spot any infinite loops but maybe I have been staring at it too long.

**UPDATE The problems seems to be with the accordion, once it is removed IE loads the page normally.

Try `$("#requirementsDiv").html(reqString);` instead of `.append`. I recommend using this, especially when the div is empty before appending. — Rob W, Nov 01 '11 at 21:03
I asked a similar question and I was also using accordion, so http://stackoverflow.com/questions/6006406/what-can-i-do-to-optimize-my-ajax-application-for-ie7-ie8-in-order-to-avoid-sto if it helps! — meder omuraliev, Nov 01 '11 at 21:11
@RobW this could be the answer, please consider posting this as an answer. `append` has to create many document fragments and this could take a while. — topek, Nov 01 '11 at 21:13
@meder ,it looks like the accordion is the problem. what did you end up doing as I didn't see you select an answer on your post. — marknery, Nov 02 '11 at 15:33

score 4 · Answer 1 · answered Nov 01 '11 at 21:19

Use $("#requirementsDiv").html(reqString); instead of the .append() method.

$elem.html(string) is equivalent to elem.innerHTML = string.
$elem.append(string) first converts the string to a DOM element, then appends the elements to the HTML using the DOM .appendChild() methods.

Since you're executing the code at page load, it's very likely that the contents of the div is empty. If the div is not empty, but doesn't contain event-handlers and such, also use .html():

var $elem = $("#requirementsDiv");
$elem.html($elem.html() + reqString);

score 1 · Answer 2 · answered Nov 01 '11 at 21:06

One immediate place where I see room for improvement is where you are concatinating your reqString using + and +=. Don't do that, instead push each piece onto an array and then join the array on "", and then append to your doc.

var reqString = ['<table id="requirements_table"><thead><tr><th>Requirement ID</th><th>Requirements</th><th>Reference</th></tr></thead><tbody>'];

    for (var i = 0; i < data.length; i++) {
      reqString.push('<tr><td>', data[i].reqID, '</td><td>', data[i].reqText,'</td>','<td>', data[i].reqReference, '</td></tr>');
    }

    reqString.push('</tbody></table>');
$("#requirementsDiv").append(reqString.join(""));

Another place to look would be your use of $.each. Try changing it to a regular for loop as the $.each isn't always as efficient as for.

As a side note you have an error in your script where you add '})' to close out getReq.

score 0 · Answer 3 · answered Nov 01 '11 at 21:06

It does not have to be an infinite loop, but some part of your script that takes too long.

Try to remove parts of the script until the error goes away, then you will have found the part you need to optimize.

You have two loops that should be considered first:

$.each(selected , function(i, n){

and

for (var i = 0; i < data.length; i++) {

The second can be slightly optimized by using an array, if the data array is really large:

var reqArray = ['<table id="requirements_table"><thead><tr><th>Requirement ID</th><th>Requirements</th><th>Reference</th></tr></thead><tbody>'];

for (var i = 0; i < data.length; i++) {
  var element = data[i]
  reqString.push('<tr><td>'+ element.reqID  + '</td><td>' + element.reqText + '</td>' + '<td>' + element.reqReference + '</td></tr>');
}

var regString = regArray.join('') + '</tbody></table>';

But I don't think that this will remove the problem. Still worth a try.

If you are going to use an array you should also push each individual string piece rather than concatenating before the push, even with just 5 pieces. It will improve performance in IE7 especially. — scrappedcola, Nov 01 '11 at 21:11
This true, but micro optimization. As mentioned in my post I don't think that this loop could lead to the problem. @crocaduck81 should simply try to locate the problematic lines first. I do think, as commented on the post, that the main problem could lie in the `append` call. — topek, Nov 01 '11 at 21:17

IE 7 "stop running this script" error using jQuery

3 Answers3