Safari Chrome form with no action not working - forms

I'm building an app using Django and jQuery. For in some forms in the HTML I make AJAX calls using only jQuery so I put the form with action="#" method="" and have.
When I press the submit button in FF it works fine, nothing gets reloaded and the ajax call is made. In Chrome and Safari, however, the page get's reloaded and re-requested from the server.
Any clues?

As much as possible, Webkit and Opera try to follow the HTML5 draft. Currently, the form submission section says that actions that start with HTTP(S), even if the action="#" or action="", will cause a navigate, which should cause a new page load when the new GET parameters are added. If you want to prevent the page from reloading, you'll have to add a submit handler that prevents the default action by returning false or saying e.preventDefault().

What happens if leave action and method out? You shouldn't need those anyways if you're submitting with an ajax call.

Related

Java Wicket - Prevent Form From Creating New Tab When Exception Occurs

I am creating reports using Jasper right now and almost everything goes well. We set it in a way that if the user will preview a report, the report(pdf) will be shown on a new Tab. The problem is if an error occurs, a new Tab would still be opened instead of just showing the Feedback Panel on the original page.
How can the form be setup in such a way that the feedback panel will be shown on the original page instead of the newly opened Tab?
Form<?> form = new Form<Void>("form");
form.add(new AttributeAppender("target", Model.of("_blank")));
SubmitLink view= new SubmitLink("view") {
#Override
public void onSubmit() {
//code inside a try-catch to generate the report using Jasper}
};
CptiDownloadButton download = new CptiDownloadButton("download", new AbstractReadOnlyModel<File>(){
//CptiDownloadButton extends SubmitLink button and is a modification of Mr Ivaynberg's DownloadLink
};
<form wicket:id="form">
<input type="button" wicket:message="value:search"/>
<input type="button" wicket:message="value:download"/>
</form>
Thanks in advance to anyone who'll answer. ^^
If you do any form submission to a form with target="_blank", the browser will automatically open a new tab to render the response from the form submission. It is the intended behavior, and trying to prevent it is breaking the standard target="_blank" behavior. I guess what I'm saying is you should really think whether breaking this standard behavior is something you want to do.
If it is, here's how I would go about it. Warning: ain't gonna be clean.
Use Ajax (AjaxButton or AjaxFormSubmitBehavior) to submit the form. Since it is done via ajax, the browser will not invoke default form submission behavior, hence not opening a new tab.
Ajax then invokes the form processing. On error, re-render the feedback panel and return. On success append JavaScript to invoke the default form submission on the respective link when the request returns. This will perform standard form submission behavior, hence performing the target="_blank". It will once more validate the form, but then it will proceed to perform the originally intended behavior.
The way you invoke the default form submission on the link you desire can be done in a few different ways and is entirely up to you. As a quick and dirty way you can hide the buttons that you have right now (visually) and perform javascript to click the button. Or you can use a hidden form field to identify which button has been clicked if you don't want ugly hidden clicking behavior.
You'll have to do a form (Ajax)-submit without target, and then initiate the actual download after checking possible errors.
See https://cwiki.apache.org/confluence/display/WICKET/AJAX+update+and+file+download+in+one+blow for an example with Ajax and an attachment content disposition.

Form is submitted twice on IE only

I have a jsp login form page,which uses stripes:submit button to call ActionBean method as well as an OnClick() javascript function on the stripes:submit button to submit the login form. In this scenario, the IE8 browser sends the request twice. It works fine for other browsers like FF and Chrome.Is there any way to prevent it.
Thanks in advance for yours assistance.
Regards,
NM

Google Chrome creates history item on redirect?

When following a redirect after form submission that goes back to the page you're on, my experience has always been that clicking back on your browser button will take you to the page you were on before the page, before the form submission.
For example, you enter a site and:
1. (click) GET /home
2. (click) GET /user/view
3. (click) POST /user/save_changes
4. (redirect) GET /user/view
The behavior in Firefox is that after form submission and redirect (#4), clicking "back" will take you to #1 (GET /home) from #4. But in Chrome, clicking back after the redirect takes you to #2 (GET /user/view).
I don't recall this being the behavior in the past... and it only appears to happen on Chrome. It happens both with 301 and 302 redirects.
Is there a way to avoid this behavior? I've always done it this way because the behavior has always been acceptable (goes back to #1 upon clicking back after form submission). I did this to avoid someone ever clicking back and getting the horrible "do you want to resubmit the form" message.
HTML5 provides a cool option to control the browser behavior - HTML5 history API. Guess, instead of depending on the browser to handle on its own, its always better to instruct the browser how to handle it.

dynamically added Facebook send button not rendering

I'd like to add a Facebook send button (which is not yet supported with iframes) dynamically to the page after it loads (due to the way the site is constructed, it will be part of an HTML template loaded through AJAX on a user action).
Though I'm importing the FB JavaScript SDK, when I load the new content through AJAX, the marked element is not "transformed" into the FB send button.
I've tried:
<div class="fb-send" data-href="example.com"></div>
and
<fb:send href="example.com"></fb:send>
Any suggestions?
Whenever you add an FBML element to the dom you should call
FB.XFBML.parse();
http://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

Reload page from CGI?

I have a form that looks like this
<form action="/receiver.pl" method="post">
</form>
Clicking on the submit button doesn't take the user to a new page, because of some JQuery that can be seen here.
Is it possible in receiver.pl to reload the current page?
What receiver.pl is doing is processing some data that is shown on the current page, where the submit button is.
So it would be really cool if the page could be reloaded, so the changes could be seen right away.
Receiver wouldn't do that. What you'd do is this:
jQuery makes an AJAX call to receiver.pl
Receiver.pl does its thing and returns a valid JSON string to jQuery.
jQuery then reloads the page or alters the page based on the content of the JSON results.
The CGI itself cannot reload a page once it's already been loaded.
No. A server side process can only return data to the client. The client has to initiate reloading the page. This would normally happen when the form was submitted, but the JavaScript is intercepting that action and replacing it.
It sounds like the solution is "Remove the JavaScript that is stopping normal form submission".