CODEWITHSUNDEEP
javascriptjquery
rob.m
rob.m

Reputation: 10591

Uncaught TypeError: Cannot read property 'text' of undefined(…)

The issue appears to be:

$("#results").append("<div class='list-group'><a class='list-group-item' href='https://it.wikipedia.org/wiki/" + encodeURIComponent(item.title.replace(" ", "_")) + "' data-toggle='modal' data-target='.bs-example-modal-lg'><h4>" + item.title.replace(" ", "_") + "</h4><p class='list-group-item-text'>" + item.snippet + "</p></a></div>");

And its call

page: e.relatedTarget.textContent,

Hit the button Wikipedia, get the results, click on a result = should load its wikipedia page: JSFiddle playground

The following has it:

$("#wiki").one('click', function(e) {
  var articleName = $(this).data('subject');
  $.getJSON("https://it.wikipedia.org/w/api.php?callback=?", {
    srsearch: articleName,
    action: "query",
    list: "search",
    format: "json"
}, function(data) {
    $("#results ul").empty();
    $("#results ul").append("<h3>Results for <b>" + articleName + "</b></h3>").text();
    $.each(data.query.search, function(i, item) {
      $("#results").append("<div class='list-group'><a class='list-group-item' href='https://it.wikipedia.org/wiki/" + encodeURIComponent(item.title.replace(" ", "_")) + "' data-toggle='modal' data-target='.bs-example-modal-lg'><h4>" + item.title.replace(" ", "_") + "</h4><p class='list-group-item-text'>" + item.snippet + "</p></a></div>");
      $("#results div a").attr("href", "#");
     });
     $('.modal').on('show.bs.modal', function (e) {
        $.getJSON("https://it.wikipedia.org/w/api.php?action=parse&format=json&callback=?", {
            page: e.relatedTarget.textContent, 
            prop:"text"
        }, function(data) {
            $(".modal-content").html(data.parse.text['*']);
        });
     });
 });
});

While this works but I need the above one due to the html within it:

$("#wiki").one('click', function(e) {
  var articleName = $(this).data('subject');
  $.getJSON("https://it.wikipedia.org/w/api.php?callback=?", {
    srsearch: articleName,
    action: "query",
    list: "search",
    format: "json"
}, function(data) {
    $("#results ul").empty();
    $("#results ul").append("<h3>Results for <b>" + articleName + "</b></h3>").text();
    $.each(data.query.search, function(i, item) {
      $("#results").append("<a class='list-group-item' href='https://it.wikipedia.org/wiki/" + encodeURIComponent(item.title.replace(" ", "_")) + "' data-toggle='modal' data-target='.bs-example-modal-lg'><h4>" + item.title.replace(" ", "_") + "</h4><p class='list-group-item-text'>" + item.snippet + "</a>");
      $("#results div a").attr("href", "#");
     });
     $('.modal').on('show.bs.modal', function (e) {
        $.getJSON("https://it.wikipedia.org/w/api.php?action=parse&format=json&callback=?", {
            page: e.relatedTarget.textContent, 
            prop:"text"
        }, function(data) {
            $(".modal-content").html(data.parse.text['*']);
        });
     });
 });
});

Upvotes: 1

Views: 1031

Answers (1)

MrCode
MrCode

Reputation: 64536

The issue is that e.relatedTarget.textContent is giving you the whole text - that is the title and the description. You need just the title for the search to find a result.

Take a look at the Network tab in dev tools and you will see that there is an error "The page you specified doesn't exist" in the response.

Change to pick out the h4 content only:

page: $(e.relatedTarget).find('h4').text(),

Updated fiddle

Upvotes: 1

Related Questions