• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 454
  • Last Modified:

How to make Table on jsp by parsing a string of records

hi
i want to make ajax call on click of a icon,such that it calls a struts action in background which hits the db and fetches the records from a oracle DB in a map or list. now i want to populate a div on the same jsp where the icon was with the records shown in a tabular form. this all has to be done without reloading the complete page.such that when user clicks the icon a div comes up and the controls on rest of the page becomes un acessible. the query result can have n number of records to be displayed.i need this solution urgently.please provide with some sample code or examples.also i cudnt use ant third part frameworks like json,dojo.please help me in this.
0
manojvashisht
Asked:
manojvashisht
  • 9
  • 9
  • 2
8 Solutions
 
Murali MurugesanFull stack Java developerCommented:
0
 
manojvashishtAuthor Commented:
Hi
This link talks about showing table of data in a popup window,where as i need to show the data in the same jsp by populating a div as a highlighted area,i want to do the same using the ajax in background doing the records retrieval in background.
0
 
Murali MurugesanFull stack Java developerCommented:
yes the example says its a popup , tht doent differ much with respect to div tags.

1. To be precise have a servlet for ur ajax request.
2. Write a xmlHttpRequest objects that hits ur ajax servlet with some request param say "fetchDbData".
3. Query the db and load the data as an well formed XML document with tags of ur column name. Incase of very few columns u can create a large string with some delimiters like "Col1:val1,Col2:val2 "
4. In the javascript get the XML response and navigate through the DOM.
5. To highlight the div write a CSS class with z-index:100, which u can apply it to a div tag.Have the div tag style="display:none" initially once the db results are fetched make it visible.

-Murali*


0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
manojvashishtAuthor Commented:
Hi

what you have posted provides a clear picture,but as i am very new to ajax and java stuff i have few queries if could look into.
1) how i could make a XML document for the records coming from DB suppose i have 5 columns per row to display like   name,ID,Phone,City,Zip  for n number of rows i.e it could be 2 rows at one hit and 100 rows next time i hit the Db. i you could provide some code snippet.

2) How could the xml could be parsed at the client side with javascript, suppose i have this XML

<data>
<name>mack</name>
<Id>234</Id>
<City>delhi</City>
<data>
<data>
<name>Ram</name>
<Id>235</Id>
<City>delhi</City>
<data>
<data>
<name>Anuj</name>
<Id>236</Id>
<City>delhi</City>
<data>
.
.
.
.upto n how the same could be parsed,like how to check how many nodes it have then running a loop for the same.then setting thesame into table for display

Open in new window

0
 
manojvashishtAuthor Commented:
any updates??
i need to solve it urgently
0
 
Murali MurugesanFull stack Java developerCommented:
Here is a very clean and good example fo parsing an xml and adding it to div...

http://www.quirksmode.org/blog/archives/2005/12/the_ajax_respon.html
0
 
Murali MurugesanFull stack Java developerCommented:
since you are in so much hurry, i can suggest you a very easy solution (just a try).
Form the results of your query as an html itself. i mean starting from <html> tag ..just constuct the table and pass it as a response for ajax request.
In javascript just do this

document.getElementById('divtag').innerHTML = req.responseText;

u should get a  div with tables.

-Murali*

0
 
manojvashishtAuthor Commented:
can you show any example,because i am not very clear about how to make a table for resultset in java.

how the data from list would be populated in html table
0
 
manojvashishtAuthor Commented:
hi actually i am very new  to all this stuff.a little more help from ur side is highly appreciated.

i am confused that if my DB query returns 50 records in a list .how i would put these records as html output and populate them in a div.

basically making a table to display those on jsp then.
0
 
Murali MurugesanFull stack Java developerCommented:
see the below sample.. You need to create the responseText value from the Ajax servlet.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
#outer{position:absolute;top:0px;left:0px;overflow:hidden;display:none;width:100%;height:100%;background-color:#000000;opacity:0.1;MozOpacity:0.5;
zIndex:50;filter:alpha(opacity=40);text-align:center}
#innerDiv{margin:auto;position:relative;width:400px;height:200px;background-color:white;color:black;padding:10px;zIndex:100;}
</style>
 
<script>
 
	var responseText = "<table><tr><td>Name :</td><td>Leo</td></tr><tr><td>Emp Id:</td><td>007</td></tr></table>";
 
	function showDivTable() 
	{  
	 
			var cover=document.getElementById('outer');
			document.getElementById("innerDiv").innerHTML = responseText;	
			document.getElementById('outer').style.display='block';
	}
 
</script>
</HEAD>
 
<BODY>
		<div id="outer">
				<div id="innerDiv">
				
				</div>
		</div>
 
	<form>
		<INPUT TYPE="button" onclick="showDivTable();" value="Show Table"/>
	</form>
</BODY>
</HTML>

Open in new window

0
 
manojvashishtAuthor Commented:
you mean to say that suppose for 50 records i will have to keep appending the values.

if this is the case then this confuses me more because how would i create such a large string.

can you help me with any logic or some kind of loop for a method to append the values
0
 
manojvashishtAuthor Commented:
also i am not using any servlet, i am calling a action which processes the db for updates,can u please provide what changes have to be made in struts config for this action mapping
0
 
Murali MurugesanFull stack Java developerCommented:
For Struts i dont think u need to make any special changes , have a seperate action class for the ajax request and call it as you call it using a normal html form.

As for as logic to construct a table i can think of this below,

// pass a parameter List with full of Map values
// Map should have key as column name and column value as value.
//so each Map represents a row from db table

public StringBuffer createTable(List<Map> results){
              StringBuffer table ="";            
              table.append("<table>");
           
                for( iterate list here...){
                     Map row = results.get(i);
                     table.append(" <tr>");
                     table.append("<td>"+row.get("ColumnName")+"</td>");
                     table.append("<td>"+row.get("ColumnValue")+"</td>");
                     table.append(" </tr>");                        
                }
                table.append("</table>");
 return table;          
}


add css styles for table as you need...


-Murali*
0
 
manojvashishtAuthor Commented:
hi
I have a query,when i will call the struts action and then parse the db results to make a stringbuffer,
the struts action would give a forward,in this case the page would be reloaded or not
0
 
Murali MurugesanFull stack Java developerCommented:
i would suggest you to start working on the issue first, gradually you will be answering urself all the queries on your way...

-Murali*
0
 
KuldeepchaturvediCommented:
All you have to do in your config table is

<action path="/yourTable" type="yourapp.TableAction" />

the code that Murali have provided will go in TableAction Class's execute method..

once you have your stringbuffer, you can write it to Response's outputstream

PrintWriter out = response.getWriter();
    out.println(table.toString());
    out.flush();

Remember not all struts action have to have a forward..
All other pointers are already given by Murali at different posts in this thread

0
 
KuldeepchaturvediCommented:
I believe I gave you only the final piece of puzzle, Murali's comments helped you to achieve the overall solution.
Please redistribute the points.
0
 
Murali MurugesanFull stack Java developerCommented:
thanks for the recommendation Kuldeep.
0
 
manojvashishtAuthor Commented:
hi i really didn't  knew whether accepting grants all the point at the level it was accepted.

my sincere apologies ,ofcourse it was murali kanth's comments which helped me get going.

but the problem is how to re assign ,please suggest
0
 
Murali MurugesanFull stack Java developerCommented:
Even i m not sure of how to re-assign the points, probably i would raise a "Request attention" so that the zone advisor would get into picture and you can tell him about the re-assignment.
 
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 9
  • 9
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now