how to populate HTML div using AJAX to iterate and display arrayList values.

[Monica Shiralkar]

I want to display values received into a JSP table using AJAX.These values will be received using AJAX and Jquery. The way we iterate arrayList to display inside JSP table, the same thing I want to do but using AJAX -Jquery.I know that for displaying a value using AJAX one can use below code:

$('#info').html(response);

But how to do this for displaying an arrayList after iterating it.
thanks

[Monica Shiralkar]

If I send arrayList to JSP page using AJAX call with the below code it displays arrayList as [delhi, mumbai]. I want to display this in HTML table.

 ArrayList tempList=new ArrayList();
	    tempList.add("delhi");
	    tempList.add("mumbai");
	    out.println(tempList.toString());
	    out.flush();

[Bear Bibeault]

First of all, you keep using the term "JSP". It's wrong. Once the JSP engine does its thing and sends the response to the browser, it's an HTML page like any other. So your Ajax and jQuery (note spelling) is not interacting with a JSP. Ever. It interacts with the HTML page that is created by the JSP. That may seem like a subtle distinction, but it's an important one.

So there's no "JSP table"; it's an HTML table.

If you are getting data back as the response -- I assume as JSON -- then once the JSON is evaluated (by jQuery's Ajax methods) you use it just like any other JavaScript data.

To create a table you would use the DOM Manipulation methods of jQuery to build the table using the data.

There are lots of examples of DOM manipulation in the example code of chapter 3 for jQuery in Action (2nd Ed). The example code is free to download.

[Monica Shiralkar]

Thanks. From this I understand that as next I need to do the below:

a) Check how to create and populate values into HTML table using Jquery.
b) Check how to send data from ajax Action class as ajax response. I know how to send a string (simply use out.println and flush out variable but now I need to figure out how to send arraylist).Also I need to know how is JSON involved here as you have mentioned.

[Bear Bibeault]

Monica. Shiralkar wrote:a) Check how to create and populate values into HTML table using Jquery.

Yes, jQuery makes it a lot easier than using the native DOM manipulation API. For example, creating an element is as simple as:

var tableElement = $('<table>')

Then there are methods to hook them into the DOM such as: append(), appendTo(), before() and so on.

b) Check how to send data from ajax Action class as ajax response. I know how to send a string (simply use out.println and flush out variable but now I need to figure out how to send arraylist).Also I need to know how is JSON involved here as you have mentioned.

The easiest way to send data in a response is by encoding it as JSON. the $.getJson() method makes it easy to fetch the JSON and automatically parses it.

[Monica Shiralkar]

thanks. I think to do this I need to add all content of ArrayList into an JSON array and follow it with statements to out.println(jsonarray) and flush the out variable? A question I have in mind is how was this done when JSON was not there?

[Bear Bibeault]

Monica. Shiralkar wrote:I think to do this I need to add all content of ArrayList into an JSON array

You would serialize the List into JSON and send it as the response to the Ajax request.

and follow it with statements to out.println(jsonarray) and flush the out variable?

No. What does JSP have to do with Ajax? The Ajax request is made from the page long after the JSP has executed on the server. This is a concept you need to understand and understand well. Once the page is sent to the browser, JSP is done, finished, over. No more. Please read this article and study it thoroughly until you understand this.

A question I have in mind is how was this done when JSON was not there?

XML. Which has its place but is a pain in the butt with respect to Ajax.

[Monica Shiralkar]

Thanks. The article is quite informative.

[Monica Shiralkar]

Since I will be doing this using JSON I have a doubt. I am doing this for learning and am using the Struts2 Action, AJAX,Jquery. Now I have 2 doubts:
a) Is it correct do to it the way I am doing with JSON without using plugins struts2 has for JSON?
b) Is it the correct way to do it this way without using inbuilt support struts2 has for AJAX?

My approach is to send AJAX request to Struts2 Action using Jquery and render the response on the JSP page. Is it correct with respect to a and b?
thank you

[Bear Bibeault]

Monica. Shiralkar wrote:My approach is to send AJAX request to Struts2 Action using Jquery and render the response on the JSP page

