14

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?

BenMorel
  • 30,280
  • 40
  • 163
  • 285
Karsten Tietje
  • 249
  • 2
  • 4
  • 15
  • Just to be clear, you're trying to empty the the div with id="spotify", right? – Jawwad Zakaria Nov 29 '13 at 21:42
  • Have you tried $("#spotify").innerHTML = "";? Source: http://stackoverflow.com/questions/5744233/how-to-empty-the-content-of-a-div – Jawwad Zakaria Nov 29 '13 at 21:45
  • `html()` will empty element already. Is redundamt o empty it , then append if one method does both – charlietfl Nov 29 '13 at 21:45
  • 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. – Karsten Tietje Nov 29 '13 at 21:46
  • can use `empty()` method – charlietfl Nov 29 '13 at 21:47
  • 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. – adeneo Nov 29 '13 at 21:48
  • 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. – Karsten Tietje Nov 29 '13 at 21:55

4 Answers4

17

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>'));
    });
});
Tom Morris
  • 10,055
  • 28
  • 48
10

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>");

Hamza Zafeer
  • 2,052
  • 12
  • 27
  • 34
Sumit
  • 648
  • 4
  • 10
5

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

$('#spotify').empty();
Goodbye StackExchange
  • 21,680
  • 7
  • 47
  • 83
user3041160
  • 654
  • 3
  • 5
3

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>');
Shawn G.
  • 602
  • 4
  • 16
  • 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. – Karsten Tietje Nov 29 '13 at 21:58