update select with AJAX call
I've searched everywhere, but I cannot find what is wrong with my code. I have 4 HTML selects, ID'ed as "genres", "artists", "albums" and "songs". When you click on "genres", "artists" or "albums" the other selects should be updated through an AJAX call that does an sql query and respond back with JSON data. Sounds simple enough... but I can't get it to work. After just reloading the page, I can select a genre, and all other fields are updated, but then the other selects don't work any more.... as if jquery doesn't fire anymore when clicking on them. Please help!!!
This is my code
- function updateSongs(JSON_data){
- var song_options = '';
- for (var i = 0; i < JSON_data.length; i++) {
- song_options += '<option value="' + JSON_data[i].id + '">[' + JSON_data[i].track + '] '
- + JSON_data[i].title + " - " + JSON_data[i].artist + ' ' + JSON_data[i].album + ' </option>';
- }
- $("select#songs").html(song_options);
- };
- function updateAlbums(JSON_data){
- var album_options = '<option value="all">All albums</option>';
- for (var i = 0; i < JSON_data.length; i++) {
- album_options += '<option value="' + JSON_data[i] + '">' + JSON_data[i] + '</option>';
- }
- $("select#albums").html(album_options);
- };
- function updateArtists(JSON_data){
- var artist_options = '<option value="all">All artists</option>';
- for (var i = 0; i < JSON_data.length; i++) {
- artist_options += '<option value="' + JSON_data[i] + '">' + JSON_data[i] + '</option>';
- }
- $("select#artists").html(artist_options);
- };
- function updateGenres(JSON_data){
- var genre_options = '<option value="all">All genres</option>';
- for (var i = 0; i < JSON_data.length; i++) {
- genre_options += '<option value="' + JSON_data[i] + '">' + JSON_data[i] + '</option>';
- }
- $("select#genres").html(genre_options);
- };
- $(function(){
- $('#genres option').click(function(){
- $.getJSON("search.php",{genre: $(this).val(), type: 'genre'}, function(j){
- updateArtists(j.artists);
- updateSongs(j.songs);
- updateAlbums(j.albums);
- })
- })
- })
- $(function(){
- $('#albums option').click(function(){
- $.getJSON("search.php",{album: $(this).val(), type: 'album'}, function(j){
- updateArtists(j.artists);
- updateSongs(j.songs);
- updateGenres(j.genres);
- })
- })
- })
- $(function(){
- $('#artists option').click(function(){
- $.getJSON("search.php",{artist: $(this).val(), type: 'artist'}, function(j){
- updateSongs(j.songs);
- updateGenres(j.genres);
- updateAlbums(j.albums);
- })
- })
- })