Again. It's not a JSP page anymore. Once it leaves the server, it's an HTML page. Say it aloud into a mirror. It's not a JSP page. Write it on a blackboard 1000 times. It's not a JSP page. Play it to yourself while you sleep. It's not a JSP page. Teach your parrot to say it. It's not a JSP page.

It's not a JSP page.

Is it correct with respect to a and b?

I have no idea. I don't use Struts.

[Monica Shiralkar]

Sorry for that. the 'HTML page'..
Thank You.

[Bear Bibeault]

[Monica Shiralkar]

I changed the code for this but this time it does not display the json data recieved in the HTML table.Nor do I get any error message in google chrome debugger.

below is my code:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<script src="jquery-2.js"></script>
<script type="text/javascript">
	function doAjaxPost() {

		$
				.getJSON(
						"http://localhost:8080/SocialMediaSearch/example/ajaxSubmit.action",
						function(data) {
							var table = $('#display'), row = null, data = null;
							$.each(data, function(id, obj) {
								row = $('<tr></tr>'); // build a row
									$.each(obj, function(colIndex, property) {
										data = $('<td></td>', { //build a td element
													text : property[colIndex]
												// assign the value from the iterated json property
												}).appendTo(row);
									});
								});
							row.appendTo(table); //finally append the row to the table
						});
		;

		// get the form values
		var name = $('#name').val();

	}
</script>
</head>
<body>

<input type="button" value="show Response" onclick=
	doAjaxPost();
>
<br />



<table id="display">
</table>


</body>
</html>

I was receiving json array response using the previous code but on adding the code for HTML table display I do not get any data.Is the above approach correct?
thanks

[Monica Shiralkar]

In json for displaying we use syntax like:

 $('#stage').html('<p> Id: ' + obj.name + '</p>');
             $('#stage').append('<p>Post : ' + obj.post+ '</p>');

What I want know is that whether this is a convenient way of displaying.Like in servlets it was difficult to render HTML tags, then came JSP. Now when we are using Jquery and json they way to render a table would be complex as compared to HTML(or JSP).
thanks

[Bear Bibeault]

Yeah, building DOM can be verbose. There are some templating plugins, but I haven't had a chance to verify that they are ready for primetime.

[Monica Shiralkar]

I have seen websites where initially on putting search criteria data is loaded from server (displayed in very presentable formatting in html table or grid) and there are select buttons on the side to further narrow the search criteria.On doing so response in the similar format is rendered without reloading the page. I suppose they are using AJAX. Now what I am thinking is doing this with AJAX jquery json is it easy to display with such presentable formatting in html table or grid like first time?
thanks

[Bear Bibeault]

Sure. A JSP can format an HTML fragment which gets injected into the DOM. It's just a different approach than returning the data to the page.

[Monica Shiralkar]

