Problem with Wikipedia Viewer

1

Hi, I’m working on the wikipedia viewer. When I hit the search button nothing happens. But if I uncomment the penultimate line of the javascript code (with an alert), when I close the alert dialog box the javascript is executed, the results are displayed for a while and then they disappear.
I can’t understand what is going on here. Could someone help me with this?

2

I’m too tired to dig deeper, but it seems there’s a problem with the form submission. If I hardcode a search in, it works fine.

// $("#searchForm").submit(function() {
//   var searchString = $("#searchInput").val();
  var searchString = "apple";
  $.ajax({
      url: '//en.wikipedia.org/w/api.php',
      data: { action: 'opensearch', search: searchString, format: 'json' },
      dataType: 'jsonp',
      success: function (x) {
        console.log(x);
        for (i=0; i < x[1].length; i++) {
          $("#display-results").append('<h3>' + x[1][i] + '</h3><p>' + x[2][i] + '</p>');
        }
      }
  });
  //alert("End");
// });

…

OK, looked a little further and made the following changes:

$("#searchForm").submit(function(event) {
  event.preventDefault();
  var searchString = $("#searchInput").val();

  $.ajax({
      url: '//en.wikipedia.org/w/api.php',
      data: { action: 'opensearch', search: searchString, format: 'json' },
      dataType: 'jsonp',
      success: function (x) {
        console.log(x);
        for (i=0; i < x[1].length; i++) {
          $("#display-results").append('<h3>' + x[1][i] + '</h3><p>' + x[2][i] + '</p>');
        }
      }
  });
  //alert("End");
});

<form id="searchForm">
  <input type="text" id="searchInput">
  <input type="submit" value="Search">
</form>
<div id="display-results"></div>

I changed the form a bit and added a event.preventDefault(); to prevent double clicks.

You can monkey around and figure out what fixed what. I’m going to bed. :wink:

3

Thank you ksjazzguitar. Now I can see what I was doing wrong.