Search code examples
javascriptjqueryajaxgetgiphy-api

Having trouble using the ajax call with my giphy api

I am very new to using jQuery and js. What I'm trying to do with the ajax or get method is that I want to type in any keyword(such as maine coon for example), click submit and be able to see a page of maine coon gifs. The api code I have is from giphy.

function searchGif (){
        var input = Document.GetElementById("Search_Form");
        input.val();
            var input = $('#search').val();
            $.get('http://api.giphy.com/v1/gifs/search?q='+input+'&api_key=apikey&limit=20',function(response)
            {
                $('#img').html("<img src="+response.data[20].images.downsized_large.url+">")
            }
            )
        }
        $.get({'http://api.giphy.com/v1/gifs/search?q='+input+'&api_key=apikey&limit=20',function(response)
        {
            $('#img').html("<img src="+response.data[20].images.downsized_large.url+">")
        }
    })
    }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="styles/style1.css" />
    <script src="scripts/script1.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    
    
    <title>API Test</title>
</head>
<body>
   
    <input id="form-control mr-sm-2" type="search" placeholder="Search">  
    <button class="btn btn-outline-success my-2 my-sm-0" id="searchgifs" type="submit" onclick="getData()">Search</button>
    </action>
    

   <br> 
   <br>
<script></script>
<!--<div class="inner">
    <img src="https://media3.giphy.com/media/hRPoV9O14t3vW/giphy.gif" />
    <img src="https://media1.giphy.com/media/GBbkH7cJiVu9y/giphy.gif" />
    <img src="https://media1.giphy.com/media/HXpzpXB5syQGQ/giphy.gif" />
    <img src="https://media0.giphy.com/media/X9Y9qYPUp1VMQ/giphy.gif" />
    <img src="https://media0.giphy.com/media/uuocoePH1mkVy/giphy.gif" />
    <img src="https://media0.giphy.com/media/4ml290TZ35zOM/giphy.gif" />
    <img src="https://media1.giphy.com/media/8O6EY0lahfInC/giphy.gif" />
    <img src="https://media3.giphy.com/media/A7GowSMfBhq6Y/giphy.gif" />
    <img src="https://media1.giphy.com/media/dQxSeXsXtf2Lu/giphy.gif" />
    <img src="https://media1.giphy.com/media/PzrPi0UVzgYHm/giphy.gif" />
    
</div>-->
   
</body>
</html>

Solution

  • There's quite a few issues here:

    • You cannot have spaces in id attributes, nor can you have multiple values in a single id. Use class attributes for that.
    • Your $.get() syntax is wrong; there's extra {} characters which are not necessary and causing an error
    • Document.GetElementById() needs to be document.getElementById() - JS is case sensitive
    • Element objects do not have a val() method, that's only available on a jQuery object
    • You're using the 'slim' branch of jQuery which does not have AJAX methods (amongst others). Use the full version of jQuery.
    • The 'search' input is missing the #search id you reference in the JS to get its value
    • The function you create is named searchGif(), not getData() as you use in the onclick attribute of the HTML.
    • That said, do not use onX event attributes as they are outdated and no longer good practice. Attach your event handlers unobtrusively instead.
    • There may not always be 21 items or more in the response, so remove [20] and use either [0] to get the first item only, or loop through them all.

    With all that said, here's a working example:

    $('#searchgifs').on('click', function() {
  var input = $('#search').val();      
  $.get('https://api.giphy.com/v1/gifs/search?q=' + input + '&api_key=apikey&limit=20', function(response) {
    $('#img').html("<img src=" + response.data[0].images.downsized_large.url + ">")
  })
});
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<input id="search" class="form-control mr-sm-2" type="text" placeholder="Search" value="cat">
<button class="btn btn-outline-success my-2 my-sm-0" id="searchgifs" type="submit">Search</button>

<div id="img"></div>