I have a simple jsf form with a button that is supposed to trigger a method call on the backing bean
<h:form id="form">
<h:commandButton id="button" value="Submit" action="#{controller.submit}"
onComplete="promptSuccess('Changes submitted successfully')" />
</h:form>
Everytime I press that button, the page refreshes and the JavaScript function 'promptSuccess' never even gets called.
I would like the form to be updated and also the success function be called as soon as the changes have been submitted. But the whole page gets refreshed.
I did see a few examples on SO but none of them proved useful to my particular problem/situation.
I would really appreciate some help on this.
Examples referred to:
Example_1
Example_2
Related
I have the following three php files:
reports.php, bwdates-reports-details.php and visitor-detail.php
reports.php contains my form which inputs the from and to date (erased some parts for brevity):
<form method="post" action="bwdates-reports-details.php">
...
<input type="date" id="fromdate" name="fromdate">
...
<input type="date" id="todate" name="todate">
<button type="submit" name="submit">Submit</button></p>
</form>
bwdates-reports-details.php outputs whatever parameters inputted in "fromdate" and "todate" of reports.php, see image below
As you can see in the image, there is an option to view the details of a transaction by clicking the "View Details" icon - i class="fa fa-edit fa-1x".
In view details (visitor-detail.php), There is a "Go Back" button.
<div align="center">
<button onclick="goBack()">Go Back</button>
</div>
There is also a goBack javascript function:
<script>
function goBack() {
window.history.back();
}
</script>
But when the go back button is clicked, I am getting Confirm Form Resubmission error. What I wanted to achieve with the "go back" button is to be able to go back to bwdates-reports-details.php with all the variables I passed through in reports.php. How do I achieve what I wanted to do? Please take note that this isn't a purchase related website. php or javascript will do. Thanks!
If a form is submitted (probably with the POST method), you send this data to the new page that is then opened. This page is also added to the history not only with the URL but also the sent data.
If you then leave this page and want to navigate back to this previous page you will get an "Resubmission" error, because the browser would need to send the data again to do so, but that is probaby a bad thing to do, because the data of the form would be sent twice. (Imagine that was a purchase form and the client would buy everything again.)
To make your goBack function work there are no other ways than get rid of that form submission page somehow or put a page in between that is not a form-data-receiver.
The best way would be to not go back in the browser history if you don't know from what pages the user navigated to this. Instead just navigate to an overview or dashboard.
Edit:
If that page your working on is only accessible by that response page of the form, maybe going two pages back will fix your error: history.back(2);
Because your form is using POST method and when you click on goBack button, it goes on previous page without variables. You may use put dates variable with goBack button and also use
if(isset($_GET['your variable name'];
{`fetch your variables`}
on your previous page.
Desired result was achieved by using the GET method instead of POST method (see https://www.tutorialspoint.com/php/php_get_post.htm). reports.php form code was replaced from:
<form method="post" action="bwdates-reports-details.php">
to:
<form method="get" action="bwdates-reports-details.php">
In bwdates-reports-details.php where I have the following variables:
$fdate=$_POST['fromdate'];
$tdate=$_POST['todate'];
Instead I replaced it with:
$fdate=$_GET['fromdate'];
$tdate=$_GET['todate'];
The goback javascript function I have in visitor-detail.php stays the same. And works like a charm. Thanks and cheers!
I can't understand why this isn't working.
I have a form opened in new tab, which I want to close when submitting:
<form name="form" id="form" method="post" enctype="multipart/form-data" >
//form inputs
<button accesskey="C" class="boton" onclick="form.submit(); alert('waiting...'); window.close()"> <u>A</u>djuntar</button>
</form>
when I remove window.close() the form is submitted, but when it's in my code, it shows the alert but not submitting.
Is there anything wrong?
you don't have to open the form in a new window (or tab).
you can either submit the data in ajax or use an inner hidden iframe as the target property of the form element. this way the form will open in a hidden inner element. e.g.:
<form id="eFrm" target="ifrm1">
</form>
<iframe id="ifrm1" name="ifrm1" style="display:none"></iframe>
The form won't be submitted until the event handler function has finished running.
alert blocks all execution of everything until the dialog is dismissed.
close closes a the window, so there is nowhere to load the form submission into, which cancels the request.
If you are going to close a window, don't expect it to be able to send an HTTP request at the same time.
You probably already found a solution, but I am posting this anyway for anybody who comes across the same in the future.
I am using Java servlets, but I think that is the same with every form submission => ability to choose which page must be displayed after the posted data was processed.
Once I have submitted the form, the doPost method in the servlet allows me to say which URL I want the browser to display after the data has been processed.
So, you can do probably do something along these lines:
request.getRequestDispatcher ( "/ClosePopup.html" ).forward ( request, response );
Then also create a file called ClosePopup.html, with nothing but a close () instruction
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body onLoad = "window.close();">
</body>
</html>
This way it won't be the button you click to trigger the closure of the popup, but you will be loading a self destroying page after the form is submitted. The final result is identical.
I have a commandButton like this:
<p:commandButton value="Save" actionListener="#{bean.checkDetails}" action="#{bean.save}" />
My checkDetails() method checks some fields on the page and if they are not filled in, uses RequestContext to trigger a Javascript alert() which I want to use to block bean.save from being called until the user clicks "OK". The RequestContext piece looks like this:
RequestContext context = RequestContext.getCurrentInstance();
context.execute("alert('Details are not Complete.')");
My problem is I am not seeing the alert() dialog and bean.save is being called regardless of the state of the checkDetails() method.
Am I going about this completely the wrong way? I have spent three hours on this so far and I am plain stuck. If I remove the action method, the alert() pops up just fine.
Please, any input would be greatly appreciated.
My checkDetails() method checks some fields on the page and if they are not filled in...
As BalusC said, this can very easily be solved by adding required="true" to those fields, no need to write Java for this.
If you want to mix this up with the 'old-scool' alert() you can use the validationFailed callback parameter:
<h:form>
<p:inputText required="true" />
<p:commandButton value="submit" oncomplete="handleValidation(xhr, status, args)" />
</h:form>
<script type="text/javascript">
function handleValidation(xhr, status, args)
{
if(args.validationFailed)
{
alert('Details are not Complete.');
}
}
</script>
I have an address book widget that shows if there are contents.
If there are no contents, an add button will show up. Upon pressing the add button, it will redirect to another page which will show the form.
The initial design of my website is as follows:
When the user click the add button, it will direct to a page using javascript function:
document.location.href="address?addOnly=true";
The form will display.
If successful, there are $.post that will change the div only that will enable user to do CRUD in the address book.
The problem with the variable inside the url which is address?addOnly=true is that when the user refresh it, it will always shows the add form.
That's why i've decided to hide the implementation using $.post
$.post('address', {"listEmty":true}, function (data) {
window.location = "address";
});
The problem with this is that it can't pass the variable at all.
My questions are:
How to handle the page refresh if using the get method, which passes the paramater in the URL,
Are there anyways in javascript/jquery to pass the variable using post method then refresh the page?
Thank you.
<FORM method="post" action="address" id="refresh" style="display: none;">
<DIV>
<INPUT type="hidden" name="addOnly" value="true">
</DIV>
</FORM>
<SCRIPT type="text/javascript">
document.getElementById('refresh').submit();
</SCRIPT>
What this does is create an invisible form, then immediately submits it. You can of course call the submit from within your other javascript code.
I have a javascript function to run h: or a4j: commanButton. When javascript function is called, action button runs action but after that page is not redirected.
I am using Seam 2.2 and RichFaces 3.3.3
What is the problem here? Thanks.
function submitForm(){
document.getElementById('myForm:save').click();
// does not redirect.
//document.getElementById('myForm').submit();
}
Even if I use submit() page is not redirected.
Form:
<h:form id="myForm">
//some fields
<h:commandButton id="save" value="Save"
action="#{personHome.persist}" />
</h:form>
To the point, the following should work for <h:commandButton>:
document.getElementById('myForm:save').click();
and when the button is the first button of the form in question:
document.getElementById('myForm').submit();
You only need to ensure that the generated client ID is exactly the same as the ID which you're specifying in getElementById(). If the <h:form> is by itself nested in another UINamingContainer component, then the ID will be prepended with its ID. Rightclick page in browser and View Source to be sure.
As to the concrete problem, perhaps you've attached this function to another button which in turn also submits some form by itself which will result in a race condition of two requests. You should then return false; from or after the function to block the caller's default action. E.g.
<h:commandButton onclick="return submitForm();" />
with
function submitForm(){
// ...
return false;
}