JQuery and Netflix ODATA

JQuery version

by shelbyz

HTML

<script src="https://raw.github.com/jquery/jquery-tmpl/master/jquery.tmpl.min.js"></script>
<body> 
    <h2>Search Netflix for Movies</h2> 
    
    <input id="searchString" />
    <button id="searchClick">Search</button>
    <br/><br/>
    <textarea id="searchQuery" cols="75" rows="6"></textarea>
    <br/><br/>
    <b>Movies found <label id="movieCount"/></b>
    <br/><br/>
    
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Release Year</th>
                <th>Runtime</th>
            </tr>
        </thead>
        <tbody id="movies">
        </tbody>
    </table>
</body>

CSS

table th { text-align:left; padding-right: 3em; font-style:italic }body { font-family: Helvetica, Arial }
input:not([type]), input[type=text], input[type=password], select { background-color: #FFFFCC; border: 1px solid gray; padding: 2px; }

JavaScript

//debugger;
var markup = "<tr><td>${Name}</td><td>${ReleaseYear}</td><td>${Runtime}</td></tr>";

$.template("movieTemplate", markup);

callback = function(result) {
    var movies = result["d"]["results"];

    if (movies === null || movies === 0) {
        alert("no movie results, try again");
    }
    else {
        $("#movieCount").text(movies.length);
        $.tmpl("movieTemplate", movies).appendTo("#movies");
    }
};

$("#searchClick").click(function() {
    $("#searchQuery").text("http://odata.netflix.com/v2/Catalog/Titles?$select=Name,Runtime,ReleaseYear&$filter=substringof('" + $("#searchString").val() + "',Name)&$orderby=Name&$callback=?&$format=json");
    
    $.ajax({
        dataType: "jsonp",
        url: $("#searchQuery").text(),
        success: callback,
        error: function(XHR, textStatus, errorThrown) {
            alert(textStatus + ":" + errorThrown);
        }
    });
});