CODEWITHSUNDEEP
javascriptjqueryhtmlcssajax
WeInThis
WeInThis

Reputation: 547

JQuery - Get a error mesage if there is no value

So I have completed my Website as I wanted and now I'm just at the last point to get an error message if my movie isn't found. So it means that I have an API that returns JSON. If a person writes invalid movie like "ifeahaef" it returns null and I wonder if it possible to make in Jquery an error like "No Movies Were Found!" like right under the search bar? Right now my site looks like this

my site right now

and this is how I want it

What I want

I don't know if my code is necessary but I can post my JS in case, maybe it will be easier to see.

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); 
}); 

});

HTML:

<!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>

Upvotes: 0

Views: 465

Answers (3)

anmarti
anmarti

Reputation: 5143

1) Include an Error field in your JSON returned object from server. Your JSON object must have the following fields:

   title
   release
   vote
   overview
   poster
   trailer
   Error

2) You have to do the following using your server side language:

  1. Get movie name from request

  2. If movie found then create a JSON with movie data and Error = false and fill the rest of JSON with the movie data.

    2.1. Else create a JSON with Error = true. No need to fill the rest of fields

  3. Return JSON to client side

3) Then in your Ajax success callback look if there was an error:

$.ajax({ 
 type:'GET', 
 url: url, 
 success: function(data){ 
     if(!data.Error){
       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>");

     }else{ 
         alert("Movie not found");
     }
 },
 error: function(request, status, err){ 
    console.log('ERROR'); 
 } 
}); 
}

Upvotes: 0

Rajesh
Rajesh

Reputation: 24945

As a simple understanding, if any API is now throwing error, it is considered as success. Now what you can do is handle this case like

function(response){
    if(response){
        // Do your stuff
        $("#lblerror").addClass("hide"); // Hide label if movie found
    }
    else{
        $("#lblerror").text("No Movie found");
        $("#lblerror").removeClass("hide"); // Show Label if no movie found
    }
}

A simple way to do this is add a error label in your HTML

<label class="error hide" id="lblerror"></label>

Upvotes: 1

ahervin
ahervin

Reputation: 461

Not sure how your response is structured. But i'd aim for something like this.

if(data.length <= 0 || data == null){
     $('#element-to-add-message-to').html('No titles found....');
     return;
}

Upvotes: 0

Related Questions