jQuery API not working with JavaScript

Question

Using a Mashape API for random quotes, but nothing happening on click. Below is the JS and HTML. Is there something wrong with the JS code? When I click the button, nothing happens. The quote is not appearing in the div. Thanks!

$('#getQuote').click(function (){
        $.ajax({
          headers: {
            'X-Mashape-Key': 'nrXbQkfuWEmshxvDCunSMptEn0M0p1jHWCijsnX9Ow18j8TXus',
            'Content-Type': 'application/x-www-form-urlencoded',
            'Accept': 'application/json'
          },
          method:'POST',
          dataType: 'json',
          url: 'https://andruxnet-random-famous-quotes.p.mashape.com/',
          success: function(response) {
            var ape = JQuery.parseJSON(response)
            var quoteText = ape.quote;
            var quoteAuthor = ape.author;
            $(".quote").html(quoteText);
            $(".author").html(quoteAuthor);}
        });
      });



<body>
  <div class = "quote">quote</div>
  <div class = "author">author</div>
  <div id="button">
  <button id="getQuote">Get Quote</button>
  </div>
</body>

Your code sample is not clear. The js should wrap in a 'script' tag. And you shoul put it in a function on document ready, to be able to bind on dom elements. — Mario Santini, Jul 12 '16 at 05:21
your javascript is running before the button is there in html, you should try putting that below the html loading so that jquery can bind to that event — Sumit, Jul 12 '16 at 05:22
@MarioAlexandroSantini sorry this was not more clear but JS was in separate file from HTML. Just pasted the relevant parts for brevity. — Andy, Jul 12 '16 at 05:32

score 2 · Accepted Answer · answered Jul 12 '16 at 05:20

Prevent the default click event, remove the parsing of the data:

$(function(){
    $('#getQuote').click(function (e){
            e.preventDefault();
            $.ajax({
              headers: {
                'X-Mashape-Key': 'nrXbQkfuWEmshxvDCunSMptEn0M0p1jHWCijsnX9Ow18j8TXus',
                'Content-Type': 'application/x-www-form-urlencoded',
                'Accept': 'application/json'
              },
              method:'POST',
              dataType: 'json',
              url: 'https://andruxnet-random-famous-quotes.p.mashape.com/',
              success: function(response) {
                var ape = response//remove the parsing
                var quoteText = ape.quote;
                var quoteAuthor = ape.author;
                $(".quote").html(quoteText);
                $(".author").html(quoteAuthor);}
            });
          });
});

https://jsfiddle.net/cyLyn8ba/

This worked, now just wish I knew more about why. Need to read the parsing docs. Many thanks. — Andy, Jul 12 '16 at 05:30
If anyone comes across this, [this question](http://stackoverflow.com/questions/9111184/why-is-jquery-parsejson-not-necessary) explains the JSON parsing and why including this returns null. — Andy, Jul 12 '16 at 05:45

score 1 · Answer 2 · answered Jul 12 '16 at 05:29

jquery is intelligent enough to parse json response by itself, so you need to remove parsing function and everything should work fine :)

$('#getQuote').click(function (){
    $.ajax({
      headers: {
        'X-Mashape-Key': 'nrXbQkfuWEmshxvDCunSMptEn0M0p1jHWCijsnX9Ow18j8TXus',
        'Content-Type': 'application/x-www-form-urlencoded',
        'Accept': 'application/json'
      },
      method:'POST',
      dataType: 'json',
      url: 'https://andruxnet-random-famous-quotes.p.mashape.com/',
      success: function(response) {
        var ape = response;
        var quoteText = ape.quote;
        var quoteAuthor = ape.author;
        $(".quote").html(quoteText);
        $(".author").html(quoteAuthor);}
    });
  });

codepen example

jQuery API not working with JavaScript

2 Answers2