Javascript function does not execute when called

Question

I have the following code:

function firstQuote(){
  jQuery.ajax({
    url: "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=mycallback",
    type: 'GET',
    dataType: "jsonp",
  }); 

  function mycallback(json){
    document.getElementById('quote').innerHTML = json[0].content;
  }
};
window.onload = firstQuote;

It is a simple function, but it is not being executed. If I take the code outside of the function it works perfectly. I'm stuck at it for some time now. Please, could someone help me?

@CaioCésarSilvaGomes can you clarify the "it is not being executed" bit. Did you try keeping breakpoints using the developer console/console.log something within the function to verify? — S Raghav
– S Raghav, Commented Jan 20, 2018 at 18:56
@connexo I was assuming the OP wanted the callback to be within so as to use JS closures or something :) — S Raghav
– S Raghav, Commented Jan 20, 2018 at 18:58

Daniel Beck · Accepted Answer · 2018-01-20 18:56:38Z

2

You're trying to define the callback inside the firstQuote function. (If you look at the error console, you'll see "[Error] ReferenceError: Can't find variable: mycallback".) Separate those functions to put mycallback on the global scope:

function mycallback(json) {
  document.getElementById('quote').innerHTML = json[0].content;
}

function firstQuote() {
  jQuery.ajax({
    url: "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=mycallback",
    type: 'GET',
    dataType: "jsonp",
  });
};
window.onload = firstQuote;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="quote"></div>

answered Jan 20, 2018 at 18:56

Daniel Beck

21.7k5 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Caio Gomes Over a year ago

I get your point Daniel. Is there a way of getting the jsonp object and inserting it on the div quote with the same function? In this case firstQuote.

Caio Gomes Over a year ago

And what is the normal way? I'm new to ajax and json.

Daniel Beck Over a year ago

Hm....now that I try it, that particular server refuses the request unless you include that _jsonp param. So I guess in this case that is the way to do it. (Sorry, I'm more used to non-JSONP ajax, where you'd normally use the returned Promise, chaining a .then() or .success() or etc after the call.)

Collectives™ on Stack Overflow

Javascript function does not execute when called

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related