CODEWITHSUNDEEP
jquery
Evik James
Evik James

Reputation: 10493

How to best UNLOAD content in a DIV using LOAD or HTML to manage resources?

I am using jQuery 1.6.2.

In a master page, I open up several divs that will later be populated with info through the use of buttons:

<input type="button" id="ButtonOne">
<input type="button" id="ButtonTwo">
<input type="button" id="ButtonThree">
<div class="SectionDiv" id="DivOne"></div>
<div class="SectionDiv" id="DivTwo"></div>
<div class="SectionDiv" id="DivThree"></div>

I make a call to populate the divs like this:

$("#ButtonOne").click(function() {
    $("#DivOne").load("FileOne.html");
});

When I popule a div, I want to get rid of everything in the other divs. I have done this two different ways. Like this:

// METHOD ONE
$("#ButtonOne").click(function() {
    // UNLOAD ALL DIVS
    $(".SectionDiv").load("BlankPage.html");
    // LOAD THE DIV THAT NEEDS TO BE LOADED
    $("#DivOne").load("FileOne.html");
});

// METHOD TWO
$("#ButtonOne").click(function() {
    // UNLOAD ALL DIVS
    $(".SectionDiv").html("");
    // LOAD THE DIV THAT NEEDS TO BE LOADED
    $("#DivOne").load("FileOne.html");
});

In method one, I load the div with a page that has no content, a completely empty page. In method two, I use html("") with the same effect(?).

While these two methods have the same visual outcome, does one have a distinct advantage over the other for killing existing variables in the divs, or detaching elements better from the DOM, or anything? Is one faster in certain environments than the other? Does one hog more resources than the other?

Upvotes: 0

Views: 9729

Answers (2)

dku.rajkumar
dku.rajkumar

Reputation: 18578

$(".SectionDiv").each(function(index, ele){
ele.html("");
});

try the above, since there are more than one .SectionDiv element, you have to loop for each element.

Upvotes: 1

Augustus Kling
Augustus Kling

Reputation: 3333

Method one causes a request to get the blank page for no reason (because you know it is blank, there is no need for a request). So essentially method two is the optimized version of method one because it saves the useless additional HTTP requests.

Upvotes: 1

Related Questions