Help With Wikipedia Viewer Project

1

hi all. I kinda need help with my Wkipedia project. The code below is meant to firstly change the position of the wrapper holding the random document button and the search bar on receiving a click response from the User and then fetch and insert the article requested for in a dynamically created div container element. When I tried to run it yesterday, it didn’t work. Please what else is missing?(some of those things I know and will correct). If I click the search icon after inserting the search value, nothing happens? Can I get some help please?

  $(document).ready(function() {
  
  let searchValue = document.getElementById("#searchString").value;

  $(".sbutton").on("click", function() {
    // code to push the wrap div element and icon up the container
    $(".wrap").animate({
      marginTop: "5px"
    });

    let baseUrl = " https://en.wikipedia.org/w/api.php? ";
    let tailUrl =
      "action=opensearch&format=jsonfm&search=" + searchValue + "&limit=10";
    let wikiLink = baseUrl + tailUrl;

    $.ajax({
      url: wikiLink,
      type: "GET",
      dataType: "json",
      success: function getWikiData(data) {
        let dDiv = document.createElement("div");
        dDiv = "content";
        dDiv.className = "secondDiv";
document.getElementByClassName("container").append(dDiv);
        for (var i = 0; i < data.opensearch.search.length; i++) {
          $("#content").appendChild(
            "<p>" + data.opensearch.search[2].title + "</p>"
          );
        }
      },

      error: function(error) {
        console.log(error);
      }
    });
  });
});
2

I added code tags in your post for legibility.

Is this on code pen ? , if so can you post the link, it is a little easier to troubleshoot .
Is your AJAX returning the data? what errors are you getting in console.log ?

3

okay…The animate part works well. However the ajax call is where I think the issue is. It’s not fetching any result. The code pen code is below:

4

A couple things I see

  1. You are mixing up jquery and vanilla javascript syntax, example in this statement below:
    let searchValue = document.getElementById("#searchString").value;
    since you are already targeting the element by id , you do not need the hashtag (as you would in jquery)
    You also have a typo in your html for that particular element, the html id attribute should be lowercase , not a mix of upper and lower case as you have it.
  2. you have a cors issue when fetching the data , search this forum to find the correct link to access the wiki api, it has been asked many times.
5

vanilla? Oh my! I innocently stumbled on this!. However my intentions is strictly geared toward Jquery. So that means i will retain the ‘#’? with respect to others things you saw, I will search for them. Thanks.

6

Let me clarify what I meant by the hashtag thing.

let’s say you have a text input element defined in your html file as follows:

<input type="text" id="test">

To get the value of the text box on some event or another using vanilla JavaScript , meaning without using any jquery or other libraries, you do:

let inputVal = document.getElementById('test').value

However, if you want to use jquery to get the value of the text box, you do:

let inputVal = $('#test').val()

Both of them will have identical outcomes, but the hashtag in the jquery syntax tells it that element is being referenced by id (if you were referencing it by class you would use a period before the element name). However in the vanilla JavaScript way you are directly telling it to reference the element by Id, so not only is the hashtag not needed, but it will break your code since there is no element that has an id called #test.

1 Like
7

thanks for the clarification boss.