JS written JS not executing in IE and Safari, works in Firefox.

[mrmike]

Hi,

I have an html page with a form that allows people to select a variable number from a drop down and click "Add", this calls my client side Javascript function which document.write's (using jQuery) the selected amount of HTML blocks to the page. Inside each block is a Javascript function which needs to execute when it has been written.

This is the function that returns the code to be written to the page

function writeBlock(iterations) {
   xhtml_code = '';
   for (i = 0; i < iterations; i++) {
             xhtml_code += '<div class="loading"><img src="/img/loading.gif" style="border:0px;"> <em>Loading</em></div>';
             xhtml_code += '<script language="javascript">';
             xhtml_code += 'eval(alert(\'asdas\'));';
             xhtml_code += '</script>';
             xhtml_code += '</div>';
   }
   return xhtml_code;
}

I have put in an alert there for debugging, it would usually be an Ajax call - I have tried it with and without the eval() statement too.

The function calls this onclick of the submit button and does a jquery:

$(xhtml_code)
    .appendTo('#div-container');

Which basically document.write's it to the div container div.

Now this works perfectly in Firefox, but in IE (6/7) it completely ignores the Javascript (not even an error) and in Safari it does the same.

Any ideas?

[jtrelfa]

My suggestion would be to avoid dynamically writing the javascript in the first place. You'll get in trouble using eval statements all over the place.

Here's another (potential) scenario.

function writeBlock(iterations) {
  for (i = 0; i < iterations; i++) {
    var xhtml_code = '<div class="loading">'
      + '<img src="/img/loading.gif" style="border:0px;" alt="" />'
      + '<em>Loading</em></div>';
    $("#div-container").append(xhtml_code);
    alert('debugging');
  }
  return;
}

In that code, you're debugging as you construct and append the new divs.

[mrmike]

Yes thanks I have actually rectified the problem by doing something similar.

function writeContent(times) {
    xhtml_code = '';
    picker_ids = new Array();
    counter = 0;

            for (j = 0; j < times; j++) {
                counter++;
                picker_ids[j] = counter;                
                xhtml_code += '<div class="board" id="board-' + counter + '">'
                    + '<span id="game_type">'
                    + '<div class="loading"><img src="/img/loading.gif" style="border:0px;"> <em>Loading</em></div>';           
                xhtml_code += '</div></div></div></div>';
            }

    // write the code to the page and call the ajax function to load the contents
    $(xhtml_code).appendTo('#div-container');
    loadContent(picker_ids);
}

function loadContent(picker_ids) {
    for (i = 0; i < picker_ids.length; i++) {
        $('#board-' + picker_ids[i]).load('/page.php?counter=' + picker_ids[i]);
    }
}