How to empty div before append

Question

I'm using Freebase Search Suggest to bind a certain keyword to a getJson request. The problem is that I bind getJson functions and the corresponding .append/.prepend functions to to the input field that has the search suggest. Now if want to clear(.empty) my div that contains the result from the getJson functions i end up not being able to appennd anything.

So every time I do a search the result div stays empty. If I not try to run the empty function and do a second search, the new information gets appended on top of the previous information.

My site www.karsten-tietje.dk/sw

$('#myinput').suggest({key: "<mykey>","filter": "(all type:/music/musical_group )"

        })
        .bind("fb-select", function(e, data) {

$.getJSON("http://ws.spotify.com/search/1/track.json?q="+search_val, function(data) {
  items = [];

        $.each(data["tracks"], function(key, val) {
        items.push('<li class="spot"><span typeof="MusicRecording" property="track"><p>Name: <strong><span property="name">' + val["name"] + '</span></span></strong></p> <p>Album <strong>' + val.album["name"] + '</strong></p><p> Released: <strong>' + val.album["released"] +'</strong></p><p><strong><a href="' + val["href"] +'"><i class="icon-play-sign"></i> Start Spotify</a></strong></p>');
            if ( key === 7 ) 
            {
            return false;
            }
        });

        $('#spotify-div').prepend('<h3 style="border-bottom:1px solid white;">Spotify tracks</h3>');
        $('#spotify').html(items.join('</li>'));
    });
});

This is just a snippet of my some of my code. I run multiple getJson functions.

How can I clear/empty my result div before running the other functions?

Balaklava

Just to be clear, you're trying to empty the the div with id="spotify", right? – Slacker

Have you tried $("#spotify").innerHTML = "";? Source: #5744733 – Slacker

html() will empty element already. Is redundamt o empty it , then append if one method does both – Derivation

No, i have a container with different divisions that i append different information to through multiple getJson requests. So i have to empty the container before i run the requests. – Balaklava

can use empty() method – Derivation

Again, html() empties the container before inserting the new content. If you're trying to empty something else, jQuery has a aptly named empty() method. – Mcbee

I may have quite unclear in formulating my question. I am well aware of both empty() and html() function. The problem is that i need to empty the whole container before retrieving and appending the data from my getJson call. If i run the empty method right after the bind method i get an no results. So i need to be able to empty the div and THEN run the getJson function. – Balaklava

Answer 1

Lots of people have explained the mechanics of clearing, which it sounds like you already understand, so perhaps the missing piece is when to do it. You probably want to clear things as the very first thing in your Freebase Suggest select callback, before you fire off any of the queries to other services like Spotify (i.e. before the first $.getJSON()).

Not related to your question, but don't forget the attribution requirement of the Freebase license (not currently provided on your web site).

EDIT: Here's your code with empty added:

$('#myinput').suggest({key: "<mykey>","filter": "(all type:/music/musical_group )"

        })
.bind("fb-select", function(e, data) {
    $('#spotify-div').empty(); // empty the div before fetching and adding new data
    $.getJSON("http://ws.spotify.com/search/1/track.json?q="+search_val, function(data) {
        items = [];
        $.each(data["tracks"], function(key, val) {
            items.push('<li class="spot"><span typeof="MusicRecording" property="track"><p>Name: <strong><span property="name">' + val["name"] + '</span></span></strong></p> <p>Album <strong>' + val.album["name"] + '</strong></p><p> Released: <strong>' + val.album["released"] +'</strong></p><p><strong><a href="' + val["href"] +'"><i class="icon-play-sign"></i> Start Spotify</a></strong></p>');
            if ( key === 7 ) 
            {
            return false;
            }
        });

        $('#spotify-div').prepend('<h3 style="border-bottom:1px solid white;">Spotify tracks</h3>');
        $('#spotify').html(items.join('</li>'));
    });
});

Houk

Yes, right on the spot! But how do i go about that? I will look into the attribution requirement. – Balaklava

Answer 2

Select the element and put HTML blank like below

jQuery('#selector').html('');

then after apply the append jquery function on same selector like below

jQuery('#selector').append("<p>text</p>");

Kelle

Shouldn't i be able to run a ('#selector').html('') right after the bind method and still get append information? – Balaklava

you can just use the first .html() call, but instead of '' put "<p>text</p>" – Midas

Simple answer but very useful. Works for me – Scotland

Answer 3

You can also do this by clearing the inner html of the html, with id "spotify":

$('#spotify').empty();

Grille

Answer 4

With jQuery there can be many ways of emptying an element of its contents and appending/prepending content.

One is .empty(); ( Documentation )

$('#spotify-div').empty().prepend('<h3>YourHTML Here</h3>');

Another is .html( [ html ] ); ( Documentation )

$('#spotify-div').html('').prepend('<h3>YourHTML Here</h3>');

If you are changing the html and not worried about keeping events, you could just pass your html through the .html( 'Your HTML' ); function

$('#spotify-div').html('<h3>YourHTML Here</h3>');

Haul

I may have quite unclear in formulating my question. I am well aware of both empty() and html() function. The problem is that i need to empty the whole container before retrieving and appending the data from my getJson call. If i run the empty method right after the bind method i get an no results. So i need to be able to empty the div and THEN run the getJson function. – Balaklava