I have a form with action attribute and within: input text and submit. When the user presses submit, the information they provided will be used to send a text message using Twilio. My question is how do I do this without reloading the page or going to another a page? Instead, I would rather have a cool small animation that displays whether it sent successfully or not, with the page remaining the same.
Thank you for your help. Much appreciated!
I basically did what zeronone said with listener on submit event, but instead wrote "return false;" preventing the page reload. I then included ajax, and the rest of the code remained basically the same.
Related
APP.js Snapshot
contact.jade snapshot
Snapshot of Page on Chrome
When I click on Submit button nothing happens control stays on same page.
I am realy stuck at this point, any help will be apprecaited.
Thank you
You need to ensure your button is inside the form tag by indenting it.
form
button
This translates to the HTML
<form>
<button></button>
</form>
which allows the button to know which form it should submit.
As your code stands now it is
<form></form>
<button></button>
For which the button does not have a parent form.
(You similarly need to this for your input's... otherwise they won't be sent to the endpoint.)
I'm creating an extension for a site so that when a user types :) it changes to a graphical emotion. It all works fine when I refresh the page.
The problem is, when a user on the site types a message it's done using ajax, so there is no page load. I need a way to reload the content script, or to change the ASCII emotion to an image without reloading the page.
Is this possible?
You can listen for keyup events on the textarea or form submits if you only want to change the emotion at the end. jQuery().on() should let you do this. For example $('#textarea').on('keyup', changeEmot) or $('#form').on('submit', changeEmot). You may have to play around with the selectors and the events you get the gist.
I create jsp page using JSF Framework.
If i perform some action(Login), then go to the backend and perform some process and it will return some value.
Here this whole process will be taken some times.
Now that time i want to show processing status (wait or busy status) in Mouse.
That means after i press Login button , i want to show that loading status in cursor...
Similarly, If i do, any action in page, then i need to show the loading status...That is, every action in my application, show the loading status.
Help me.
Thanks for your effort.
If you are submitting a form you could use...
<form onsubmit="document.body.style.cursor='wait'"></form>
Here is a list of allowable cursors with CSS.
You could always set the cursor for either the page or for a component on the page via JavaScript.
When I click a command button, and then hit the browser back button to the form and click it again, it submits a second time without throwing the proper exception...
Even stranger, the form id itself is DIFFERENT when I come back, which implies it has regenerated a "valid" form id at some point.
Here's the relevant code: Any ideas?
<h:form id="accountActivationForm">
<s:token/>
<a4j:commandButton id="cancelActivateAccountButton"
action="#{controller[cancelAction]}"
image="/images/button-Cancel-gray.gif"
reRender="#{reRenderList}"
oncomplete="#{onCancelComplete}" />
<a4j:commandButton id="activateAccountButton"
action="#{controller[agreeAction]}"
image="/images/button-i-agree-continue.gif"
styleClass="activate-account-button"
reRender="#{reRenderList}"
oncomplete="#{onActivationComplete}"/>
</h:form>
Clarifications:
I inherited this, so I'm trying to change it as little as possible. (It's used in a couple places.)
Each action returns a view, not null. I have confirmed this by stepping through line-by-line.
The reRenderList is empty in my current test-case.
onActivationComplete is also empty.
I'm going to be going template-by-template to see if someone made it with nested forms, because my coworkers have had unrelated problems due to that, so it couldn't hurt to eliminate that as a possible problem.
The s:token is supposed to avoid double/multiple submits by impatiently clicking the submit button multiple times in the same request or by refreshing the non-redirected result in the webbrowser or by resubmitting the cached page in the browser history.
That it works when the client navigates back and forth by browser history just means that the pages with the forms are not cached in client's browser history and are requested as brand new from the server side again. That would indeed return a new token. Check it yourself with a HTTP tracker like the one in Firebug.
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.