JSFiddle - React, Tailwind, and code Playground

avoid CORS using jquery jsonp call

by abubelinha

HTML

<body>

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a target=_blank href="https://frimmy.github.io/">Frimmy</a> - 
          <a target=_blank href="https://frimmy.github.io/api-test">JSON project demo</a>
        </div>
        Based on "<i><a href=https://www.smashingmagazine.com/2012/02/beginners-guide-jquery-based-json-api-clients/>A Beginner’s Guide To jQuery-Based JSON API Clients</a></i>" by <a href=http://www.twitter.com/twostepmedia>Ben Howdle</a>
        <div class="collapse navbar-collapse">
          <!-- <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="http://adrianfrimpong.com/">Blog</a></li>
            <li><a href="mailto:[email protected]?Subject=Hello from frimmy.github.io">Contact</a></li>
          </ul> -->
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <div class="container">

      <div class="example-div">
        
        <h1>Search</h1>
        
        <section id="fetch">
          <form name="fetch">
            <input type="text" placeholder="Enter a movie title" id="term" value="Speed" />
            <input type="submit" id="search" value="Find me a poster" />
          </form>
        </section>
        
        <section id="poster">
          
        </section>
        <footer>
          <p>Created by <a href="https://frimmy.github.io">Adrian Frimpong</a></p>
        </footer>  

      </div>


    </div><!-- /.container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!--...

JavaScript

$(function(){
	
	//This is to remove the validation message if no poster image is present
	$('#term').focus(function() {
		var full = $('#poster').has("img").length ? true: false;
		if (full == false) {
			$('#poster').empty();
		}

	});

	var api_key = "0b3385b006ff4f8013eaff2b15006edb";
	var baseimg = "http://image.tmdb.org/t/p/w342";

	//function definition 
	var getPoster = function(){

		//Grab the movie title and store it in a variable

		var film = $('#term').val();

		//check if the user has entered anything

		if (film == '') {

			//If the input field was empty, display a message

			$('#poster').html("<h2 class='loading'>Ha! We haven't forgotten to validate the form! Please enter something.</h2>");
		} else {

			//They must have entered a value, carry on with API call, first display a loading message to notify the user of activity
			$('#poster').html("<h2 class='loading'>Your poster is on its way!</h2>");

			$.getJSON("https://api.themoviedb.org/3/search/movie?query=" + escape(film) + "&api_key=" + api_key + "&callback=?",
				function(json) {
				//print returned json object to familiarize with API data structure
				// console.log(json);
				// console.log(json.results[0].poster_path);

				//TMDb is nice enough to return a message if nothing was found, so we can base our if statement on this info

					if (json.total_results) {

						//Display the poster and a message announcing the result

						$('#poster').html('<h2 class="loading">Well, gee whiz! We found you a poster, skip!</h2><img id="thePoster" src=' + baseimg + json.results[0].poster_path + ' />');
					} else {
						$.getJSON("http://api.themoviedb.org/3/search/movie?query=goonies&api_key=" + api_key, 
							function(json){
								$('#poster').html('<h2 class="loading">We\'re afraid nothing was found for that search. Perhaps you were looking for The Goonies?</h2><img id="thePoster" src='+baseimg + json.results[0].poster_path+'/>');
	                    });                 
	        ...