CODEWITHSUNDEEP
javascriptjquery
Maksim
Maksim

Reputation: 371

jQuery get function doesn't work as expected

I need to get photos using GIPHY API, I have the following function:

function callApi(input) {
    var url1 = `https://api.giphy.com/v1/gifs/random?api_key=0zCoIz5c8dbanGyiAHnA0pSUe3bcA9sf&tag=${input.value.toLowerCase()}&limit=1`;
    var url2 = "https://api.giphy.com/v1/gifs/random?api_key=0zCoIz5c8dbanGyiAHnA0pSUe3bcA9sf&tag=dog&limit=1";
    var xhr = $.get(url2);
    xhr.done(function(jsonObj) {
        alert("Success!");
        document.getElementById("genImage").src = jsonObj.data.images.original.url;
    }).fail(function() {
        alert("erro");
    }).always(function() {
        alert("...");
    })
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
    <html lang="en" dir="ltr">
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
            <script type="text/javascript" src="main.js"></script>
            <meta charset="utf-8">
            <title>Test</title>
        </head>
        <body>
            <form id="query-form">
                <label for="query">KEYWORD</label>
                <input name="query" type="text">
                <input type="submit" id="button" value="GENERATE" onclick="callApi(query)">
            </form>
            <img id="genImage" src="">
        </body>
    </html>

So, the problem is that $.get() function doesn't respond at all, even always() callback function does not get executed. When I try this particular URL in the Postman application, I get the response (json object) and I can access the data.images.origianl.url property it is there. When I try the following line of code in the console :$.get("https://api.giphy.com/v1/gifs/random?api_key=0zCoIz5c8dbanGyiAHnA0pSUe3bcA9sf&tag=dog&limit=1"); I get the response with the status code 200, so it should work in the main.js file, but in my case it doesn't.

I have two variables url1 and url2 this is because, in my first tries I did not get anything with the url1, but getting the success with the url2. After some time I didn't get anything using two of them.

What is the problem? How can it be that I can get responses from Postman and from the console using the same URLs, but do not get them with actual code?

Thank you for your patience!

Upvotes: 0

Views: 56

Answers (1)

imvain2
imvain2

Reputation: 15847

This is a common problem, understanding the difference between type button and type submit.

Submit will submit the form. Whereas button will just process the event handlers assigned.

Change 

<input type="submit"

to 

<input type="button"


function callApi(input) {
    var url1 = `https://api.giphy.com/v1/gifs/random?api_key=0zCoIz5c8dbanGyiAHnA0pSUe3bcA9sf&tag=${input.value.toLowerCase()}&limit=1`;
    var url2 = "https://api.giphy.com/v1/gifs/random?api_key=0zCoIz5c8dbanGyiAHnA0pSUe3bcA9sf&tag=dog&limit=1";
    var xhr = $.get(url2);
    xhr.done(function(jsonObj) {
        alert("Success!");
        document.getElementById("genImage").src = jsonObj.data.images.original.url;
    }).fail(function() {
        alert("erro");
    }).always(function() {
        alert("...");
    })
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
    <html lang="en" dir="ltr">
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
            <script type="text/javascript" src="main.js"></script>
            <meta charset="utf-8">
            <title>Test</title>
        </head>
        <body>
            <form id="query-form">
                <label for="query">KEYWORD</label>
                <input name="query" type="text">
                <input type="button" id="button" value="GENERATE" onclick="callApi(query)">
            </form>
            <img id="genImage" src="">
        </body>
    </html>

Upvotes: 3

Related Questions