Calling DB onSelectRadio and populating another table in the same JSP page

[Kuppuraj Gunasekaran]

Hi All,

Am new to JSP & Java Script.

I have a following scenario
A table with certain customer Ids, each row has a radio button and on click of it I should populate another table to fetch the customer details (on the same page)

I have declared 2 page level variables in my jsp

<%!
private boolean showtable = false;
private String selectedId = "";
%>

<script type="text/javascript">
function setId(idVal)
{
alert(idVal);
<% selectedId="<script>document.writeln(selectedId)</script>";%>
}
</script>

<form>
<table>
This table has every Id and few meta data and a radio button on each row which calls the java script on click
</table>

<table>
I need to populate this table based on the jsp variable selectedId that is set in the java script.
I call my Java function here passing the parameter ' selectedId' and then filling the table.
</table>

</form>

My problem is I need to call the DB and get the 2nd table details. How do I do it?
Please help me!

Thanks

[Bear Bibeault]

Firstly, your JSP knowledge is over 10 years old. Java code hasn't been appropriate to put into a JSP since 2002. Read this JspFaq entry.

Secondly, you'd use Ajax to make a request to the server.

[Kuppuraj Gunasekaran]

I have worked on Struts, Ice faces JSF and many other MVC framework and am pretty much aware of the fact that writing Java code in JSP is bad.
But now am working on a project where only JSP and Java Scripting are being used and not any advanced framework.

In struts, JSF you follow the MVC pattern properly and you can redirect as per your needs but in case of JSP I need to refresh the page or try using Ajax as you say.
I ll try to explore AJAX option which is better than reloading the page.

Thanks

[Bear Bibeault]

Kuppuraj Gunasekaran wrote:I have worked on Struts, Ice faces JSF and many other MVC framework and am pretty much aware of the fact that writing Java code in JSP is bad.
But now am working on a project where only JSP and Java Scripting are being used and not any advanced framework.

No framework is needed to use JSPs properly. It's no excuse to create shoddy work.

[Kuppuraj Gunasekaran]

Ok. So can you brief me about the right approach using JSP?
Or can you point me to some good material that explains the right approach?

Thanks for the Help

[Bear Bibeault]

Kuppuraj Gunasekaran wrote:Ok. So can you brief me about the right approach using JSP?

No scriptlets. Use the JSTL and EL.

see this article for an article on properly structuring a web app (no framework needed).

[Kuppuraj Gunasekaran]

Thanks again!

I will go through it and get back in case I have any questions.

[Kuppuraj Gunasekaran]

Hi,

I modified my JSP to not have any scriptlets and I tried using jQuery for the asynchronous call, but I am not seeing any call happening to my servlet.

Here is what am doing

My jQuery funcion to make a servlet call to get the data when the radio button is selected

<script type="text/javascript" src="jQuery Source URL">

$(document).ready(function() {
    $("input[name='selectedId']").change(function() { 
    	var cIdVal = $('#selectedCId').val(); //selectedCId is the id of another element whose value I need to pass to the servlet
    	alert(cIdVal); //Even the alert is not displaying the value of cIdVal
    	getValues(cIdVal); 
    });
});
function getValues(cId) {
	alert(cId);
    $.getJSON('xyzServlet?Id=' + cId, function(opts) {
        if (opts) {
        	var $table = $('<table>').appendTo($('#div1')); 
            $.each(opts, function(index, value) {    
                $('<tr>').appendTo($table)                     
                    .append($('<td>').text(value.Id))        
                    .append($('<td>').text(value.Name))      
                    
            });
        } 
    });
}

</script>

My JSP code

<c:forEach item in a ArrayList>
<tr>
<td id="selectedCId">Id value displayed</td> <!-- This is the id I want to pass to the Servlet as a parameter when the radio button is selected-->
<td> <input type="radio" name="selectedId" id="radioId" /> </td> <!-- Every row in the table has an id and a radio button next to it -->
</tr>
</c:forEach>

<!-- Div to hold the Servlet response table -->
<div id="div1>
I want the table in the jQuery function to appear here
</div>

Servlets doGet method

protected void doGet(HttpServletRequest request, HttpServletResponse response)	throws ServletException, IOException {
	String Id = request.getParameter("Id");
	List<String> ll = getListFromMap(Id);
	String json = new Gson().toJson(ll);
	response.setContentType("application/json");
	response.setCharacterEncoding("UTF-8");
	response.getWriter().write(json);
}

web.xml

<servlet>
		<servlet-name>xyzServlet</servlet-name>
		<servlet-class>com.impl.XYZServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>xyzServlet</servlet-name>
		<url-pattern>/xyzServlet/*</url-pattern>
	</servlet-mapping>

Can somebody help me... is something wrong with my code??

Thanks

[Bear Bibeault]

Have you used the browser's debugger to see if the request is being issued or not?

[Kuppuraj Gunasekaran]

Its not being issued.
I tried putting alert boxes to alert the values I pass.
Even the alert boxes are not popping up. So am very confused.

[Bear Bibeault]

Time to set breakpoints and see where the code is going wrong. Is the change handler even called?