ajax - show album art for a queried artist -


i want show album art artist on website using spotify's api. here's code…am calling api correctly? or, going wrong somewhere else?

how site should work: user searches artist , api returns album covers artist in grid view.

code: https://jsfiddle.net/zcardais/c2sngpux/

<div class="grid-container centered">     <div class="grid-100">       <div class="contained">         <div class="grid-100">           <div class="heading">             <h1>search spotify</h1>             <form id="form">               <label for="search">search artist </label>               <input type="search" name="search" id="searchstring">               <label for="select">search type </label>               <select id="searchoption">                 <option selected disabled>choose…</option>                 <option value="artist">artist</option>                 <option value="album">album</option>                 <option value="song">song</option>                 <option value="playlist">playlist</option>               </select>               <input type="submit" value="search" id="submit">             </form>            </div>         </div>         <ul id="results">          </ul>       </div>     </div>   </div> 
$(document).ready(function() {   var spotifyapi = "https://api.spotify.com/v1/search";    $('form').submit(function (evt) {     var $submitbutton = $('#submit');     var $query = $('#searchstring');     var $type = $('#searchoption')     evt.preventdefault();     $query.prop("disabled",true);     $submitbutton.attr("disabled", true).val("searching....");     var artist = $query.val();     var type = $type.val();     $('#results').html('');     $.getjson(spotifyapi, {         q: artist,         type: type       },     function(data){       var photohtml = '';       if (data.items.length > 0) {         $.each(data.items,function(i,photo) {           photohtml += '<li class="grid-25 tablet-grid-50">';           photohtml += '<a href="' + photo.link + '" class="image">';           photohtml += '<img src="' + photo.media.m + '"></a></li>';         }); // end each       } else {         photohtml = "<p>no photos found match: " + animal + ".</p>"       }       $('#photos').html(photohtml);       $searchfield.prop("disabled", false);       $submitbutton.attr("disabled", false).val("search");     }); // end getjson    }); // end click  }); // end ready 


Comments

Popular posts from this blog

Command prompt result in label. Python 2.7 -

javascript - How do I use URL parameters to change link href on page? -

amazon web services - AWS Route53 Trying To Get Site To Resolve To www -