javascript - Uncaught TypeError: Cannot read property 'text' of undefined(…) -
the issue appears 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 call
page: e.relatedtarget.textcontent,
hit button wikipedia, results, click on result = should load 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 <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 works need above 1 due 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 <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['*']); }); }); }); });
the issue e.relatedtarget.textcontent
giving whole text - title , description. need title search find result.
take @ network tab in dev tools , see there error "the page specified doesn't exist" in response.
change pick out h4 content only:
page: $(e.relatedtarget).find('h4').text(),
Comments
Post a Comment