Hey I am having issues with getting json from the link i generated. I have tried everything i found online. It was working for 10 minutes but now its not. I even don’t get any error on my console when i try to print json files on console. Just nothing. Here’s my codepen code. I have no idea what should i do.
Try with this url. “https://en.wikipedia.org/w/api.php?action=opensearch&format=json&origin=*&search=YourSearchTerm”
I have tried at least 100 different url’s including yours. Nothing happens. I get no console errors on chrome. I get 404not found error on firefox. I checked my button functions. They work properly. I checked my url variables. They all are working as expected. I tried to get json with jQuery.ajax(), getJSON() and plain javascript. Nothing happens. URLs are working but i cant call them with my ajax methods.
Yes, APIs are frustrating. They are confusing enough, and they are all different, they are often poorly documented, and they can change without warning.
The first thing I notice is the lack of a document ready block. All jQuery should be thusly wrapped so it doesn’t try to manipulate DOM elements that don’t exist yet.
Your choice of variable names confused me for a second. Your url is not a URL but is a search string. And youwiki is actually a URL. Naming variables is important. Always assume a stranger is reading your code.
And whenever I’m confused, I simplify. I am a big fan of simplicity. When I write code, I make simple changes and then test. This is especially true if I’m learning something.
I add the url string that I use and then simplified it down to the bare essentials to get us to a point of understanding:
$(document).ready(function() {
var searchTerm = 'apple'
var wikiUrl = 'https://en.wikipedia.org//w/api.php' +
'?callback=?' +
'&action=opensearch' +
'&profile=fuzzy' +
'&limit=10' +
'&prop=fileinfo' +
'&format=json' +
'&search=' + searchTerm
$.ajax({
url: wikiUrl,
dataType: 'json',
success: function(response) {
console.log('response', response);
},
error: function(err) {
console.log('Error:', err)
}
})
})
A working pen is here.
1 Like
Thank you alot for your kind response. I will put more effort to write readable code from now on. I understand api’s can be really tricky but this one is not. I put all the blame on my stupidity. I put straight 20 hours to fix the problem on that 5 lines of ajax code. Even after your help it doesn’t work. I even used exactly your sample. Still nothing happened. All am i doing is wrapping that code on click() function.
i tested the function. It works. I tested my wikiAPI. It works. And we are 100% sure your ajax code snippet works. When i put them together it just fails. I am reall edge of crying-literally. Can you please just tell me whats wrong with this code. Why its not displaying that array on console?
$(document).ready(function() {
$("#sbmt").click(function() {
var wikiUrl =
"https://en.wikipedia.org//w/api.php" +
"?callback=?" +
"&action=opensearch" +
"&profile=fuzzy" +
"&limit=10" +
"&prop=fileinfo" +
"&format=json" +
"&search=" +
encodeURI($("input").val());
$.ajax({
url: wikiUrl,
dataType: "json",
success: function(response) {
console.log(response[1]);
},
error: function(err) {
console.log(err);
}
});
});
});
I don’t completely know why but I think the issue is with your form element in the HTML. Maybe someone smarter than me can explain why. There is no need for a form because your HTML is not submitting an AJAX call itself. I would remove it and get rid to the "type"s on the buttons - not needed. When I do this, it works for me:
<div class="container">
<h1>Wikipedia Search Tool</h1>
<input type="text" class="s-bar">
<button id="sbmt">Search</button>
<button id="btn">I Feel Myself Lucky</button>
<div class="content-container">
</div>
</div>
Let me know if that doesn’t work for you and I’ll put it into a pen.
The only other thing that I’d add is that I’d find a better name for the second button than “btn”.
I am reall edge of crying-literally.
Yup, we’ve all been there.
Thanks for your reply. I am agree with your form element suggestion. I used preventDefault() function for that. And i finally found the problem. (After 2 days) I don’t get any response because there is access restriction on Wikipedia in my country(Turkey) at the moment. To fix that I used vpn. Final working code:
$(document).ready(function() {
$("#sbmt").click(function(e) {
//This function for form elements
e.preventDefault();
// Link is different because i am using vpn webpage here to get data from wikipedia. And yes its sad
var wikiUrl =
"https://gir.im/en.wikipedia.org//w/api.php" +
"?callback=?" +
"&action=opensearch" +
"&profile=fuzzy" +
"&limit=10" +
"&prop=fileinfo" +
"&format=json" +
"&search=" +
encodeURI($("input").val());
$.ajax({
url: wikiUrl,
dataType: "json",
success: function(response) {
console.log(response[1]);
},
error: function(err) {
console.log(err);
}
});
});
});