Servlet加载新页面

Question

I have the following problem:

I have two servlets, one returns a navigation. There are categories and subcategories that the servlet gets through the DAO. I use the following script to get the servlets result on the right position:

$(document).ready(function() {                        
                $('#navigation').load('Navigation');
                $('#content').load('Content');
            });

Below my navigation div, I have a content div. As you can see, i am loading the content-servlet. In my navigation; i have the following elements:

<li><a><form action='Content' method='get'><button type='submit'>"
                                + k2.getKName() + "</button><input type='hidden' name='category' value='"+ k2.getKategorieNr() + "'/></form></a></li>

Now when I click on a subcategory, the button will call the content servlet. The problem is, that it loads a new page without the navigation. So I can only see the code that the servlet returns in a new page.

How can I get the result of the content servlet inside my previous page as it already works for my navigation servlet?

Answer 1

When you load your page initially, $("#navigation").load("Navigation") makes an AJAX request to your Navigation servlet and pastes the HTML response from the servlet back into an element like <div id="navigation">.

When you click your button in the form, you are making a top-level full page request to the same servlet, and the response content will replace the whole browser window, not paste it into the page like you are getting with jQuery load.

The easiest way to address this may be with the jQuery ajaxForm plugin: http://malsup.com/jquery/form/

where you would do something in your ready callback like

$(document).ready(function() {                        
            $('#navigation').load('Navigation');
            $('#content').load('Content');
            $('#formId').ajaxForm({target: '#content'});
        });

Of course you need to add an ID to your form element so you can easily find it with jQuery.

See jQuery ajax - change jQuery target value with form submit