ajax_work.html

<form>
	<input type="text" value="HEllo">
</form>

<ul class="results">

</ul>


<script src="http://code.jquery.com/jquery-latest.js">

</script>

<script type="text/javascript" charset="utf-8">
	
	function movieLi(movieObject){
		return "<li class='result'>"+ movieObject.Title + "</li>";

	}

	$(function(){

		$('form').on("submit", function(event){
			event.preventDefault();
		

			var searchTerm = $('input').val();
			
			console.log(searchTerm);

			$.ajax({
				url: "http://www.omdbapi.com/",
				method: "get",
				dataType: "jsonp",
				data: {"s": searchTerm, "callback": "movies"},
				jsonpCallback: "movies"
			})
			.done(
				function(data){
					$(".results").empty();
					$("input").val("");
					if(data["Search"]){
						console.log("Good Search")
						collection = data["Search"];
					} else{
						console.log("Bad Search")
						collection = [];
					}

					for(var i= 0; i < collection.length; i++){

						$(".results").append(movieLi(collection[i]))
					}

			})
			.always(function(){
				alert("The Ajax Request is Finished")
			})
		})
	})


</script>

<script>
	// function doSomething(){

	// 	var todo = $.Deferred();

	// 	$.when("")
	// 	.then(function(){
	// 		setTimeout(function(){
	// 			alert("Our First Thing is Done!!")
	// 		}, 500)

	// 	})
	// 	.then(function(){

	// 		setTimeout(function(){
	// 			todo.resolve("Our whole promise is done!");
	// 		}, 5000)
	// 	})

	// 	return todo.promise();

	// }


	// var aboutTo = doSomething().done(function(msg){ alert(msg)});




</script>