aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes how to populate HTML div using AJAX to iterate and display arrayList values. Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "how to populate HTML div using AJAX to iterate and display arrayList values." Watch "how to populate HTML div using AJAX to iterate and display arrayList values." New topic
Author

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

Monica. Shiralkar
Ranch Hand

Joined: Jul 07, 2012
Posts: 644
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:


But how to do this for displaying an arrayList after iterating it.
thanks
Monica. Shiralkar
Ranch Hand

Joined: Jul 07, 2012
Posts: 644
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.


Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61233
    
  66

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.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Monica. Shiralkar
Ranch Hand

Joined: Jul 07, 2012
Posts: 644
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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61233
    
  66

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:

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
Ranch Hand

Joined: Jul 07, 2012
Posts: 644
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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61233
    
  66

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
Ranch Hand

Joined: Jul 07, 2012
Posts: 644
Thanks. The article is quite informative.
Monica. Shiralkar
Ranch Hand

Joined: Jul 07, 2012
Posts: 644
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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61233
    
  66

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
Ranch Hand

Joined: Jul 07, 2012
Posts: 644
Sorry for that. the 'HTML page'..
Thank You.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61233
    
  66

Monica. Shiralkar
Ranch Hand

Joined: Jul 07, 2012
Posts: 644
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:



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
Ranch Hand

Joined: Jul 07, 2012
Posts: 644
In json for displaying we use syntax like:




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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61233
    
  66

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
Ranch Hand

Joined: Jul 07, 2012
Posts: 644
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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61233
    
  66

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
Ranch Hand

Joined: Jul 07, 2012
Posts: 644
I have figured out that the way to display JSON data in HTML page is :




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
Ranch Hand

Joined: Jul 07, 2012
Posts: 644
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




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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61233
    
  66

Put it in a function you can call from anywhere.
Monica. Shiralkar
Ranch Hand

Joined: Jul 07, 2012
Posts: 644
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



Code from AjaxAction.java is



Please advice where am I going wrong?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61233
    
  66

Please properly indent your code.
Monica. Shiralkar
Ranch Hand

Joined: Jul 07, 2012
Posts: 644
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

Below is code from ajaxAction.java




Monica. Shiralkar
Ranch Hand

Joined: Jul 07, 2012
Posts: 644
I think instead of getJSON i need to explore and use parseJSON method.
Monica. Shiralkar
Ranch Hand

Joined: Jul 07, 2012
Posts: 644
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 :




Below is result.json


Thanks.
Monica. Shiralkar
Ranch Hand

Joined: Jul 07, 2012
Posts: 644
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:



Thanks for your help.
Monica. Shiralkar
Ranch Hand

Joined: Jul 07, 2012
Posts: 644
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.



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.





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:




thanks
Monica. Shiralkar
Ranch Hand

Joined: Jul 07, 2012
Posts: 644
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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61233
    
  66

JSON is JSON. Arrays are part of JSON.
Monica. Shiralkar
Ranch Hand

Joined: Jul 07, 2012
Posts: 644
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:




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
Ranch Hand

Joined: Jul 07, 2012
Posts: 644
Or my approach is wrong and

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



thanks
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61233
    
  66

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:




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
Ranch Hand

Joined: Jul 07, 2012
Posts: 644
thanks. I did like this:



Does the last line not create a JSON from an arrayList by passing the list as constructor?
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61233
    
  66

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
Ranch Hand

Joined: Jul 07, 2012
Posts: 644
Apparently the JSON library you've chosen is rather poor


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



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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61233
    
  66

org.json is not a native package.
Monica. Shiralkar
Ranch Hand

Joined: Jul 07, 2012
Posts: 644
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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61233
    
  66

It is not.
Monica. Shiralkar
Ranch Hand

Joined: Jul 07, 2012
Posts: 644
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:





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




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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61233
    
  66

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.
 
With a little knowledge, a cast iron skillet is non-stick and lasts a lifetime.
 
subject: how to populate HTML div using AJAX to iterate and display arrayList values.