Oct
5
2010

Playing with jQuery Templates API and Flickr

Last week I spent some time playing with the today’s announced jQuery Templates API
It was funny to see the different announcement tonight; Scott, JQuery Blog, James

Tonight I have spent a bit more time with it and decided to adapt the sample I found here : “Enabling JSONP calls on ASP.NET MVC” to use JQuery Templates

I used JetBrains WebStorm to develop and here is the result

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>flickr JQuery Template</title>
    <script type="text/javascript" src="js/code.jquery.com%20jquery-1.4.2.js"/>
    <script type="text/javascript" src="js/jquery-ui-1.8.5.custom.min.js"/>
    <script type="text/javascript" src="js/jquery.tmpl.js"/>
</head>
<body>
<script id="flickrTemplate" type="text/html">
    <div>
        <h2>${title}</h2>
        <div>
            <img src="http://farm5.static.flickr.com/${server}/${id}_${secret}_t.jpg" 
                  title="${title}" 
                  alt="${title}" />
        </div>
    </div>
</script>
    <div id="interesting_photos"></div>
    <script type="text/javascript">
    //
    // Flickr REST url
    //
    var url = "http://api.flickr.com/services/rest/?";
    //
    // My Flickr API key
    //
    var api_key = "--your flickr api key here--";
    // get interesting photos
    //
    function getInterestingPhotos() {
        //
        // build the URL
        //
        var call = url + "method=flickr.interestingness.getList&amp;api_key="
                       + api_key
                       + "&amp;per_page=5&amp;page=1&amp;format=json&amp;jsoncallback=?";
        //
        // make the ajax call
        //
        $.getJSON(call, function(rsp) {
            if (rsp.stat != "ok") {
                //
                // something went wrong!
                //
                $( "#interesting_photos" ).append(
                    "&lt;label style=\"color:red\"&gt;Whoops!  It didn't work!" +
                    "  This is embarrassing!  Here's what Flickr had to " +
                    " say about this - " + rsp.message + "&lt;/label&gt;");
            }
            else {
                //
                // build the html
                //
                $("#flickrTemplate")
                        .tmpl(rsp.photos.photo)
                        .appendTo( "#interesting_photos" );
            }
        });
    }
    </script>
    <script type="text/javascript">
        $(function() {
            $(getInterestingPhotos);
        })
    </script>
</body>
</html>

I could have done a template also of error message.

Jan
14
2009

jQuery goes 1.3

As announced on the jQuery blog, “jQuery 1.3 and the jQuery Foundation”, jQuery for it third anniversary goes to release 1.3 with the following features:

  • Sizzle: A sizzlin’ hot CSS selector engine.
  • Live Events: Event delegation with a jQuery twist.
  • jQuery Event Overhaul: Completely rewired to simplify event handling.
  • HTML Injection Rewrite: Lightning-fast HTML appending.
  • Offset Rewrite: Super-quick position calculation.
  • No More Browser Sniffing: Using feature detection to help jQuery last for many more years to come.
  • Check out the Release Notes to see more details.

    About Laurent

    Laurent Kempé

    Laurent Kempé is the editor, founder, and primary contributor of Tech Head Brothers, a French portal about Microsoft .NET technologies.

    He is currently employed by Innoveo Solutions since 10/2007 as a Senior Solution Architect, certified Scrum Master and Founding Member.

    Founder, owner and Managing Partner of Jobping, which provides a unique and efficient platform for connecting Microsoft skilled job seekers with employers using Microsoft technologies.

    Laurent was awarded Most Valuable Professional (MVP) by Microsoft from April 2002 to April 2012.

    JetBrains Academy Member
    Certified ScrumMaster
    My status

    Twitter

    Flickr

    www.flickr.com
    This is a Flickr badge showing public photos and videos from Laurent Kempé. Make your own badge here.

    Month List

    Page List