How do I get $.getJSON to work on JSONP

Question

I know it looks like a lot but my question pertains to a single line of (bolded) code. I know my event handler is set up correctly. I know my url is what it should be by this point, except for the ?callback=? part (I read in another post that by putting this at the end of the url passed to $.getJSON, the getJSON becomes capable of working with JSONP, and according to their API page wiki uses JSONP). I also know for certain that the domMod function NEVER RUNS, NOT EVEN THE FIRST LINE OF IT. So don't worry about the other parts of my code, just please if you can tell me why my $.getJSON is not calling the function, I am really new to this stuff. The error message I get back is

wikiViewer.html:1 Refused to execute script from 'https://en.wikipedia.org/w/api.php?format=json&action=query&generator=searc…=jordan?callback=jQuery111107644474213011563_1454965359373&_=1454965359374' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.

(function(){
var searchBtn = document.getElementById('search');
//var body = document.getElementsByTagName('body')[0];
var input = document.getElementById("input");
var bodyDiv = document.getElementById('bodyDiv')
$(document).ready(function(){
  searchBtn.addEventListener('click', searchWiki);
  function searchWiki(){
    bodyDiv.innerHTML = "";
    var url = 'https:\/\/en.wikipedia.org/w/api.php?format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch='
    if (input.value === ""){
        return;
    }
    var searchTerm = input.value.replace(/\s/g, '%20');
    url = url + searchTerm + "?callback=?";
    **$.getJSON(url, domMod)**  //change fileName to be whatever we wish to search
      function domMod(json){ //what to do with dom based on json file  NOTE WE NEED TO FIRST CHECK ANDREMOVE PREVIOUS SEARCH CONTENT
        var entry;
        if (!json.hasOwnProperty(query)){
            return;
        }
        if (!json.query.hasOwnProperty(pages)){
            return;
        }
        json = json.query.pages;
        var keys = Object.keys(json);
        var keysLength = keys.length;
        for (var i = 0; i < keysLength; i++){ 
            entry = json[keys[i]];
            var outterDiv = document.createElement('div');
            outterDiv.className = "entry";
            var imageDiv = document.createElement('div');
            imageDiv.className = "entryImg";
            var entryDiv = document.createElement('div');
            entryDiv.className = "entryTxt";
            outterDiv.appendChild(imageDiv);
            outterDiv.appendChild(entryDiv);
            entryDiv.innerHTML = '<h2>' + entry.title + '</h2>' + '<p>' + entry.extract + '</p>'
        if (entry.hasOwnProperty('thumbnail')){ //add image to our imageDiv child of entryDiv
            imageDiv.style.backgroundImage = "url('" + entry.thumbnail.source + "')"
        }
        bodyDiv.appendChild(outterDiv); //appendChild to the Body 
    }
   }
 } 

  });
}())

Why is the url start with this `https:\/\/` ? Shouldn't it be `https://` ? — Fredrik Emanuel Berggren, Feb 08 '16 at 21:31
You're running up against [CORS](http://stackoverflow.com/questions/21854516/understanding-ajax-cors-and-security-considerations). See [here](https://www.mediawiki.org/wiki/Manual:$wgCrossSiteAJAXdomains), especially [this](https://gerrit.wikimedia.org/r/#/c/9624/). You're probably fine if you remove the `+"?callback=?"`. — Kenney, Feb 08 '16 at 21:45
Thanks Fredrik I did get rid of the backslashes. And Kenney after removing that I get XMLHttpRequest cannot load https://en.wikipedia.org/w/api.php?format=json&action=query&generator=searc…mit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=ray%20rice. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. — Ha_Riddler, Feb 08 '16 at 22:22
Ok, that's pretty much the same error. In the 3rd link I mentioned is a JS snippet showing you how to call their API - using `$.ajax`, setting some options, especially `origin` and `withCredentials`. — Kenney, Feb 08 '16 at 22:25

charlietfl · Accepted Answer · 2016-02-08T22:33:21.943

0

You already have a query string started in url using ? but are adding another ? when you do:

url = url + searchTerm + "?callback=?";

Change to

url = url + searchTerm + "&callback=?";

Works fine when I sent term "food"

DEMO

edited Feb 08 '16 at 22:33

answered Feb 08 '16 at 22:27

charlietfl

170,828
13
121
150

THANK YOU SO MUCHHHHHHH!!!!!!! Been stuck all afternoon cause every project I have on my plate right now involves retrieving JSONP – Ha_Riddler Feb 09 '16 at 00:18
one suggestion....use objects for `data` argument and jQuery will build the query string for you. Much easier to add/remove and no fussing over `&` and `?` – charlietfl Feb 09 '16 at 00:19
Can you please elaborate? I don't know what you mean by use objects for data argument – Ha_Riddler Feb 09 '16 at 12:48

How do I get $.getJSON to work on JSONP

1 Answers1