I have a div, that holds a div.
like this:
<div id='reportHolder' class='column'>
<div id='report'> </div>
</div>
Within the inner div, I add a bunch (7-12) of pairs of a and div elements, like this:
<h4><a>Heading1</a></h4>
<div> ...content here....</div>
The total size of the content, is maybe 200k. Each div just contains a fragment of HTML.
After I add all the content,
I then create an accordion. like this:
$('#report').accordion({collapsible:true, active:false});
This all works fine.
The problem is, when I try to clear or remove the report div, it takes a looooooong time, and I get 3 or 4 popups asking "Do you want to stop running this script?"
I have tried several ways:
option 1:
$('#report').accordion('destroy');
$('#report').remove();
$("#reportHolder").html("<div id='report'> </div>");
option 2:
$('#report').accordion('destroy');
$('#report').html('');
$("#reportHolder").html("<div id='report'> </div>");
option 3:
$('#report').accordion('destroy');
$("#reportHolder").html("<div id='report'> </div>");
No matter what, it hangs for a long while.
The call to accordion('destroy') seems to not be the source of the delay. It's the erasure of the html content within the report div.
EDIT - fixed typo.
ps: this happens on FF3.5 as well as IE8 .
Questions:
What is taking so long?
How can I remove content more quickly?
