Wikipedia search help

1

I am following his tutorial here: https://www.youtube.com/watch?v=dRZxQY2RgUA

Now when i do nearly the exact same, i am having trouble getting the articles from Wikipedia api. If you check my console when you type in something and pres steh search icon, instead of console.log() the first article, link and description (

sucess: function (data) {
       console.log(data[1][0]);
       console.log([2][0]);
       console.log([3][0]);
     },

It activates the error message:

error: function(error) {
      alert("error");
     }

And i get errors in my console. It is able to search Wikipedia for all the articles
(output: https://en.wikipedia.org/w/api.php?action=opensearch&search=Hello&format=json&callback=?)

Yet it wont let me access it when i get the error:

Failed to load https://en.wikipedia.org/w/api.php?action=opensearch&search=Hello&format=json&callback=?: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access.
send @ jquery.min.js:1234:

and

 jquery.min.js:4 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

and

bootstrap.min.js:6 Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
    at bootstrap.min.js:6
    at bootstrap.min.js:6
    at bootstrap.min.js:6
(anonymous) @ bootstrap.min.js:6
(anonymous) @ bootstrap.min.js:6
(anonymous) @ bootstrap.min.js:6

Can anyone help?

1 Like
2

This seems to be an issue with Codepen. To bypass it, set your Ajax call’s data and dataType properties like this:

data: {
   format: 'json'
},
dataType: 'jsonp'
3

Still get errors like:

bootstrap.min.js:6 Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
    at VM269 bootstrap.min.js:6
    at VM269 bootstrap.min.js:6
    at VM269 bootstrap.min.js:6

and

VM277 jquery.min.js:4 Failed to load https://en.wikipedia.org/w/api.php?action=opensearch&search=hello&format=json&callback=?&format=json: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access.

It also doesn’t console.log the first title, link and desc like i have set.

4

I use the following URL
'https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&srsearch=' + $('#searchform').val() + '&srnamespace=0&srprop=snippet'
and it’s working (where $('#searchform').val() is the search input).

5

Still does not work: https://codepen.io/Mike-was-here123/pen/zPxQob?editors=1111

6

Ok, here is my AJAX call in its entirety (stopped at the success property, because I assume this is where people diverge):

$.ajax({
       url: 'https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&srsearch=' + $('#searchform').val() + '&srnamespace=0&srprop=snippet',
       data: {
              format: 'json'
       },
       dataType: 'jsonp',
       success: function (data){//stuff you do with the data
});
8

Still nothing. This is my only error:

bootstrap.min.js:6 Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
    at bootstrap.min.js:6
    at bootstrap.min.js:6
    at bootstrap.min.js:6
9

Try to put the AJAX call in a file that does not include bootstrap to see if the problem is with AJAX or Bootstrap. Something as simple as printing one of the parameters of the data obtained.

10

??? I need bootstrap for my html…

11

As the error messages indicates: Bootstrap requires Popper.js (external javascript file):

1 Like
12

Why do i get this instead of Wikipedia search data?


pen.js:19 
{batchcomplete: "", continue: {…}, query: {…}}
batchcomplete
:
""
continue
:
continue
:
"-||"
sroffset
:
10
__proto__
:
Object
query
:
search
:
Array(10)
0
:
{ns: 0, title: "Undefined", pageid: 42727860, snippet: "<span class="searchmatch">Undefined</span> refers …ics), with several related meanings Indeterminate"}
1
:
{ns: 0, title: "Undefined behavior", pageid: 515992, snippet: "In computer programming, <span class="searchmatch"…r is not prescribed by the language specification"}
2
:
{ns: 0, title: "Undefined (mathematics)", pageid: 9920876, snippet: "mathematics, <span class="searchmatch">undefined</… <span class="searchmatch">undefined</span> terms"}
3
:
{ns: 0, title: "Undefined value", pageid: 26712298, snippet: "programming), <span class="searchmatch">undefined<…n class="searchmatch">undefined</span> value must"}
4
:
{ns: 0, title: "Undefined variable", pageid: 2720560, snippet: "An <span class="searchmatch">undefined</span> vari…code but has not been previously declared by that"}
5
:
{ns: 0, title: "Primitive notion", pageid: 23706, snippet: "In mathematics, logic, and formal systems, a primi…tive notion is not defined in terms of previously"}
6
:
{ns: 0, title: "JSON", pageid: 1575082, snippet: "behaves in JavaScript as if it were:    var vx = [… being only implicit rather than explicit, should"}
7
:
{ns: 0, title: "Merry Cemetery", pageid: 1231150, snippet: "Merry Cemetery          <span class="searchmatch">…atch">undefined</span>        Play media    Merry"}
8
:
{ns: 0, title: "Control key", pageid: 188035, snippet: "Ctrl+Insert Copy <span class="searchmatch">undefin…an class="searchmatch">undefined</span> or rarely"}
9
:
{ns: 0, title: "Null", pageid: 21712, snippet: "NULL, nil, or None), used in computer programming …ss value Null string, the unique string of length"}
length
:
10
__proto__
:
Array(0)
searchinfo
:
totalhits
:
3366
__proto__
:
Object
__proto__
:
Object
__proto__
:
Object
13

This is the search data.

It is searching for undefined because you are not correctly getting the input value.

14

The tutorial i watched got something completely different…

Plus how do i get the input correctly? I am going off of this

15

Guys i found the fix. I found it in this article --> http://lupecamacho.com/wikipedia-viewer-wikipedia-api-cross-origin-request-issues/

Basically it was failed with cross origin requests (security).

This was the ajax and api/ link code:

$("#search").on("click", function() {
  var search = $("#searchBox").val();
  var api =
    "https://en.wikipedia.org/w/api.php?action=opensearch&search="+ search +"y&format=json&origin=*"
  $.ajax({
    type: "GET",
    url: api,
    async: false,    
    success: function(data) {
      console.log("'Don't worry, its working' - Line 10");
      
    }
  });
});

also by the way document was spelled wrong which is why it was undefined :man_facepalming: