CODEWITHSUNDEEP
javascriptjqueryajaxjsonflickr
CPM
CPM

Reputation: 51

jquery json with ajax to query flickr

I am trying to build a simple page that allows someone to enter the tags they want and then select either to search for photos that contain all or any of the tags. I have referenced the flickr api page and know this should be accomplished through the "tag_mode" in the url. However this seems to return the same result regardless of what value i put in.

$(document).dblclick(function(e) {
    e.preventDefault();
    var str = $('input:text').val();
    var topic = str.split(" ");
    var selected = $('input[name=andOr]:checked', '#form').val();
    var ajaxURL = "http://api.flickr.com/services/feeds/photos_public.gne?tags=" + topic + "&tag_mode=" + selected + "&format=json&jsoncallback=?";

    $.getJSON(ajaxURL, function(data) {
        $('h2').text(data.title);
        $.each(data.items, function(i, photo) {
            var photoHTML = '<span class="image">';
            photoHTML += '<a href="' + photo.link + '">';
            photoHTML += '<img src="' + photo.media.m.replace('_m', '_m') + '"></a>';
            $('#photos').append(photoHTML);
        }); // end each
    }); // end get JSON
    $("form").hide();
});   
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Flickr Popular Public Group Feed</title>
        <link rel="stylesheet" type="text/css" href="css/c12.css" />
    </head>
    <body>
        <div id="form">
            <form>
                <h1>query flickr for recent uploads of your choice!</h1>
                <p>please enter the flickr tags you&#39;d like to use in the search</p>
                <input type="text" name="tags" />
                <p>Please indicate the use of all tags or any tags; for and or or query</p>
                <input type="radio" name="andOr" value="&#39;all&#39;" />all tags
                <br />
                <input type="radio" name="andOr" value="&#39;any&#39;" />any tags
                <h1>click anywhere on the page to bring the pictures!</h1>
            </form>
        </div>
        <div id="demo"></div>
        <div id="pictures">
            <div class="content">
              <div id="photos"></div>
            </div>
        </div>
        <script src="js/jquery.js"></script> 
        <script src="js/myjs.js"></script>
    </body>
</html>

Upvotes: 2

Views: 668

Answers (1)

Yogi
Yogi

Reputation: 7324

The Flickr API lists the query string parameter name as "tag_mode", but in other references it is "tagmode". One works and the other does nothing, as demonstrated by the links below. In addition, OP's code incorrectly adds quotes around the tagmode value which causes it not to work.

ALL TAGS:

http://api.flickr.com/services/feeds/photos_public.gne?tags=elephant,jet,flower&tagmode=all&format=json

ANY TAG:

http://api.flickr.com/services/feeds/photos_public.gne?tags=elephant,jet,flower&tagmode=any&format=json

A very simple example to demostrate that it works. 

<html>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/json2/20140204/json2.min.js"></script>
<h3>Demo: Search Flickr images</h3>
Keywords: <input type="text" id="tags" value="flower elephant jet">
All: <input type="checkbox" id="tagmode" >
<button onClick="search();">Search</button>
<xmp id="stdout"></xmp>
<script type="text/javascript">
var script, url;
function search() {
	url = '//api.flickr.com/services/feeds/photos_public.gne?format=json&jsoncallback=callback';
	url += '&tags=' + (document.getElementById('tags').value || '').replace(/\s/g,',');
	url += '&tagmode=' + ( document.getElementById('tagmode').checked ? 'all' : 'any' );
	script = document.createElement( 'script' );
	script.type = 'text/javascript';
	script.src = url;
	document.body.appendChild( script );
}
function callback(data) {
    document.getElementById('stdout').innerHTML = 'URL: ' + url + '\n' + JSON.stringify( data, null, '\t' );
}
</script>
</body>
</html>

Upvotes: 1

Related Questions