Live demo eror
Live demo eror
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> </div> </nav> <div class="col-lg-6 well"> <hr style="border-top:1px dotted #ccc;"/> <div class="col-md-6"> <div class="form-group"> <input type="text" id="search" class="form-control"/> </div> </div> </div> </body> </html>
$(document).ready(function(){ $('#btn_search').on('click', function(){ var search = $('#search').val(); var str = search.toLowerCase(); if(search == ""){ alert("Please enter something!"); }else{ $('#result').empty(); jsonFlickrFeed = function (json) { $.each(json.items, function(i, item) { $("<div style='border:1px solid #000; float:left; width:150px; height:150px; margin:20px;'><img style='width:150px; height:150px;' src='"+item.media.m+"'/></div>").appendTo("#result"); }); }; $.ajax({ url: 'https://api.flickr.com/services/feeds/photos_public.gne', dataType: 'jsonp', data: { "tags": str, "format": "json" } }); } }); });