I have a form that uses Html.BeginForm and for most cases this works as you would expect.
But in some situations I display a partialview that does several ajax calls to populate itself. When the partial view has been displayed I need to click the submit button twice to get the form to post. On the first click I can see the form refresh, and then on the second click the form actually posts. This is when using IE9, using Firefox the posts work on the first click.
I would like to know if anyone has seen this behaivor before I spend a lot of time trying figure this out.
Install Fiddler, open it up, and then reproduce the issue in IE. Fiddler will capture all of the requests, so you can see exactly what was sent to the server (and back).
Had a similar issue. The reason was, we had a in view and in addition we were doing $('#form').submit() as well. But the button didn't have "type" attribute. After setting button type=button. It was good.
Related
If you go to http://jsbin.com/ibozun/2, hit "Add Item," and then hit "Save," you will see that a second dialog is opened on top of the first one. The form in the dialog is posting to itself (no action defined) - this is by design. Because the dialog has duplicated itself, now you have to hit "Cancel" 2 times to get it to close.
The use-case for this setup is a MS MVC3 page with unobtrusive JQuery validation on it. The default scripts (in other words, I have no custom validators - the scripts are straight from MS) cause an ajax call to the server, and JQM treats that the same as a self-posting form - so you wind up with a duplicate dialog if validation fails.
A similar thing happens if the second page as a page, rather than a dialog - the form posting to itself results in a second history entry in the browser, so to get back to page 1, you have to hit back 2 times.
I believed this be a bug in JQM, but after submitting a bug on GitHub, I was told that this is the expected behavior. So, assuming this behavior that will not be changing in the framework, how do I prevent this from happening for my instance (preferring NOT to edit the framework JS)? Do I have to write my own ajax calls for validation so that I can prevent JQM from knowing that anything has happened? That seems unfortunate...
One idea I had was to detect that the nextPage and current page are the same on "pageHide", and manipulate the dialog/history myself, but have had no luck.
Thanks in advance!
First, there is no dialog duplication in the example. Second, my response and an explanation as to why solving the history issues with posting back to the same page for users of the library is hard can be found here. This example is particularly thorny because it's also in a dialog which we don't support linking to, so disabling ajax for the form (ie forcing it to reload), which would work if it were embedded in a page, won't serve.
The quick solution here is to switch the dialog to a page and add the data-ajax=false data attribute to the form. Mind you this causes a page flash/reload and requires that the form document be fully formed with a head including javascript,css, etc.
The project I'm working on is using the Java EditLive! rich text editor. I've been trying to make the EditLive form post via ajax, but am having some problems using IE8. Here are the steps we're taking:
Load the main page
The user clicks a link and the EditLive applet is loaded and attached to the page via ajax
The user finishing editing their document and clicks the submit button
The form posts via ajax (we're using jQuery.post())
The EditLive section is reloaded and the EditLive content is correct.
The form immediately posts again
The EditLive content is back to being blank.
Unfortunately (for debugging reasons), this is not happening in FireFox - there is only a single form post and the values are saved correctly.
From what I can tell debugging this in IE8, it looks like the submit event is getting called twice with 2 different forms. My thought is that the applet isn't getting destroyed correctly, though I've tried everything in my power to destroy it.
So I was wondering if anyone has any experience successfully submitting EditLive data via ajax? Or maybe this is just a limitation to the product?
Any help would be greatly appreciated!
I know this is an old issue but you likely want to look at the autoSubmit property of EL:
http://docs.ephox.com/display/EditLive7/AutoSubmit+Property
http://docs.ephox.com/display/EditLive/AutoSubmit+Property
I suspect that by using an AJAXy submit process this is somehow causing you issues with EditLive and its standard behavior. I would try turning off autoSubmit and grabbing the content yourself in your jQuery posting process.
I've search high and low for an answer to this but unfortunately I'm stuck. The problem is only occuring in Firefox (tested IE, Chrome and Safari also - works fine, no errors of any sort). I'll detail the sequence of events to save posting all my code.
ASP.NET MVC 3 application, basic form loads into a jQuery UI dialog
Custom jQuery to hijax the form submit (serialize the form and then $.post to the server - no compiler errors when debugging and post shows up in Firebug without errors)
Http GET (automatically happens) getting the response object from the server (+ success text and XHR), response is plain HTML in this case (again, shows up in Firebug with no errors)
Custom jQuery to change the HTML of the UI dialog from it's current HTML to the response Html - this is where it fails.
I've used javascript alerts to debug the sequence of events and as soon as the post (and get) is complete, everything just... sort of stops.
As I say, only in firefox! Very odd, just wondering if there's any known bugs with ajax and firefox or anybody has heard of a similar situation?
I must also add, that on other parts of my site, this works perfectly in all browsers! The only difference between this form and the other forms that do successfully complete the function is that the response from this form is the same "page" again but updated rather than a new "page". (I use "page" as I got all this working with Javascript turned off first and for graceful degredation)
HELP! Or laugh, either is fine.
UPDATE
I have tried sending a view with a blank model back as the action result - works in every browser except firefox - firefox retains the values from the previous post! And then I got to thinking - that's a trait of firefox isn't it? And maybe that's why the original "re-direct" html response doesn't work?? I think it's time to give up and let people know they can't use Firefox for that particular function!
Ok so I'm answering my own question.
The only way I found to get round it is to use $.ajax instead of $.post and to use the option async : false
Hope this helps somebody.
Rob
Have you tried adding the attribute [OutputCache(Location = System.Web.UI.OutputCacheLocation.None)] to your Action for your GET? It sounds to me like a caching issue.
The problem is this:
When I change the content on a page via AJAX and then use the browsers back and forward button to go to the same page, then I will be presented with the content of the page before the AJAX was executed.
This seems to be specific to IE (confirmed on version 8), as Firefox will render the last version of the page.
Just to clarify, I don't need (nor want for usability reasons) to replay the AJAX calls when clicking back/forward.
We were thinking about firing the last AJAX call on page load (if that event is even triggered), but we would like not to force everyone to wait through the additional AJAX call when going to the page the second time, also this would cause the first real load of the page to be slower as well.
Maybe someone has a good solution for this?
I think it will be useful : http://www.ibm.com/developerworks/library/os-php-rad2/ ;)
I am a beginner using ajax and I always thought that it is completely asynchronous. But I discovered that a call can be interrupted by a page reload or a page change (like clicking on a hyperlink). I was under the impression that when an ajax call is started, it is carried out no matter what the browser does afterwards. Is that wrong?
Now to the specific problem I am having: think of an online test where users answer questions (by typing into textboxes). When a textbox loses focus, an ajax call is triggered which persists the value of the textbox to a DB. That works well when changing between textboxes. However, I also have a submit button which triggeres a post action to another page (it is the submit button). When I enter something into a textbox and click on the button afterwards, the call is not carried out. Moreover, when I type into a textbox, click somewhere else (also triggering the call) and swiftly click on the submit button, the call is also not made. Is that expected behaviour?
The reason I am using ajax in the first place is to persist the values so when something unforseeable happens, like a browser crash, the already typed in text is already saved.
Is my way of thinking wrong? How would you go about solving this problem?
Thank you for your time!
AJAX is asynchronous.
When you send an AJAX request the javascript engine sends it off and sets up a handler for the response.
However, if you send an AJAX request to the server and then navigate away from the page before it is received, nothing will happen. Why? Because with each page load the entire Javascript environment is tore down and reinitialized, it has no idea what happened on the last page.
For your problem I would intercept the form submit action and do whatever you need to do with the data, and then submit the form.
Edit: In response to your comment. You are correct. If the ajax request is sent, and you're not depending on it's return value, then it should not matter.
I'd suggest debugging your problem with Firebug to see if the AJAX call is really being sent properly, and to confirm your server is properly processing it.
Unless you do something special with persistent local storage, all javascript and ajax calls are blown away when a new page is loaded over the current page. Also when a submit is done on a form.
To save things intra-page, save the data asap. Eg, perhaps save on key-up, perhaps periodically with a timer, not just on lose-focus.
Re submitting the page: change the on-click behavior to first store, then to go to a new page.
All of the effects that you are seeing are normal.
Also, be sure to test on both slow (ie 6 or 7) and fast browsers (chrome)