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?
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
Related
I have a search.jsp page that has some html content and a form. When the form is submitted, there is a servlet handle the form data and forward the results to the search.jsp page. However, the url in the browser after processing the form is changed to the servlet name:
http://localhost:8080/MyProject/SearchServlet
not the search.jsp page:
http://localhost:8080/MyProject/Search.jsp
How I can change the url to the search.jsp? In other words, I just want to refresh the search.jsp page to display the results in the same page. How I can do that?
You cannot do that by forwarding the request: you need to "tell" the browser to generate a new http request by using the response.sendRedirect() method.
Now the question is why do you want the url bar to display the name of the Jsp?
Hiding the real destination path is a desired feature when forwarding requests: users do not need to know the server side redirects (that's how they are also called) happening in your web app.
Think about it: to carry out its tasks a servlet potentially can forward the request a number of times before getting to the final destination: you don't want the url bar to change each and every single time.
Give a fancier name to your servlet like: "Search" rather than "SearchServlet" so that users will know they are on the search page of your web application and not in the "SearchServlet" page.
In addition to that, if you visit any professional website, you will hardly ever see the .jsp or .html or .php extension on the address bar. While that is not a requirement or specification and you are free to do so, I believe the first approach is best practice (it looks even better to me honestly). There is even a folder WEB-INF whose purpose is to hide your .jsp pages from direct access via url bar.
What I like doing is having a servlet as the landing-welcome page of the web app, that will be responsible to forward and redirect requests based on the user input and the inner working of the application.
Now back to your final request (pun intended)
"In other words, I just want to refresh the search.jsp page to display the results in the same page. How I can do that?"
What I would do is:
redirect the user to the "Search" servlet from the welcome/home servlet.
In the doGet method of the Search servlet I would forward the request to the search.jsp page (you could set attributes before forwarding if you need to).
In the search.jsp I would set the action attribute of the form to "Search" (the name of the servlet) and the method to POST.
In the doPost method of the Search servlet you would implement whatever logic you wish to implement and finally forward the request to the search.jsp
After hitting the search button (and even after the submit button is clicked) what the user will see on the address bar is simply
http://localhost:8080/MyProject/Search
Hope that makes sense.
Are you using the same search.jsp for searching and well as showing the result? It is possible to use the same jsp to perform both the functions but it's easier and desirable to make another jsp which will only show the results.
If you are not able to see the results on search.jsp then make sure that you are setting the proper response in the Servlet class before forwarding it to the jsp and also whether you are reading the response sent by the Servlet class properly in the jsp.
If you want, the page to not refresh at all, then go for AJAX.
I am creating a web application in Java. I created some JSP pages each having some form fields. All are post method type so it hides all the form fields. In each page it will call servlet and forward to next JSP page(like a step by step process.)) Welcome page is index.jsp. In the last JSP page also I am having form field which is also post method type. When I press sumbit button, it will call servlet and should forwartd to home page(That is index.jsp).
Last page action value is finish. In my servlet, I am using RequestDispatcher and forwarding to index.jsp. The the URL will be
http://localhost:8080/myproject/finish.
As it is the home page, I wanted to hide that action value. So instead of RequestDispatcher I used
response.sendRedirect("index.jsp"); And then URL becomes
http://localhost:8080/myproject/index.jsp.
This is not a big issue. But still I am asking is there anyway to hide this index.jsp in the URL? It should be like when we open the site for the first time(http://localhost:8080/myproject/).
I got the answer finally. Thanks to #Sayem Ahmed for his reply as comments.
I tried this only
response.sendRedirect("/myproject");
I have a application that invokes a servlet through the URL
> "http://server:port/context-root/myservlet"
The servlet then calls the Java Class which returns the query result back to servlet.The servlet then renders the data to the user through a JSP page(response.redirect)
Now it hapens so, when all this happens Page Cannot be displayed is rendered to the useruntil the JSP page is ready to show the data.
How can I show a loading gif or a messgae as soon as the servlet is invoked until the JSP page is loaded with all the required data:
NOTE: As mentioned above, I am first calling the servlet, then Java Class, then JSP.
#Sankalp - The invoking application (HTML page ) is solely responsible for making an AJAX Call to your servlet. If you dont have control over the invoking application here is a little trick you can do - Ask the invoking application to re-direct to an html file say an index.html file of your application . In the index.html file , export jQuery javascript library and make appropriate ajax call , show a loading image , and upon success you may re-direct the page to desired jsp. There is a lot of work to be done here.
Question : Does the invoking application pass you any parameters ?
Does it POST data to you ?
Does your application open in an IFRAME of the invoking application or its a pure re-direct ?
All these answers , would help you decide your next course of action. There are lots of post on AJAX calls and showing images on stack overflow but that does not solve your essential problem . You have to decide on the flow and where to put the AJAX code. The AJAX part would be the easiest one. :)
----- Editing after the last comment
Visit : jQuery
In your HTML
<html>
<head>
<script src="jquery.min.js"></script> <!-- where you keep your resource file -->
<script language="javascript" type="text/javascript">
$(document).ready(function() { //This call will be made when DOM
//hierarchy has been fully constructed
// Handler for .ready() called.
//Make AJAX Call here so that this simple HTML page
///directly calls the AJAX
// and decide the future action based on AJAX success / failure
});
</script>
</head>
<body>
</body>
</html>
Here is a problem I have encountered.
I have jsp page which has a javascript openForm function. This function fetches data from server URL that relates to dialog.jsp and inserts that code into the body of my page. I.e. it looks like
function showDialog(url){
$.get(url,function(data){
$("body").append(data);
})
}
OK, but after user deals with that dialog I want to redirect him to some better place. I use return createRedirectModelAndView(URL_CONSTANT) in the controller, responsible for handling POST from that dialog.
It works, but here is a problem: a new page (redirect target) is opened INSIDE that dialog div. So the parent page (on which user clicks showDialog) still exists and it looks like the redirect is redirecting user inside dialog. This effect can be cool in some situations, but not in mine. I want total redirect - close that page and open another.
Where I went wrong?
If you want to redirect from an Ajax call then you should return the redirect URL from the server and do the redirect/location change from JavaScript.
I am passing JSP values to JSF's backing bean. Once I get the values in bean, then I am trying to assign values to inputText fields with setters method, something like this.
public void testProcess(){
empBean.setEmpName(empBean.getEmpId());
}
testProcess method is called in the action of the JSP page.
My question when I set the value in the bean, my JSF page's values are not getting populated. Do I need to explicitly refresh my JSF page, if so how could I do that?
Yes, you need to refresh the main page. What happens on the server will not automatically make something happen on the client (browser).
One fairly common pattern for this type of operation is to have the popup do the form post using ajax (easy with many javascript frameworks like jQuery). See http://jquery.malsup.com/form/ for a nice example using the jQuery form plugin. In the response handler for the ajax-call, you reload the main page (using the window.opener property) and close the popup. In the example with the jQuery Form plugin, you would do something like:
<script type="text/javascript">
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm(function() {
// reload main page
window.opener.location.reload();
// close popup
window.close();
});
});
</script>
The reason you want to submit the form using ajax is that you want to wait to refresh the main page until the post is completed and doing a regular post will cause the popup to reload, which in some browsers will invalidate the window.opener property, making it impossible to reload the main page.