How to do page transitions in a popup using jquery?

Question

We have a web application which uses jquery. We have to add a new module which will open in a popup. Then all the pages in that module will open in the same popup window using ajax.

We will have pages like add/edit/list/search pages. We want the these pages to be loaded in the same popup.

Is this possible to do page transition in popup. We are using spring MVC.

Edit 1

Its like you click on a link in a menu, it will open a popup. Popup will have few more buttons which will take to new screens but in same popup. I have used ajax to update a small portion of screen. I used to use divs and spans for this. But how do we replace the entire popup page with completely new page with many html components.

As far as I have used ajax, when you do a remote calls, server side methods return some data object as json in response which can be used in client side to update certain area of page.

Can we return entire page in response from server side?

Please help.

Answer 1

You should be able to get an entire page using AJAX just by making a request for a standard page. Then you would just be able to do popup.document.documentElement.innerHTML = newHTML, where newHTML is the HTML returned from the server.

Answer 2

AJAX can work in two way:

• return json object which is used to update content in page
• return html which is used to replace content in page

If you use AJAX to replace the entire page, then any links inside that page will also need to use AJAX to do the same.

An easier approach might be to use an iframe overlay, which can then have the content act like a normal page. So links within the iframe will work like normal links, but only updating the iframe area.