I have figured out that the way to display JSON data in HTML page is :

 <script type="text/javascript" language="javascript">
   $(document).ready(function() {
      $("#driver").click(function(event){
          $.getJSON('result.json', function(jd) {
             $('#stage').html('<p> Name: ' + jd.name + '</p>');
             $('#stage').append('<p>Age : ' + jd.age+ '</p>');
             $('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
          });
      });
   });
   </script>

I will next try to display the arrayList in table. This I am doing fom practice on how to write AJAX code with Jquery ,JSON. What I want to really achieve is how to narrow search results using ajax. I will try that once clear with some basic ajax,jquery programs like this.
Thanks You.

[Monica Shiralkar]

I have a doubt. I am trying to narrow the search using AJAX,Jquery. The flow of search would be :

Step 1 User clicks on search button . search results are displayed ( Using HTML table display) : Display1
Step 2 Now there are checkboxes to narrow down the search.on clicking checkbox fewer results are displayed( But in the same style as the original one)


For step 2 I would be using AJAX Jquery call and it will give Display 2. This would require syntax like

 $.getJSON('result.json', function(jd) {  
             $('#stage').html('  ');  
             $('#stage').append('  ');  

This display should give display exactly same like Step 1.

My Doubt:

Since Display 2 should be same as Display 1, is there not a way to REUSE display code written in Step 1. As far as I know we are supposed to use display code in Step 2 which is not same as Step 1 code although display should be similar. Do we have to write code using Jquery for display in a different way again and this should give same output OR there is a way to REUSE the old display code dispaly1?

Thanks

[Bear Bibeault]

Put it in a function you can call from anywhere.

[Monica Shiralkar]

Thanks will try this.

Then there are methods to hook them into the DOM such as: append(), appendTo(), before() and so on.

I tried this. Below is my code.However it does not give any response or error messages. Even in the chrome debugger there are no error messages.

ajaxExample.jsp

<script type="text/javascript" src='jquery-2.js'></script>
<script type='text/javascript'>
$(document).ready(function()
{
$.ajax
({
type: "GET",
url: "http://localhost:8080/SocialMediaSearch/example/ajaxSubmit.action",
dataType:"json",
success: function(data)
{
if(data.Messages.length)
{
$.each(data.Messages, function(i,data)
{
var msg_data="<div id='msg"+data.msg_id+"'>"+data.message+"</div>";
$(msg_data).appendTo("#content");
});
}
else
{
$("#content").html("No Results");
}
}
});
$('#UpdateButton').click(function() 
{
// Previous Post
});
return false;
});

</script>
<html><body>
<textarea id='Message'></textarea><br/>
<input type='button' value=' Update ' id='UpdateButton'/>
<div id='content'></div>

</body></html>

Code from AjaxAction.java is

    ArrayList tempList=new ArrayList();
	    
	    MessageObjects messageObjects1=new MessageObjects();
	    messageObjects1.setMessage("hello");
	    messageObjects1.setMsg_id("1");
	    MessageObjects messageObjects2=new MessageObjects();
	    messageObjects2.setMessage("hello123");
	    messageObjects2.setMsg_id("12");
	   
	    tempList.add(messageObjects1);
	    tempList.add(messageObjects2);
	    //tempList.add("mumbai");
	   // out.println(tempList.toString());
	    
	    JSONObject js = new JSONObject();
	    org.json.JSONArray jsonArray = new JSONArray(tempList);
	    out.println(jsonArray);
	    
	    out.flush();

Please advice where am I going wrong?

[Bear Bibeault]

Please properly indent your code.

[Monica Shiralkar]

Please properly indent your code

Sorry for that. Does it mean that I have extra unwanted comments in the code which should be removed for proper indentation?I have removed them now Also I did Cntrl-Shift-F in eclipse for auto formatting.Also removed extra white spaces Please correct me if anything other is required for proper indenting my code.

My ajaxExample.jsp

 <script type="text/javascript" src='jquery-2.js'></script>
<script type='text/javascript'>
	$(document)
			.ready(
					function() {
						$
								.ajax( {
									type : "GET",
									url : "http://localhost:8080/SocialMediaSearch/example/ajaxSubmit.action",
									dataType : "json",
									success : function(data) {
										if (data.Messages.length) {
											$.each(data.Messages, function(i,
													data) {
												var msg_data = "<div id='msg"
														+ data.msg_id + "'>"
														+ data.message
														+ "</div>";
												$(msg_data)
														.appendTo("#content");
											});
										} else {
											$("#content").html("No Results");
										}
									}
								});
						$('#UpdateButton').click(function() {
							
							});
						return false;
					});
</script>
<html>
<body>
<textarea id='Message'></textarea>
<br />
<input type='button' value=' Update ' id='UpdateButton' />
<div id='content'></div>

</body>
</html>

Below is code from ajaxAction.java

PrintWriter out = response.getWriter();
		ArrayList tempList = new ArrayList();
		MessageObjects messageObjects1 = new MessageObjects();
		messageObjects1.setMessage("hello");
		messageObjects1.setMsg_id("1");
		MessageObjects messageObjects2 = new MessageObjects();
		messageObjects2.setMessage("hello123");
		messageObjects2.setMsg_id("12");
		tempList.add(messageObjects1);
		tempList.add(messageObjects2);
		JSONObject js = new JSONObject();
		org.json.JSONArray jsonArray = new JSONArray(tempList);
		out.println(jsonArray);
		out.flush();

[Monica Shiralkar]

I think instead of getJSON i need to explore and use parseJSON method.

[Monica Shiralkar]

Now I am getting another error in Chrome Debugger the error message says "Uncaught TypeError: Cannot read property 'length' of undefined"

the code I am trying is :

<html>
<head>
<title>Parsing JSON Using jQuery</title>
<script src="http://code.jquery.com/jquery-latest.js"
	type="text/javascript">
	
</script>
</head>
<body>
<a href="#" id="loaduserdata">User Data</a>
<table id="userdata" border="1">
	<thead>
		<th>First Name</th>
		<th>Last Name</th>
		<th>Email Address</th>
		<th>City</th>
	</thead>
	<tbody></tbody>
</table>
<script>
	$(document).ready(function() {
	});
	$("#loaduserdata").click(
			function() {
				$("#userdata tbody").html("");
				$.getJSON("result.json", function(data) {
					$.each(data.userdata, function(i, user) {
						var tblRow = "<tr>" + "<td>" + user.first + "</td>"
								+ "<td>" + user.last + "</td>" + "<td>"
								+ user.email + "</td>" + "<td>" + user.city
								+ "</td>" + "</tr>"
						$(tblRow).appendTo("#userdata tbody");
					});
				});
			});
</script>
</body>
</html>

Below is result.json

   {
		"userdata": [
			{
				"first":"Ciaran",
				"last":"Huber",
				"email":"[e-mail]",
				"city":"Mayagüez"
			},
			{
				"first":"Hillary",
				"last":"Serrano",
				"email":"[e-mail]",
				"city":"Martinsburg"
			}
		]
	}

Thanks.

[Monica Shiralkar]

Finally I am able to run a small example where I am displaying JSON array data on HTML page. The below code is working for me:

  <script type="text/javascript" language="javascript">
   $(document).ready( function() {
	   $.getJSON("result.json", function(data){
	         $.each(data.person, function(){
	  	         $("ul").append("<li>Name: "+this['name']+"</li> <li>Age: "+this['age']+"</li><br />");
	  	   });
	   });
   });
   </script>

Thanks for your help.

[Monica Shiralkar]

I need a help.

If the JSON is as below , I know that person is name of JSON array and rest are key value pairs and I have to specity person,name,age to extract.

{
 "person": [  
     { "name": "Satish", "age": 25 },
     { "name": "Shwetha", "age": 24 }
 ]
}

BUT

If I am getting this JSON array from arrayList (conversion of arrayList to JSON array), I am not understanding that what should be the array name (as person in above) what should be the key value pairs.

ArrayList tempList = new ArrayList();
		MessageObjects messageObjects1 = new MessageObjects();
		messageObjects1.setMessage("hello");
		messageObjects1.setMsg_id("1");
		MessageObjects messageObjects2 = new MessageObjects();
		messageObjects2.setMessage("hello123");
		messageObjects2.setMsg_id("12");
		tempList.add(messageObjects1);
		tempList.add(messageObjects2);
		JSONObject js = new JSONObject();
		org.json.JSONArray jsonArray = new JSONArray(tempList);
		System.out.println("json array");

The JSON of the above code I want to extract but unlike the person JSON array above, here we I do not know the array Name or attributes.

On priting the JSON array using System.out.println, it is displaying

["com.model.MessageObjects@1fb8ee3","com.model.MessageObjects@61de33"]

using this I am not understanding that how to I extract by constructing code as below:

<script type="text/javascript" language="javascript">  
   $(document).ready( function() {  
       $.getJSON("result.json", function(data){  
             $.each(data.person, function(){  
                 $("ul").append("<li>Name: "+this['name']+"</li> <li>Age: "+this['age']+"</li><br />");  
           });  
       });  
   });  
   </script> 

thanks

[Monica Shiralkar]

The easiest way to send data in a response is by encoding it as JSON

This should be a JSON or JSON array?

[Bear Bibeault]

JSON is JSON. Arrays are part of JSON.

[Monica Shiralkar]

thanks. On printing a JSON (to check its content) , which was created after converting an arrayList to JSON, I see the below but no contents:

["com.model.MessageObjects@1fb8ee3","com.model.MessageObjects@61de33"] 

I want to see the JSON the one created by myArrayList.toJSON method but I see the above after doing a System.out.println or using toString().

[Monica Shiralkar]

Or my approach is wrong and

should I be using gson too as below ? instead or using

myArrayList.toJSON()

gson.toJson(obj);

thanks

[Bear Bibeault]

Monica. Shiralkar wrote:thanks. On printing a JSON (to check its content) , which was created after converting an arrayList to JSON, I see the below but no contents:

["com.model.MessageObjects@1fb8ee3","com.model.MessageObjects@61de33"] 

I want to see the JSON the one created by myArrayList.toJSON method but I see the above after doing a System.out.println or using toString().

How did you do the conversion to JSON? Those are the toString() outputs of the objects in the list.

If you are trying to create the JSON by hand, then yes, stop that and start using a real JSON library such as Gson or other.

[Monica Shiralkar]

thanks. I did like this:

     ArrayList tempList = new ArrayList();
		MessageObjects messageObjects1 = new MessageObjects();
		messageObjects1.setMessage("hello");
		messageObjects1.setMsg_id("1");
		tempList.add(messageObjects1);
		JSONObject js = new JSONObject();
		org.json.JSONArray jsonArray = new JSONArray(tempList);

Does the last line not create a JSON from an arrayList by passing the list as constructor?

[Bear Bibeault]

Apparently the JSON library you've chosen is rather poor. I'd switch to a more well-behaved JSON converter such as Gson or Jackson.

[Monica Shiralkar]

Apparently the JSON library you've chosen is rather poor

Actually I did not use any external library at all. All I used is

 org.json.JSONArray jsonArray = new JSONArray(tempList); 

I has searched on internet and got this as a way to convert arrayList to JSON but It seems this way does not convert arrayList into JSON Array.

thanks

[Bear Bibeault]

org.json is not a native package.

[Monica Shiralkar]

org.json is not a native package.

But for this I did not have to put any library into classpath apart from json jar. My understanding was: If you do not need to put external lib in classpath it is native package else not.

[Bear Bibeault]

It is not.

[Monica Shiralkar]

Now I am using gson library and am able to convert the arrayList to JSON. However I am experiencing another issue now. After the AJAX call from JQuery, the JSON is getting displayed as JSON whereas in the javascript, I have written the code to parse this JSON. On calling the web page I am getting the below displayed:

[{"msg_id":"1","message":"hello"},{"msg_id":"12","message":"hello123"}]

This information is correct but I have written code to parse the JSON in the jquery and expected to see the data in table format.

Below is my Jquery Ajax call:

  <script type="text/javascript" 
   src="jquery-2.js"></script>
   <script type="text/javascript" language="javascript">
   $(document).ready( function() {
	   $.getJSON("http://localhost:8080/SocialMediaSearch/example/ajaxSubmit.action", function(data){
	         $.each(data.person, function(){
	  	         $("ul").append("<li>Msg ID "+this['msg_id']+"</li> <li>Message: "+this['message']+"</li><br />");
	  	   });
	   });
   });
   </script>
</head>
<body>
   <ul></ul>
</body>
</html>

Below is the code from this class method called from the ajax action:

HttpServletResponse response = ServletActionContext.getResponse();
		PrintWriter out = response.getWriter();
		ArrayList tempList = new ArrayList();
		MessageObjects messageObjects1 = new MessageObjects();
		messageObjects1.setMessage("hello");
		messageObjects1.setMsg_id("1");
		MessageObjects messageObjects2 = new MessageObjects();
		messageObjects2.setMessage("hello123");
		messageObjects2.setMsg_id("12");
		tempList.add(messageObjects1);
		tempList.add(messageObjects2);
	        String json = gson.toJson(tempList);
                out.println(json);
		out.flush();
		return SUCCESS;

Now I expected above code to display Json data in HTML table format. However it is displaying it as JSON itself. Where am I going wrong?

thanks

[Bear Bibeault]

Monica. Shiralkar wrote: On calling the web page I am getting the below displayed:

[{"msg_id":"1","message":"hello"},{"msg_id":"12","message":"hello123"}]

Displayed where? The JavaScript you posted cannot produce that output.

$("ul").append("<li>Msg ID "+this['msg_id']+"</li> <li>Message: "+this['message']+"</li><br />");

You cant append a <br> to a <ul>. You chould create and append each <li> element individually, and only append <li> elements to the list.

Also why are you using the this['msg_id'] notation rather than the simpler this.msg_id? It just makes the code look busier than it needs to be.

Now I expected above code to display Json data in HTML table format.

Surely you mean list format. There is no table being defined anywhere.