1

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.");
        });    });  });
Vijay Singh
  • 132
  • 10

0 Answers0