title: Any suggestions with this error? Uncaught TypeError: $.ajax is not a function
body: <p>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.</p>
  
  <p>Any help would be great.</p>
  
  <p>What I've done so far:</p>
  
  <ol>
  <li>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.</li>
  <li>Checked that i was loading the code after the page loads (window.onload).</li>
  <li>Went back to old code where this was working to see if i changed something, i didn't.</li>
  <li>Google searches.</li>
  </ol>
  
  <p>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).</p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;title&gt;GIFtastic&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;!--Reset style--&gt;
      &lt;link rel="stylesheet" type="text/css" media="screen" href="../GIFtastic/assets/css/reset.css" /&gt;
      &lt;!--Bootstrap--&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
          crossorigin="anonymous"&gt;
      &lt;!-- My own CSS stylesheet --&gt;
      &lt;link rel="stylesheet" type="text/css" media="screen" href="../GIFtastic/assets/css/style.css"&gt;
      &lt;!--JavaScript--&gt;
      &lt;script src="../GIFtastic/assets/javascript/app.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div id="dogBtns"&gt;&lt;/div&gt;    
  
  
  
      &lt;!-- jQuery CDN --&gt;
      &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
          crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;!-- Bootstrap CDN --&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
          crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;!--popper--&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
          crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>/*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 &lt; topics.length; i++) {
              var newTopicBtns = $("&lt;button&gt;" + topics[i] + "&lt;/buttons&gt;");
              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&amp;api_key=&lt;apiKey&gt;";
  
      $.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    
  };
  </code></pre>