With my Website almost complete, I just need to add an error message for when a movie isn't found. I have an API that returns JSON and if someone enters an invalid movie like "ifeahaef," it returns null. Is there a way to use Jquery to display an error message like "No Movies Were Found!" right below the search bar? Here is how my site currently looks:
https://i.sstatic.net/yujzy.png
This is how I want it to look:
https://i.sstatic.net/n43qj.png
If needed, I can share my code as well. Here's my JavaScript function:
function callAjax(input)
{
var url = "http://localhost:1337/search/" + input;
$.ajax({
type:'GET',
url: url,
success: function(data)
{
console.log('SUCCESS');
$('#title').html("Title: " + data.title);
$('#release').html("Release: " + data.release);
$('#vote').html("Vote: " + data.vote);
$('#overview').html("Overview: " + data.overview);
$('#poster').html('<img src="' + data.poster + '" width=250 height=450 />');
$('#trailer').html("Trailer: <iframe width='420' height='315' src='https://www.youtube.com/embed/" + data.trailer + "' frameborder='0' allowfullscreen>");
},
error: function(request, status, err)
{
console.log('ERROR');
}
});
}
$(document).ready(function(){
$('#submitButton').on('click', function(e){
e.preventDefault();
var input = $('#s').val();
callAjax(input);
});
});
And here's the HTML template:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MovieTrailerbase</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="page">
<h1>The MovieTrailer search</h1>
<form id="searchForm" method="post">
<fieldset>
<input id="s" type="text" />
<input type="submit" value="Submit" id="submitButton" />
<div id="searchInContainer">
<input type="radio" name="check" value="site" id="searchSite" checked />
<label for="searchSite" id="siteNameLabel">Search movie</label>
<input type="radio" name="check" value="web" id="searchWeb" />
<label for="searchWeb">Search series</label>
</div>
</fieldset>
</form>
<aside>
<div id="title"></div>
<div id="release"></div>
<div id="vote"></div>
<div id="overview"></div>
<br>
<div id="trailer"></div>
</aside>
<div id="poster"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js"></script>
</html>