I have created a page on which i have a list of topics, i want to display that particular "topic" in the page using ajax with jsp/servlets, but i don't know how to target that "topic" name and pass to servlet through ajax that will then give response as jsonobject and display it in same page in div. I want to display only selected topic, not all the tutorials from database everything has to happen without refreshing the page
This is what i use to display list items in navigation bar ( HTML EDITORS, HTML HOME, HTML INTORDUCTION)
<c:forEach var="rows" items="${result1.rows}">
<h2 class="w3-text-theme">
<c:out value="${rows.tutorial_name}"></c:out>
</h2>
<ul id="listSubheadings">
<c:forEach var="rows" items="${result2.rows}">
<li >
<c:out value="${rows.tutorial_subheading}"></c:out>
</li>
</c:forEach>
</ul>
</c:forEach>
Jquery and ajax function to process the inner html( list item name ex:HTML editor and retrieve its tutorial_content and display in the div of same page)
$(document).ready(function() {
//List id to know which element is clicked
$("#listSubheadings").click(function(event) {
document.getElementById('listSubheadings').addEventListener('click',fn);
//main problem here how to target list items that is clicked
function fn(){ alert(this.innerHTML); }
//Store the targeted element in this variable and serve it to servlet through ajax request
var subheading = document.getElementById("listSubheadings").innerHTML;
//to item is clicked what list item is (for development purpose)
alert(this.innerHTML);
/*request to servlet passing the clicked list element and the recieving the tutorial_content
*for that selected tutorial_subheading in response
* */
$.get('Controller', {"subheading": value},
function(resp) {
printSubheading(resp);
printContent(resp);
})
.fail(function() { // on failure
alert("Request failed.");
}); }); });