Jquery .load / .empty not loading and emptying content from div

Question

Im trying to load select content that is hidden on a page into a content div. To do to this i came across jquery's .load and .empty.

It seems to have gone wrong somewhere, but as far as i can see it should work,ideas where im going wrong on this ? And a wider question is .load / .empty the right functions to use for this or is there a simpler way ?

Ive attached my html and Js below, and also created a JSfiddle here : https://jsfiddle.net/poha5cb2/3/

Ive setup the following :

<a id="op-1">Open 1</a><br>
<a id="op-2">Open 2</a><br>
<a id="op-3">Open 3</a><br>

<hr>

<h2>CONTENT</h2>
<div id="content">

</div>

<hr>

<div class="hidden-content-to-be-loaded" style="display: none;">
    <div id="one">
    <h3>One</h3>
    </div>

    <div id="two" class="initial-close">
    <h3>Two</h3>
    </div>

    <div id="three" class="initial-close">
    <h3>Three</h3>
    </div>
</div>

And for the JS ive written

$("#op-1").click(function(){
                $("#content").empty();
        $("#content").load("#one);
});

$("#op-2").click(function(){
                $("#content").empty();
        $("#content").load("#two);
});


$("#op-3").click(function(){
                $("#content").empty();
        $("#content").load("#three);
});

score 2 · Answer 1 · edited Feb 05 '16 at 13:58

2

load() is used for loading content to an element from server (ajax). In this case it seems like you only want to copy a hidden element to a visible element:

It's just kind of copy and paste.

$("#op-1").click(function(){
    var one_content = $("#one").html();       
    $("#content").html( one_content );
});

There's no need using empty() because all the content is replaced.

edited Feb 05 '16 at 13:58

A. Wolff

74,033
9
94
155

answered Feb 05 '16 at 13:43

bestprogrammerintheworld

5,417
7
43
72

score 2 · Accepted Answer · answered Feb 05 '16 at 13:45

The load() method is intended to retrieve content from an external URL by making an AJAX request, not to move around the DOM of the current page by selecting existing elements. You also appear to have a syntax error with the missing quotes on the selectors.

As all the content is in the page you don't need to use AJAX at all. If you restructure the HTML slightly and use common classes you can both improve and simplify the code by selecting the related content from the a by it's matching index and showing it, something like this:

$('.open').click(function(e) {
    e.preventDefault();
    $('.content').hide().eq($(this).index('.open')).show();
})

.content {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="open">Open 1</a><br>
<a href="#" class="open">Open 2</a><br>
<a href="#" class="open">Open 3</a><br>

<hr>

<h2>CONTENT</h2>
<div id="content-container">
    <div class="content">
        <h3>One</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam aut, veniam! Eveniet, repudiandae ipsum? Quas ea assumenda, ullam magnam dolores iste neque harum, repudiandae modi distinctio ratione laborum excepturi ad!
    </div>
    <div class="content">
        <h3>Two</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam aut, veniam! Eveniet, repudiandae ipsum? Quas ea assumenda, ullam magnam
    </div>
    <div class="content">
        <h3>Three</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam aut, veniam! Eveniet, repudiandae ipsum? Quas ea assumenda, ullam magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut sint consequatur saepe, quo beatae exercitationem
        nostrum quos, illum a inventore fuga dignissimos atque iusto. Quis magnam voluptatibus, ipsum cum assumenda.
    </div>
</div>

score 1 · Answer 3 · answered Feb 05 '16 at 13:43

Their are missing " in your js.

Try the following code :

var $content = $("#content")
$("#op-1").click(function(){
    $content.html($("#one").html());
});

$("#op-2").click(function(){
    $content.html($("#two").html());
});


$("#op-3").click(function(){
    $content.html($("#three").html());
});

jacob.mccrumb · Answer 4 · 2016-02-05T14:07:51.820

1

Looks like you might want jQuery's append: jQuery Append

Here's an updated fiddle: https://jsfiddle.net/poha5cb2/6/

$("#op-2").click(function() {
  $("#content").empty();
  var $content = $('#two');
  $("#content").append($content);
});

Basically, get a reference to the content you want and then add that to the content div. The same can also be done with .html as the other answers are saying.

UPDATE

The other answers are right, because appending an element will cause you problems once you call .empty(). Since you are replacing the html you won't even need to call empty: jsfiddle

$("#op-2").click(function() {
  var content = $('#two').html();
  $("#content").html(content);
});

edited Feb 05 '16 at 14:07

answered Feb 05 '16 at 13:48

jacob.mccrumb

681
5
18

I believe you mean that $('#two') should be $('#two').html() – bestprogrammerintheworld Feb 05 '16 at 13:50
I was using append to put the jQuery element in, that's why I didn't use .html. But then I just realized if you click the same one twice, it errors out and stops displaying. Because I am appending the element, calling empty clears out that element I suppose? Retrying with .html thanks! – jacob.mccrumb Feb 05 '16 at 13:57

Jquery .load / .empty not loading and emptying content from div

4 Answers4