Here again, I have everything looking the part but none of my click functions are working. If I click the ‘x’ nothing happens, if I click the search icon nothing happens, if I type keyword and enter nothing happens. Is it my API? I’ve tried different ones. What am I doing wrong?https://codepen.io/Wongala/pen/qmMxOZ
If you supply code samples (or better yet a link to you pen) we can help you much better.
Oops I missed that too. https://codepen.io/Wongala/pen/qmMxOZ
Browser console says
TypeError: $.ajax(...).success is not a function
The object passed to .ajax() can have properties called success and error. You want to put your callbacks there.
I find $.getJSON simpler to understand:
$(document).ready(function(){
var searchString = "apple";
var wikiUrl = 'https://en.wikipedia.org//w/api.php' +
'?callback=?' +
'&action=opensearch' +
'&profile=fuzzy' +
'&limit=10' +
'&prop=fileinfo' +
'&format=json' +
'&search=' +
encodeURI(searchString);
$.getJSON(wikiUrl, function(data) {
console.log(data);
});
});
I never got the Wikipedia API to work with .getJSON 
I replaced ajax with getJSON and it still didn’t pull up anything when i clicked
so the error is success? I should remove that from my function?
Not remove. Just write it differently.
$.ajax({
url: ...,
type: 'GET',
// ... other properties...
success: function(data, status) {
// ...
},
error: function(data, status) {
// ...
}
});
Are you saying that this didn’t work for you?
When I was making my Wikipedia Viewer months ago I started with using .getJSON but somehow I couldn’t make it work. I googled for solutions until I found one that used .ajax, which I tweaked a bit. It was all new to me so there’s a lot of confusion (mostly because of the API).
Just now I returned to my old Wikipedia viewer and replaced .ajax with .getJSON and it works perfectly 
1 Like
I’m pulling my hair out here, lol. I changed it like you suggested and it’s still not loading and now I’m getting an unexpected token error
I don’t see that error in the link you’ve provided.
Just as a general coding idea…
I would focus in the beginning of a program on the difficult parts. You’ve invested a lot of time in page layout and css and all that. When I tackled this, all I cared about in the beginning was getting my API call to work. I didn’t want all that other stuff to distract me. I just wanted to focus in on the core problem. If you’re building an airplane for the first time, first you make sure the engine works. Then you make sure the controls work. Then you see if the thing can get lift. If you bog yourself down with worrying about what color the seat covers should be, it’s going to take away from your focus on the real problems. That’s always been my approach anyway. I would not have even touched the html and css until I knew I could get the core of the program to work.
That’s what I tried to show you with what I provided. I would suggest starting a new pen and just get the API working. I provided an example up above using $.getJSON. Just focus on the core ideas before you start worrying about the little things.
I’ll start over, thanks anyway
I did provide you with a working alternative and kevcomedia did provide the proper format for a $.ajax call.
We don’t generally like to do the work for you. Your latest post said you were having problems, but didn’t provide the code or a link. If you provide links to code, it’s much easier for you to help you without just giving you the entire working solution. We don’t know what to do with comments like I’m pulling my hair out here, lol. I changed it like you suggested and it’s still not loading and now I’m getting an unexpected token error because that sounds like a simple writing mistake and we can’t help you without seeing exactly what the code is - that could be thousands of things.
Again, we can help you much better if you show us exactly what the code is an tell us what it is doing/not doing that you don’t like. A link to a pen is always best. When I ask questions I often fork the pen so they can see where I was when I was having the problem instead of it updating as I go and they can’t figure out what the problem was.
Yes, API calls are confusing and frustrating. Keep at it, ask specific questions, and you’ll get there.
Actually, following kevcomedia’s advice I was able to get what you have on codepen working:
var search = function(userInput) {
$.ajax({
url: 'https://en.wikipedia.org/w/api.php?action=query&format=json&prop=extracts%7Cinfo&generator=search&exchars=500&exlimit=10&exintro=1&inprop=url&gsrsearch=' + userInput + '&callback=?',
type: 'GET',
dataType: 'jsonp',
headers: {'Api-User-Agent': 'Search-Here'},
success: function (data,status) {
$(data.query.pages).each(function () {
$.each(this, function () {
$('#result').append('<a href=' + this.fullurl + ' target="_blank">' + '<blockquote>' + '<h4>' + this.title + '</h4>' + this.extract + '</blockquote>' + '</a><hr/>');
});
$('#result').addClass('animated zoomInUp').one(animationEnd, function() {
$('#result').removeClass('animated zoomInUp');
});
});
}, // success
error: function (data, status) {
$('#result').append('<p>Sorry. Data isn\'t available</p>');
console.log("error... " + status);
} // error
}); // $.ajax
} // search
The problem was that you were treating success and error as if they were methods of $.ajax instead of properties (containing functions) of the object being sent to it. They are just properties like url and type.
JavaScript can be confusing in how it treats functions. The notation you were using (chaining functions with a dot) works for some functions, but not here.
Make sure you organize your code well and indent properly. It might seem unimportant now, but as programs get larger, it will become exponentially more important. (As a helpful tool, most code editors, if you select everything and hit shift-tab, it will try to auto indent for you.) And I like putting little comments at the end of long sections (like in this example) to remind me what section is being closed out.
yes you are correct, the larger it got the more lost I became. I will definitely start commenting to help me and indenting. Thank you…and I apologize, I didn’t know I needed to include the link in every reply. I will remember that for my next one.
You just need to be clear about what code you’re talking about. I went to the old link and couldn’t find the error that you were referring to so I assumed the code you were talking about was somewhere else.
It’s happened to us all - we ask a question and then make a subsequent change to the code that makes the question confusing. Like I said, I think a good practice for code that you’re going to keep working on is to fork it so the question will stay relevant to that fork. If the code block is small enough, posting it is another solution.
But it happens. Let us know if you run into another problem.
1 Like