I am new in React.js, and I am trying to figure it out how to set up some functionality in form.
What I trying to do is the following:
1) Delete the records/inputs after clicking on the submit button (After submitting the information, the records are stored in the database, but the record/inputs are still displayed in the form.
2) After clicking the submit button, I would love to receive the following message in order to let the user know that the information was successfully submitted
This is part of my code in my component:
For value reset :
Bind a custom function to the onSubmit form method, this function will reset the form value, submit the data and display the success alert
Reset the field values using setState
Submit the data using the API system you use
Add a new boolean state to tell the page to display your alert or not.
Set the boolean state to true in your submit method
Add a display condition in the render method, displaying the alert if the boolean is set to true, and else nothing
Related
I have a page built in JSF.
On it are some mandatory input fields.
I have two buttons - Submit & Cancel.
When a user hits Submit I want to ensure that everything is filled out, which works fine currently.
But when the user hits Cancel I want navigation to occur even though some of the inputs may be empty.
How can I achieve this?? Thanks!
Short overview of my issue: I have a large form with several fields, one of them is a xe:djFilteringSelect and one a xp:combobox. The xp:combobox is computet depending on the value selected in the filtering select. Now my customers want that if they change the value of the filtering select of a already saved docoument they should be prompted with a warning. So i want to add a confirm message to the onChange event of the djfilteringselect to cancel it's SSJS code wich changes the combobox.
Prompting the user with a confirm ("change value?...") box is no big deal but reseting the value back (on ClientSide) if the users selects "no" gives me a lot of trouble.
What i have already tryed:
If i use a simple confirm action all further onChange actions get canceled but the djFilteringSelect field keeps it's user selected value. So if i fire a partial refresh on the filtering select the original value form the document is displayed but i don't know where to add it because there is no onCancel or did i miss something here?
I also tried it from the CSJS with window.confirm and XSP.confirm and reset the value manual with a XSP.partialrefreshGet() if the user selects 'no' but in this case the partial refresh does not work:
if(!XSP.confirm("execute?")){
XSP.partialRefreshGet("#{id:repeat1}",{
onStart: function () {console.log("start");},
onComplete: function () {console.log("finish");},
onError: function () {console.log("error");}
});
return false;
}
If i move the partial refresh to a function and call it from e.g. firebug it works fine but if i call it inside the if(confirm){} it does nothing at all. The return false does work the SSJS does not get executed. The value in the document is not changed (as intended), but the djFilteringSelect keeps the selected value on the ClientSide.
I also tried Mark Leusink´s dojo-style Confirm but same Problem with the partial refresh here.
If i set the value back manual instead of using a partial refresh with dijit.byId(item).setValue it will resoult in another onChange Event... loop. Update: If i use dijit.byId(item).set("value",newVal,false) the onChange does not fire direct it changes the value as intended but then the onChange fires when the filtering select looses ist ??focus!?!? ...
So my questions:
Is there a ways to execute any Code after the confirm action if the user selects "no".
Why is the partial refresh in my CSJS not working (i dont see any traffic in firebug and i dont get any errors not even the onError of the refresh gets fired).
Does anyone know a different approach to my problem?
update:
My current 'solution' is to use window.location.reload() instead of the XSP.partialRefresh to reload the site. But this solution does not really satisfy me, because in IE the whole page is flickering.. in firfox i can live with it.
Some of my recent posts have to do with the fact that I am doing all of my validation in my Submit button.
The reason I am doing this is that I have a button that sets some read only edit boxes. Well you can configure a validation for a read only edit box but it does not execute at run time.
Since I could not figure this out and wanted to have a consistent look for validation I used my own validation on my Submit button.
Is there a way to validate read only fields?
One nice thing about putting all of the code in the Submit button is that all of the validation code is all in the same place but I can see where it also can cause portability issues when using custom controls.
Also another question is how to fire off validation if my Submit button is not marked as a Submit button.
As Dec says, the ReadOnly flag causes the content of the field to be rendered without the <input> tag. This makes validation impossible on the client side and since there is no data being submitted back to the JVM, validation coded on the field is ignored on the submit.
However, the data source QuerySaveDocument is triggered. Put your validation in there and/or put it in the fields that are rendered (readOnly=false) and be sure to set disableClientSideValidation="true" on all fields with validators on them.
Your QuerySaveDocument code looks something like this (assuming location is the field which is readOnly).
if (personDoc.getItemValueString("Location") == "") {
#ErrorMessage("The inherited location is blank and that is bad.");
return false;
}
return true;
With this, the field based validators will fire first and if they are all successful the QuerySaveDocument fires. This means if any field based validators fail, their messages will appear in your message area but the QuerySaveDocument message will not appear. QuerySaveDocument messages ONLY appear after all field based validators succeed.
When a read only field is rendered to the web browser it does not render using <input> tags but rather a simple <span> tag.
Validation can only be performed on proper input tags so the scenario you are experiencing is correct. There is no field for it to validate in read-only mode.
There is an option to 'display disabled in read only' which will render an <input disabled="true"> type tag for the field but I'm not sure off the top of my head is validation will work for those fields either because if a field is read-only then there really should be no need for any validation because your programmatically putting the value into the field and you should be validating it programmatically before you add the value.
I have a reports page that submits user generated queries for data retrieval. When no data exists for the query, I add a facesmessage-"No data" to the session and associate it with the submit button so, it shows up next to the button.
When the user modifies the query and resubmits it I want the 'no data' msg to be cleared. I couldn't find a way to do this. I couldn't find any messages in the sessionmap or requestmap, so I couldn't use removemessage().
So, for the time being I am using a hack by setting the facesmessages to blank summary and detail. How do I clear the msg for every query submitted?
Thanks.
BalusC,
Couldn't find a reply button, so I am editing the original post
Here's what I have:
JSF 1.2,
Richfaces 3.3
The backing bean for my report page is sessionscoped. The page has a dropdown menu to select report types and a submit button hooked up to an action(genrep). The button is associated with a rich:message tag.
When a report type is selected and submitted, genrep() checks the database to see if there is any data, if none exists it instantiates a facesmessage, sets summary & detail to "No data" and adds it to the submit button via the addmessage method of facescontext.
When user submits another query that has data, genrep() gets the response stream from the facescontext, sets the contentype to "application/vnd.ms-excel" and writes data to it. Closes & flushs the stream and calls responsecomplete(). Except now I still see the 'no data' message next to the button from the previous no data query.
Thanks.
When user submits another query that has data, genrep() gets the response stream from the facescontext, sets the contentype to "application/vnd.ms-excel" and writes data to it. Closes & flushs the stream and calls responsecomplete(). Except now I still see the 'no data' message next to the button from the previous no data query.
So, you're providing a file download, but you're expecting the current page to refresh as well. That's not possible due to the nature of HTTP. You cannot send two responses back on a single request (one for the file download and another one for the new page). Best what you can do is to let the client send two requests or to hide the message using a line of JavaScript in the onclick attribute. The latter is more suitable in this particular case.
I am developing web application using A4J, Richfaces.
One of my requirement is, I need to check if the user has changed any values in the form when he is trying navigate away from the page.
I have save and cancel buttons in the page.
I am using a4j:command button for cancel functionality. Clicking on cancel button should do below things
Check if the user has modified anything in the form (this I am doing by using javascript and have a flag if user changed any values)
Display confirmation box (javascript confirm with values "Do you really want to discard the changes -- YES NO") when user changes form values
If user says YES, then submit the form using AJAX (by using A4J)
My a4j command button code is like this
<a4j:commandButton action="MyClass.cancel_action"
onclick="checkIsPageChanged()"/>
The issue here is, while using using a4j:commandButton, I cannot call the intermediate javascript function (the function which checks if user has updated any values and displays confirmation box) and then submit the request using ajax.
I have looked at the code generated by JSF and the code is like (not the exact but syntact)
<input type="button"
onclick="checkIsPageChanged();AJAX.submit('')/>
The thing is when I click on button, it is calling only checkIsPageChanged() and not calling AJAX.submit().
Any workaround for this will help me.
Thank you in advance.
Use a4j:jsFunction and call that from your a4j:commandButton when the checkIsPageChanged() returns true.
eg.
<a4j:commandButton action="MyClass.cancel_action"
onclick="if(checkIsPageChanged()) { cancel(); }"/>
<a4j:jsFunction name="cancel" action="MyClass.cancel_action"/>
To be more specific we can use:
onclick="if(!isPageChanged()) {return false}"
Returning false will not submit the request.