File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes should I be using ajax or just generate with javascript? Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Spring in Action this week in the Spring forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "should I be using ajax or just generate with javascript?" Watch "should I be using ajax or just generate with javascript?" New topic
Author

should I be using ajax or just generate with javascript?

Michael Hubele
Ranch Hand

Joined: Dec 17, 2005
Posts: 182
Hi

I making a flashcard game. I am currently working on the area where the user can choose what they want. I have finished getting the values out of the checkboxes and selecting entire rows. I am now moving on how to display the information to the user.

I am not sure how I should proceed with this.

I have 6 different tables with different information in it. This gives a total of over 150 checkboxes and 150images(about 200kb total).

A user can choose what they want. So it is possible they might not touch a table at all. Or they could choose something from each table.

These tables are generated from a database(ms sql 2005). So all the checkboxes and image are made dynamically and the images get their path from the database and the checkboxes will get their value from the database as well.

I am thinking of displaying each table on demand(so only if the user clicks on the link to get the table).

The user will see at the top of the area a list of links like(you can think of it as a tabs just with out the tab part of it):

table1 | table2 | table3 | table 4 | table5 | table6

So through CSS I will make it change color on hover. When a user clicks on one of them it will go bolder(I will use jquery to remove the other css class and add a new one on).

So now I am not sure how I should be displaying it. Should I have them all load up on page_load and hide all but one table?

Or should I just generate one table and then when the user clicks on another table generate it through ajax and display it.

These are the Pros and con's for each one.

Javascript Prosp

1. This way is probably simpler.
2. less to keep track off(see Ajax cons).

Javascript Con's

1. Slow load time(since got to load all tables up and not the ones they just want).

Ajax Pros

1. Get to learn a bit of ajax(there are other things on my site what might need ajax so I am not just going to use it for the sake of using it).
2. Load up only what is needed. So it should be faster load times.

Ajax Con's

1. Have to keep track of more. Like if the user goes to table1 and checks 5 checkboxes. I have to store those checbboxes right away since if they go to a new table won't I have to have those results stored or they will be lost?

If I used the one where they are all generated I will won't have to store any of their choices till they hit the start button since its all on the same page.

Also with the ajax way I would have to make sure if they checked 5 boxes and come back to that table later that those 5 boxes are still checked.

So what is the better way to go in this case? javascript and generate all at once?

Like I said I want to learn a bit of ajax but I not going to go out of my way to use it just for the sake of using it. I pretty sure there will be other things on my site that will probably end up using ajax(I am sure I will be posting a message and asking how to do that after I figure out this stuff).
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61418
    
  67

I'll usually opt for the on-demand approach using Ajax. But it doesn't sound like we're talking about enough data for performance to be an issue in either approach. Use whichever seems the most "right" to you.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Michael Hubele
Ranch Hand

Joined: Dec 17, 2005
Posts: 182
Originally posted by Bear Bibeault:
I'll usually opt for the on-demand approach using Ajax. But it doesn't sound like we're talking about enough data for performance to be an issue in either approach. Use whichever seems the most "right" to you.


Ya I think right now I am just going to generate the data all on page_load and see how that goes. Since that will cut out alot of grief with keeping track of what has been checked or not for each table.

I can come back later and do in ajax if I feel I need to. Maybe after my site is done I will come back and make it in ajax so I can use it to further learn how to use ajax.

Now I need to look into how to make this. I know they got a tab plugin for jQuery but I don't really want to use that. Since I don't need to the graphics and stuff.

I am guessing making the tab sort of thing is all about making containers and hiding and showing depending on an action.

[ June 15, 2008: Message edited by: Michael Hubele ]
[ June 15, 2008: Message edited by: Michael Hubele ]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61418
    
  67

Originally posted by Michael Hubele:
I am guessing making the tab sort of thing is all about making containers and hiding and showing depending on an action.
Yup, pretty much.

It's just a lot of CSS/HTMl to make thing look like you want, and then some JavaScript to hide/show (or fetch) the current "tab contents".

Lots of examples all over the web if you need them.
Michael Hubele
Ranch Hand

Joined: Dec 17, 2005
Posts: 182
Originally posted by Bear Bibeault:
Yup, pretty much.

It's just a lot of CSS/HTMl to make thing look like you want, and then some JavaScript to hide/show (or fetch) the current "tab contents".

Lots of examples all over the web if you need them.


Yep been looking around and I came up with this. Not sure how efficient this is or if I could have merged any statements together but it seems to work. If you see something that could better please let me know.

javascript code-(in the rdy function)



html generated code.



asp.net code:



Took me a little while to figure out that asp :p anels are generated as div's. So I kept trying to do stuff like this $("Panels") what would result in nothing being found.

Also what I tried to do originally was I tried to change the Visible attribute through javascript. But this never worked since first the ones that where hidden by default(Visible="false").

So when I tried to find all :hidden they where never found because apparently when you put Visible="false" they are never rendered period.

I also tried to use .attr("Visible",true) but of course this did not work either because this only seems to work on the server as well.

So I decided to use show() and hide(). I don't know if this is any better or worse then using css and change the display to none.

[ June 15, 2008: Message edited by: Michael Hubele ]
[ June 15, 2008: Message edited by: Michael Hubele ]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61418
    
  67

Took me a little while to figure out that asp panels are generated as div's. So I kept trying to do stuff like this $("Panels") what would result in nothing being found.
What things are called on the server makes no difference, as you have discovered. The HTML that gets sent to the browser is all that matters.

You can inspect this with View Source.

<pesonal-opinion>
Personally I prefer to mostly hand-code all my HTML, and take advantage of server-side abstractions only when they provide a great deal more benefit than the complexity they bring.
</personal-opinion>

Also what I tried to do originally was I tried to change the Visible attribute through javascript. But this never worked since first the ones that where hidden by default(Visible="false").
Visibility is not the CSS property you seek. You want to toggle the display CSS property between none and block.

Visibility just affects whether it's visible or not. The display property actually removes the element from the display.

I also tried to use .attr("Visible",true) but of course this did not work either because this only seems to work on the server as well.
Again, what you do on the server in ASP (or JSP, or JSF, or php, or whatever) has no bearing. Learn the client-side concepts. They're all that matter when you're scripting on the client.

And attr() is not the correct method in any case; what you want is .hide() and .show() which will do the right things. If you want to do it "by hand" then:.

So I decided to use show() and hide(). I don't know if this is any better or worse then using css and change the display to none.
This is the correct way to do it when using jQuery; as pointed, out, it figures out the right thing to do.

To make something initially hidden, you can give it a display property of none in the CSS, or apply .hide() to it in the ready handler.
[ June 15, 2008: Message edited by: Bear Bibeault ]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61418
    
  67

P.S. Do you have access to an HTML reformatter? The long lines that the ASP is generating really boofs up the topic display as you can see and makes it really difficult to try and read your posts. Reformatting to better-structured HTML would be a cool thing to do.
Michael Hubele
Ranch Hand

Joined: Dec 17, 2005
Posts: 182
Originally posted by Bear Bibeault:
P.S. Do you have access to an HTML reformatter? The long lines that the ASP is generating really boofs up the topic display as you can see and makes it really difficult to try and read your posts. Reformatting to better-structured HTML would be a cool thing to do.


Ya I did not know that it would look that. I will from now on put the html generated code through DreamWeaver and let it format the code for me.

It should be better now.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61418
    
  67

Originally posted by Michael Hubele:
It should be better now.

Much! I fall at your feet in gratitude.
 
It is sorta covered in the JavaRanch Style Guide.
 
subject: should I be using ajax or just generate with javascript?