OK, so i keep getting this ajax error and am not sure why. If i remove the portion of code then the buttons load. I have used this same code before and never had any problems.
Any help would be great.
What I've done so far:
- looked up "Uncaught TypeError: $.ajax is not a function" in stack and took a look at my links to make sure they weren't the cause.
- Checked that i was loading the code after the page loads (window.onload).
- Went back to old code where this was working to see if i changed something, i didn't.
- Google searches.
Note: I removed the API key in this code but i do have a valid one on my local (tested it to make sure it worked and it did).
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>GIFtastic</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Reset style-->
<link rel="stylesheet" type="text/css" media="screen" href="../GIFtastic/assets/css/reset.css" />
<!--Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<!-- My own CSS stylesheet -->
<link rel="stylesheet" type="text/css" media="screen" href="../GIFtastic/assets/css/style.css">
<!--JavaScript-->
<script src="../GIFtastic/assets/javascript/app.js"></script>
</head>
<body>
<div id="dogBtns"></div>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<!-- Bootstrap CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<!--popper-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
</body>
</html>
JS:
/*jshint esversion: 6 */
window.onload = function () {
//1. Before you can make any part of our site work, you need to create an array of strings, each one related to a topic that interests you. Save it to a variable called `topics`.
// * We chose animals for our theme, but you can make a list to your own liking.
var topics = ["Collie", "German Shepherd", "Bernese Mountain Dog", "Australian Shepherd", "Golden Retriever", "Siberian Husky", "Border Collie"];
var resultNum = 9;
// 2. Your app should take the topics in this array and create buttons in your HTML.
// * Try using a loop that appends a button for each string in the array.
function createTopicBtns() {
var topicBtns = $("#dogBtns");
for (i = 0; i < topics.length; i++) {
var newTopicBtns = $("<button>" + topics[i] + "</buttons>");
newTopicBtns.attr({
"type": "button",
"class": "btn btn-outline-secondary active m-2",
"data-name": topics[i],
"text": topics[i]
});
console.log(newTopicBtns);
topicBtns.append(newTopicBtns);
}
}
/*3. When the user clicks on a button, the page should grab 10 static, non-animated gif images from the GIPHY API and place them on the page.
*/
var queryURL = "https://api.giphy.com/v1/gifs/search?q=collie&api_key=<apiKey>";
$.ajax({
url: queryURL,
method: "GET"
}).then(function (response) {
console.log(response);
});
/*When the user clicks one of the still GIPHY images, the gif should animate. If the user clicks the gif again, it should stop playing.
*/
/*Under every gif, display its rating (PG, G, so on).*/
/*This data is provided by the GIPHY API.
Only once you get images displaying with button presses should you move on to the next step.
Add a form to your page takes the value from a user input box and adds it into your topics array. Then make a function call that takes each topic in the array remakes the buttons on the page.
*/
createTopicBtns();
//window on load end
};
