rob.m rob.m - 24 days ago 6
Javascript Question

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['*']);
});
});
});
});

Answer

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

Comments