• Post Reply Bookmark Topic Watch Topic
  • New Topic

AJAX Content, Reloading the page

 
Brian Ata
Greenhorn
Posts: 27
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi guys,

First of all I am very happy to find this place since I am in the progress of learning Jspx along with many other
related technologies.

In this journey, I am having a little trouble implementing a solution for the following problem:

I have a page that consists of a header, left column, content,right column and a footer.
In the content part, I have a div that I append html returned by an ajax call handled by jQUERY, content generated by a servlet
and passed along with a Bean.

All is fun, interface is responsive since the heavy content is siting on the client side while the dynamic content is generated and
pulled from the server.

But when I hit Page Reload, all dynamic content is gone, i lose the state of the page.

Since I am still learning ( very limited experience I have in web development), I tried the first thing I thought logical, and that is:

1. Sending the page state variables that was originally used by the jquery to generate the dynamic content in a session bean and
Read that session bean in a <jsp:scriplet></jsp:scriplet> in the jspx page. But I cannot think of a way to pass these parameters
again to the javascript to recall the original state before page reload.

I hope somebody has an answer,
Thanks for reading this boring ( or maybe funny to advanced eyes ; ) ) post.
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 65522
105
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Brian Ata wrote:... I am in the progress of learning Jspx ...

jspx? really? You mean the JSP XML document format? Why would you be using that? That format is unsuitable for hand coding -- it's used only as an intermediary format, and for JSPs automatically generated from code.

In the content part, I have a div that I append html returned by an ajax call handled by jQUERY

jQuery, not jQUERY.

But when I hit Page Reload, all dynamic content is gone, i lose the state of the page.

Correct. You need to store any state to be restored on the server so that the JSP can either recreate the dynamic content, or trigger similar JavaScript to recreate the state of the page.

I usually opt for the former so that the page doesn't have try to recreate the state in script.
 
Brian Ata
Greenhorn
Posts: 27
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Bear Bibeault wrote:
jspx? really? You mean the JSP XML document format? Why would you be using that? That format is unsuitable for hand coding -- it's used only as an intermediary format, and for JSPs automatically generated from code.


I am sorry, I meant the JSP XML document format.
I am using it because it is well-formed.

Bear Bibeault wrote:
jQuery, not jQUERY.


Sorry again : - ) I just realized , are you the software engineer/developer who wrote the "jQuery in Action", If it is you,
I am honored to meet you here : ) , I have only read the first 30 pages so far (recently got the book from amazon), and loved the book.

So let me try to revise my question.
How can I trigger a javascript function with parameters pulled from a session object after a page reload?

Thank you for your time again.

Edit: Ok, I just realized you have the links to your books , so my first question is answered.
Thanks again for exiting ideas (FrontMan - first heard of it from my professor as an alternative approach to
struts for if my memory is not failing me simplified front controller pattern applied and also thanks for
at least one particular book I have : )

 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 65522
105
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Brian Ata wrote:
Bear Bibeault wrote:
jspx? really? You mean the JSP XML document format? Why would you be using that? That format is unsuitable for hand coding -- it's used only as an intermediary format, and for JSPs automatically generated from code.


I am sorry, I meant the JSP XML document format.
I am using it because it is well-formed.

Bad, bad idea. No one uses that format because it's not meant for hand-coding. You will find that not only will you spend most of your time fighting to keep the syntax right, when you finish, the JSP code will be unreadable. I highly suggest using the normal JSP format like everyone else.
Sorry again : - ) I just realized , are you the software engineer/developer who wrote the "jQuery in Action", If it is you,
I am honored to meet you here : ) , I have only read the first 30 pages so far (recently got the book from amazon), and loved the book.

Thanks for the feedback. Always appreciated.

I point this out, not because I wrote a jQuery book, but because programming is all about precision and accuracy. You should put as much care into your posts as you do into your code.

How can I trigger a javascript function with parameters pulled from a session object after a page reload?

As I said, this is not the way that I would approach this. I would use JSP to restore the state of the page, not try to "re run" the JavaScript.

That said, also remember that with JSP you can create any JavaScript code that you want.

Edit: Ok, I just realized you have the links to your books , so my first question is answered.
Thanks again for exiting ideas (FrontMan - first heard of it from my professor as an alternative approach to
struts for if my memory is not failing me simplified front controller pattern applied and also thanks for
at least one particular book I have : )

You are very welcome.
 
Hongli Li
Ranch Hand
Posts: 124
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I think your problem falls into deep linking category, you can store you states by using programmatic hash state management. general idea is after each ajax call you need to keep the state by appending/replacing state information to the url after the # sign(fragment). History & bookmarking are both done through hashchange event. there are many javascript libs do that. jQuery BBQ is what I used.
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 65522
105
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Using the hash is useful when there's no other way to retain data. But in a Java web app, the session is a lot easier to deal with. And then, as I said, you can restore the state of the page on the server where it's a lot easier to deal with than on the client.
 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 65522
105
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
By the way, my online Black Box game does exactly this.

The game state is stored on the server, and the JSP that shows the game board knows how to completely repaint the current state of the game board from this information. During game play, the board is manipulated on the client side, but any time that the page is refreshed, it's completely repainted by the JSP.
 
Brian Ata
Greenhorn
Posts: 27
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thank you very much for all your guy's valuable time,

After the first part of the discussion with Bear, I designed a "PageStateBean" that can hold
the key data that is just enough to generate/recall the page state when needed and I put that
bean to the session scope for use.

I tried to use that information on client side by automatically triggering a JavaScript function every time
the page lost its state, and it is working but as you guys pointed out, this is not a good solution.

Now what I want to try is ,on the server side, via JSP, I want to restore the ajax generated partial view of the
page by directly making use of PageStateBean in session.

One more question that is bugging me is what if I carry the AJAX generated view itself in the PageStateBean,
not the necessary information to build it, so that I can just render that information directly on page.

The only problem with this I can see is, I use AJAX to improve responsiveness of the web application, so
any extra baggage I put on the communication layer, or cpu and ram for processing, etc .. is like I am
betraying the whole concept.

Is there any design patterns available to follow for the solution of losing of the page state for the AJAX
enabled applications?

The Hash table solution is an overkill for my project. I only lose my state when there is a page refresh,
or an ErrorBean is returned for the form that is put to view again by an AJAX call ( form gone, error on
the screen, user needs to see both). And more importantly the content I want to recall is not bookmark able.

Thanks again,
Brian Ata


 
Bear Bibeault
Author and ninkuma
Marshal
Posts: 65522
105
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Brian Ata wrote:One more question that is bugging me is what if I carry the AJAX generated view itself in the PageStateBean,
not the necessary information to build it, so that I can just render that information directly on page.

I would not recommend this approach. Ever.

The only problem with this I can see is, I use AJAX to improve responsiveness of the web application, so
any extra baggage I put on the communication layer, or cpu and ram for processing, etc .. is like I am
betraying the whole concept.

Completely needless concern. Any overhead in generating the HTML via JSP completely pales in comparison to the overhead of additional requests. Using Ajax is not faster than using JSP in the first place. Where Ajax gives you a performance boost is being able to update portions of the page without refreshing the entire thing.
 
Brian Ata
Greenhorn
Posts: 27
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I have been trying to use scriplets with java server pages in xml format, and now I understand how painful it can be.
I spent a good hour trying to use html tags inside a scriplet, but failed every single time as the document failed to pass
well-formed test because of the html tags I tried to use inside the scriplet.

I switched to regular format, and now have implemented a solution as Bear suggested.

Again thank you all for your time,
I marked the topic as resolved.
 
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!