HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Flickr tag search

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
searchflickrtag

Problem

I have the following code below and I am trying to improve it.
How can I know if there is any limitations/drawbacks writing this way and why? Any possible error conditions?

What can be improved on this code? Thoughts? Suggestions?


    
        
        
        Untitled Document

        

        
        $(document).ready(function() {
            $("#submit").click(function (event) { // wire up this as an onclick event to the submit button.                
                var searchTerm = $("#search").val(); // get the user-entered search term
                var URL = "http://api.flickr.com/services/feeds/photos_public.gne";
                var ID = "25053835@N03";
                var tags="&tags="+ searchTerm;
                var tagmode="&tagmode=any";
                var jsonFormat = "&format=json&jsoncallback=?";                 
                var ajaxURL= URL+"?id="+ID+tags+tagmode+jsonFormat;

                $.getJSON(ajaxURL,function(data){
                    $("h1").text(data.title);

                    $.each(data.items, function(i,photo) {

                        var photoHTML = "" +photo.tags + "";
                        photoHTML += '';
                        photoHTML += '';

                    $('#photos').append(photoHTML).fadeIn(2000);
                    });
                });
            });         
       });

       //table cell selection
       $(document).ready(function(){

           var getval = function(html) {
               alert(html);
           }

          $('#tblMain td').on('click', function(){
              getval($(this).html());
              });
          });

    
    

    
        
        flicker tag search
        Enter Search Term
        
         
        
    

Solution

Adding in a timeout to the JSONP request is a good idea as suggested by Noval Agung Prayogo.

Other than that, there's not a lot to change...

  • $(document).ready(function () { ... }); can be written as $(function () { ... });.



  • Move everything into a single $(function () { ... });



  • Function expressions should end in a semicolon



so here:

var getval = function(html) {
    alert(html);
} // <-- there should be a semicolon here.


You may also want to consider having a function to create your ajaxUrl variable so that it can be reused elsewhere if you need to.

E.G.

// wrap in an immediately invoked function expressions (IIFE) passing in window
// (the global object in a browser).
(function (w) {
    "use strict";

    w.ns = {}; // ns will be used a namespace to avoid polluting global scope.
    w.ns.flickr = {};

    w.ns.flickr.generateUrl = (function () {
        // These wont change so keep them as constants accessed via closures
        // in the returned function below.
        var URL = "http://api.flickr.com/services/feeds/photos_public.gne",
            ID = "25053835@N03";

        return function (tags, tagMode, format, callbackName) {
            // Use some defaults to simplify calling in the simplest case.
            tagMode = tagMode || 'any';
            format = format || 'json';
            callbackName = callbackName || '?';

            return URL + '?id=' + ID + 
                '&tags=' + tags + 
                '&tagmode=' + tagMode + 
                '&format=' + format + 
                '&jsoncallback=' + callbackName;
        };
    }());
}(window));


Then in your code you can just call:

ns.flickr.generateUrl($("#search").val());

Code Snippets

var getval = function(html) {
    alert(html);
} // <-- there should be a semicolon here.
// wrap in an immediately invoked function expressions (IIFE) passing in window
// (the global object in a browser).
(function (w) {
    "use strict";

    w.ns = {}; // ns will be used a namespace to avoid polluting global scope.
    w.ns.flickr = {};

    w.ns.flickr.generateUrl = (function () {
        // These wont change so keep them as constants accessed via closures
        // in the returned function below.
        var URL = "http://api.flickr.com/services/feeds/photos_public.gne",
            ID = "25053835@N03";

        return function (tags, tagMode, format, callbackName) {
            // Use some defaults to simplify calling in the simplest case.
            tagMode = tagMode || 'any';
            format = format || 'json';
            callbackName = callbackName || '?';

            return URL + '?id=' + ID + 
                '&tags=' + tags + 
                '&tagmode=' + tagMode + 
                '&format=' + format + 
                '&jsoncallback=' + callbackName;
        };
    }());
}(window));
ns.flickr.generateUrl($("#search").val());

Context

StackExchange Code Review Q#31654, answer score: 2

Revisions (0)

No revisions yet.