I have a situation that i can't handle and thats why need your help.
I have a jsp page (mention as A in below pic) where there are many rows and each of them can be edited.
At the end of the A jsp page, there is an option to print the page data.
Now, if some body clicks on the edit link/button, another page will open contain the data for that particular row and user can modify the data in the second page(i,e B).
Now, i want, as soon as the user save the B page, A page should be refreshed automatically to provid the updated data for printing.
Please guide me on how to acheive that . I'm using Spring MVC framework for the java application.
The Spring MVC way to meet your requirement is:
the Edit buttons in page A should be links calling page B with the id of the line to edit, something like Edit
the SaveAndClose button in page B should be a submit button that posts the edited values to a controller method. After server side processing, the controller method should redirect to page A. As a side effect, you use the PostRedirectGet pattern which avoids the ugly do you want to send again ... ?"
#RequestMapping(path = "...", method = RequestMethod.POST)
public String saveAndClose(...) {
...
return "redirect:/path/to/pageA";
}
Of course this will display all pages in same window.
If you want to redisplay the window containing pageA on the Save & Close from page B, still allowing the save to be known to the server, you should redirect to a special page (say pageC) that just contains javascript code asking the browser to redisplay pageA. You can either pass the name of the window containing pageA in a hidden field, or you can decide that as the programmer of the web application you know where it should be.
It can be achieved like this. Follow the steps mentioned
1] When you click on edit button in Page A, pass the id of the row to Page B as request parameter.
2]In Page B JSP receive the id of the row and store it in a hidden element.
3]Create a JavaScript function in Page A which should receive row Id and Modified data as parameter. Lets name it this function as updateRows(rowId,modifiedData). In this function write code to update the with id 'rowId' with modified data using javascript
4]Now When you click on 'Save & Close' Button in Page B. Save the data using call to server. If save succeeds then invoke the function updateRows passing it rowId stored in hidden element and modified data as parameters. This function will update the DOM with latest data.
This way you will avoid making server call to refresh the data
There is one more way if you don't want to use ajax.
In Page A define a javascript function refreshPageA(). In this function add page refreshing logic.
When you click on 'Save & Close' button in Page B save the data in server and forward to a plain jsp. In this JSP declare a onload handler. Inside onload handler add following code
opener.refreshPageA();
window.close()
This will refresh pageA and close page B window
Related
I have a web application that uses the Wicket framework. It has a form that takes user input and when submitted, redirects to another page. Once the form is submitted and the browser's back button is clicked, the previous form is retrieved from the cache with the values entered. I need to override this behavior and redirect to the latter page (keep staying on the same page) when the browser back button is pressed. Is this possible in Wicket? If so, please guide me on how to achieve this. Thank you.
Wicket handles URLs so if a previous page is requested by it's recognized by page ID that is by default added to the URL, e.g. http:/dummyexample.com?1
What I use to solve that problem is a flow engine that holds the state of model object within it. E.g. you have a model object of type MyFlow containing a field 'String currentState'. In this case if you required a wrong page, that is not belong the stage where your flow is, you can redirect to the relevant page from a controcutor or onIntialize() throwing 'RestartResponseException' that causes redirect to the new page.
Just use an Ajax submit, this way the user cannot return to the input form via back-button.
I am new to web-app and Spring MVC. I run into one situation and can't solve it.
I have a JSP form with button. When click this button it will open a popup window contain a table list of Employee Code and Employee Name (select * from database). When the user select one of this Employee Code, I want it to send this value to my main JSP form.
I don't know how to do binding data what row that users select and send to the controller
I'd suggest doing this without a popup, ie just use the main window. Most browsers block popups these days, and it won't work without javascript. You'll need to figure out how to save state between requests though.
You can name the main window in javascript (window.name = 'x') and set the popup form's target to that name. That will submit the form to the main window. Then use window.close() in the popup to close it.
I am rendering a html page with a list of things with an option to edit any one of them.
Draft:
On clicking on any of the item, makes a server call and effectively an update in the database.
Now, What i want to do is, When the list is long and the page is scrolled all the way to the bottom (for eg. ITEM 1000) and the user makes any server request,
after the page is reloaded, the user should be scrolled down at the exact item. Is this possible?
What is a good way to approach this functionality?
I am aware of anchor tag and name attribute and then posting url.com/#anchorTagName. But in case of server call, we dont provide any urls, its just a form.submit
Any suggestions are much appreciated!
Anchor tag is the best approach url.com/#anchorTagName but as you said the server doesn't provide it.
Here are some other alternatives:
1. Session attribute:
Once the server call is made and the data is loaded successfully in the DB, set a session variable. (session variable will contain tag)
In the UI using scriplet, assign the session variable to a javascript variable.
Now on page load, let the javascript to get the variable and scroll to the particular location.
example:
<script type="text/javascript">
window.onload = function() {
var scrollNow = "#<%=session.getAttribute('')%>"
window.location.href = scrollNow; // this will take to the particular element based on the ID
}
</script>
Another option, is to append the location in query string. Same way get the location and let the javascript do its part just like before :)
Another option,
In the form submit, handle the event via javascript before submitting the form.
Construct the action url dynamically with the hash tag and send it to the server.
So when the server receives it, it will ignore the anchor tag and will process the data.
When the page refershes again, the page scroll to the previous location as the anchor tag will be there in the URL :)
I have a JSP page that at the end comes a pop-up window from a javascript, I want after the users click to reload only a specific part of the JSP page more specific one if - loop want to be reloaded one more time ...can this happened or the idea is totally wrong ?
What you are looking for is called AJAX.
AJAX is the art of exchanging data with a server, and updating parts
of a web page - without reloading the whole page.
jQuery has a very nice ajax api.
To load html pages, you could use jQuery.load like this:
$("#result").load( "ajax/test.html" );
You can also generate dynamic html by calling a REST function of a php page using a different url. Example:
var data = { limit: 25, otherProp: "val" }
$("#result").load( "getHtmldata.php", data);
h:button can navigate to a bookmarkable link, but can not call beans' methods
h:commandButton can make calls to beans' methods, and can use action attribute to navigate to somewhere but it wont be a bookmarkable location
The question is how to make a button do both
Example:
We got two JSF pages:
list.xhtml
item.xhtml
item.xhtml?id=5 opens the page with the item #5's data. There's also a "Save" button
How to make "Save" button 1. save data and 2. navigate back to list so there would be "list.xhtml" in the browser's address field and not "item.xhtml"
Just return something like this from the action method:
return "/list.xhtml?faces-redirect=true";
This will send a redirect to the client and the client will then fetch the list page in a separate GET request.