Question

We are using three divs in our application.

1. Header

2. Middle portion

3. Footer

   Url of the application : http://localhost:8080/APPNAME/index.jsp

Header contains three buttons. If we click on the buttons we will change the middle portion div content using the following code:

$('div#middleportion').load('login.jsp');
$('div#middleportion').load('register.jsp');
$('div#middleportion').load('home.jsp');   

Successfully we are loading content. My problem is if we click on login button we are able to display login content in middle portion div, but I need to change the URL as follows:

http://localhost:8080/APPNAME/login.jsp

How to achieve this?

Please help me.Help would be appreciated.

Answer 1

jquery address plugin

EDIT:

I actually had to do the same thing that you’re lookin for (from what i understand).

for pages that I wanted to be loaded dynamically (just the div) I created a version without the layout. for example, for login.jsp I had ajax/login.jsp (which had only the actual div).

since I normally work with mvc and layouts, it was easy to separate the div from the layout on the server side.

In the plugin I made sure that the url’s that are being replaced are only the ones with the class ajax and I added this class to all of the links that i wanted to change the div only.