Search in the NavBar

JavaScript
1

I’m trying to add a search bar in my nav bar on my template…
It’s giving me the
console.log(url); on line 31
https://en.wikipedia.org/w/api.php?action=opensearch&limit=42&search=testing&callback=?
I assume and when I click on it, it’s showing the data from wikipedia… but not the cluster of console logs right under that… one exactly the same…

$(function() {
  $('body').css('background-image', 'url(' + backgroundImg[backgroundCount] + ')'); //allows a variable for changing background img based in an array, change number in [] to change background...
});

$('#toggle').on('click', function(){
  backgroundCount++;
  if (backgroundCount > backgroundImg.length - 1) backgroundCount = 0;
  $('body').css('background-image', 'url(' + backgroundImg[backgroundCount] + ')');
});

    $('.navbar-nav').on('click', 'li', function() {
    $('.navbar-nav li.active').removeClass('active');
    $(this).addClass('active');
  });

    $('.navbar-brand').on('click', function() {
    $('.navbar-nav li.active').removeClass('active');
  });

 $('#searchButton').click(function() {

    var searchTerm = $('#searchTerm').val();

    var url = "https://en.wikipedia.org/w/api.php?action=opensearch&limit=42&search=" + searchTerm + "&callback=?";
console.log(url);
        
    $.ajax({ //ajax call for JSON data see console log data wiki API method for retreiving data, doesn't automatically spit back JSON without an AJAX call
      type: "GET",
      url: url,
      async: false,
      dataType: "json",
      success: function(data) {
     console.log(url);
     console.log(data[1][0]);//search term
     console.log(data[2][0]);//search description, 1st result
    console.log(data[3][0]);//address of 1st result

        $('#output').html(''); //clears all data prior to running/re-running for loop

        for (var i = 0; i < data[1].length; i++) {
          $('#output').append("<a name='page" + i +"' href=" + data[3][i] + " target='blank'><h1>" + data[1][i] + "</h1></a>" + "<h3>" + data[2][i] + "</h3><br>");
        }

      },
      error: function(errorMessage) {
        alert("Error");

      },

    });

  });

I’ve completed similar functionality in the wiki viewer… so I thought I could paste my previous solution with just checking the id attributes…

Could the
$('.navbar-nav').on('click', 'li', function()
from the Nav Bar be overriding my functionality?

2 
            <button id='search' type='button' class='btn btn-primary'>Search</button>
            <button type="submit" class="btn btn-default" id='search'>Submit</button>

I finally narrowed it down to these 2 buttons… the first one works… the second one does not. It is in the type… worked as ‘button’ but not as ‘submit’, changing the type of the second button allowed it to work as well.

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.