Question

Despite the error, my problem has nothing to do with tabs

I am using jQuery to get a pretty large JSON file (almost 0.5 mb) and inserting a bunch of html from it into the DOM. This still works:

$(function() {
  $.getJSON('results.json', function(data){
    var result = $('<ul>');
    var resultEl = $('#results');
    for(var i = 0; i < 2; i++) {
      result.append(unescape(data[i].html));
    }
    result.appendTo(resultEl);
  });
});

I can insert two html parts fine, but when I try to insert three items this gets added to the DOM:

<section id="loading-tab" class="tab-content clearfix hidden">
  <h2 class="visuallyhidden">Loading</h2>
  <p>Loading...</p>
</section>
<section id="error-tab" class="tab-content clearfix hidden">
  <h2 class="visuallyhidden">Error</h2>
  <p>Error loading tab :(</p>
</section>

Here is a link where I try to insert 2 items (and it still works) and here is a link where I try to loop to 3 and everything breaks.

Answer 1

The third JSON element has a script tag that runs the following (the string of document.write is broken out for ease of reading)

<script>
document.write('
    <section id="loading-tab" class="tab-content clearfix hidden">
        <h2 class="visuallyhidden">Loading</h2>
        <p>Loading...<\/p>
    <\/section>
    <section id="error-tab" class="tab-content clearfix hidden">
        <h2 class="visuallyhidden">Error<\/h2>
        <p>Error loading tab :(<\/p>
    <\/section>');
</script>

Which is writing the Error loading tab :( to the page. Clean up the data and you should be good to go.