Quote generator- help with JSONP

#1

I’ve got the basics working for the generator using a chrome hack that allows cross-origin requests, but I don’t know how to fix it for real.

I abandoned .getJSON b/c I tried putting in a the ?callback in the url string but it always gave me an error.

So now I have this. How can I get the jsonp to work?

$(function() {

$(’#quote-button’).on(‘click’,(e) => {
var url =
“http://api.forismatic.com/api/1.0/method=getQuote&key=457653&format=json&lang=en”

$.ajax({
  url:url,
  method:'GET',
  dataType:'JSONP'
}).done(function(json){

  var author = json.quoteAuthor
  var text   = json.quoteText


    $(".quotes").empty()
    $("#quote-author-box").append(author)
    $("#quote-text-box").append(author)
  })
})
})

I just get back errors saying, Error: wrong method.

Can anyone give me some tips? I am not working with codepen yet, but only with Atom. I assume it will be the same? If not, knowing this would be useful so I don’t solve the COR problem here, only to face an entirely dif one with codepen.

I’ve spend about an hour researching this problem and none of the solutions I’ve come across have worked.

#2

Try this:

  $.ajax({
    url: url,
      jsonp: "jsonp",
      dataType: "jsonp",
      data: {
        method: "getQuote",
        lang: "en",
        format: "jsonp"
      }
  }).done(function(json){
    console.log(json);
   /* whatever else ... */
  })
#3

And I was able to get my getJSON to work with this string:

"http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?"

Happy hunting.

#4

Awesome!! This does work!! Thanks alot.

Can U explain the second one though. Where’d you come up with that? I also understand the .ajax but …

I’m annoyed that I couldn’t figure this out. I read all the docs. They just say to add callback=?" and it’s confusing if they mean to add that literally, or to add a callback. What does add a callback even mean in a url?

The .ajax docs are better but very hard to follow, the jsonp section alone I’m referring to here.

#5

I wish I new how it works. I just understand that JSONP is a way to get around the same domain policy and that JSONP wants a callback. I think putting “&callback=?” is either fooling it into thinking that you gave it a callback or is telling it, “Yeah, I know you want a callback but I don’t need one so I’ll give you this dummy so you know that I’m purposely choosing not to give one.”

Here’s some interesting discussion on the topic:

But like I said, I’m still figuring it out myself.

#6

Cool. That is a good post!

Also, whatever you did, you fixed my request and now it is working perfectly, at least in the browser. Hope it works in codePen too.
Thanks!

#7

I tried this code as written in CodePen on Chrome, and I got further, in fact, it almost worked. However, I get

Refused to execute script from 'http://api.forismatic.com/api/1.0/?&jsonp=jQuery31104107977640992704_1493006061699&method=getQuote&format=jsonp&key=15723&lang=en&_=1493006061700' 
because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

So basically, it looks like I got past the cross-domain problem, only to run into something new. I don’t think there is anything I can do about this other than choose a different random quote API?

#8

Someone else was having the same problem today - they may have changed something or be working on the system.

#9

It doesn’t look like forismatic does anything except http, and codepen, I’ve heard, is going full https. So soon http will not work with codepen.

I switched to a dif api and it fixed some issues, however I never ran into the one U’ve posted. Maybe using a better api would fix the problem ?

With a dif api, like https://market.mashape.com/andruxnet/random-famous-quotes I didn’t need to setup jsonp at all. U do need an api key though.

#10