Situation
In my Wicket application, I have a page which contains two tags. Each time a tab is selected, its content is fetched via Ajax so that every time you switch to a different tab its content it loaded fresh from the server.
On one of the tabs I have an input field which has an onblur event which saves the contents of the field via Ajax.
Problem
If the focus is on the input field and I click to a blank area of the page, the Ajax request it fired and the data saved.
If, instead of clicking on a blank area of the page, I click on the other tab, the Ajax request to save the input field is fired but not the Ajax request to switch tabs.
Is the number of concurrent Ajax requests limited in Wicket to one?
Yes, concurrent requests to a page instance are limited to one. Wicket Ajax will queue subsequent Ajax requests in the client side channel. See the wicket Ajax debugger for details in your running application.
This is done to make building your application easier: no need to work around concurrency issues on the server. Page access is always one done from one single thread: the current active request thread. If we didn't do this, we would have to synchronize on the component tree and make the whole programming model go yuk.
The problem was our AjaxIndicator which overlays a DIV over the entire page for the duration of each Ajax request. The "mouseup" (and consequently "click") events arrived when the overlay was in place, and thus lost. By holding the mouse button down and releasing it after the first Ajax request had completed and overlaying DIV removed, the second ajax request was fired.
It seems obvious now as the whole reason why we have such an overlay is to prevent users clicking while an Ajax request is running.
I think my solution will be to disable the ajax indicator on certain, very quick requests such as these where it makes no sense to have an indicator (disregarding the potential that requests could take much longer in case of unusually high server load).
May be the response of the onblur ajax request may have error or the process you are performing after the ajax response may have error.
If possible can you paste the code sniplet.
Related
I was wondering, is Ajax only for dynamic content update or can it also, say, create a few buttons in a given div depending on what action a user chooses in another div? For example, if the login page and first page look very similar by only a few buttons, once proper login credentials are entered, can I use Ajax to make the other three buttons appear once logged in properly, rather than going to a whole another web page that has those buttons hard coded in the html/css? If this is possible, I'll take pointers to any tutorials. Thanks.
AJAX is just for creating HTTP requests using javascript, in order to prevent full page requests.
What you can do is to process the login request using AJAX and then, depending on the response you send, to display an error or update the DOM with the logged in interface.
If you just want to change the DOM, you use javascript directly (jquery would help) but no AJAX is needed.
I have a page that loads 2 drop down menu with AJAX. Then it loads a third AJAX that can take over 30 seconds to load. (slow SQL query).
When user selects items from the 2 drop downs the third slow AJAX is fired again to list the results.
All works fine on first load. But if I refresh the page or if user selects a different option while the third ajax is still loading, the page hangs until the third ajax has been loaded.
I have tried to .abort() the load, but that does not seem to help. The browser waits for the aborted file to load before loading ajax 1&2 and 3.
I added the abort to onbeforeunload but that does not help the page refresh problem.
I have tried this using pure JavaScript and jQuery but get same results.
The server is IIS6 and the XML output is from asp pages.
Is there any way to get around this?
Abort Ajax requests using jQuery
This should help you in aborting the ajax call. Just check on which ajax call you are actually calling abort() function.
On the side note, just check whether your browser is getting hung because of other processes running in your system. Because, every ajax request that is fired will start a db query and that may also give you a hung feel.
I read some paragraphs in a book saying that it is not possible to do a partial postback for web, even AJAX is employed. Ajax will postback everything and update only ajaxfied controls.
However, on pages I made using ajax, I used Fiddler to monitor the transportation. I found when the page initial load, it loaded everything include pictures .... However, when I click a button and do a ajax postback. I can only see the some data were loaded.... Looks like it doesn't need to reload the whole page again.
I don't know if what I see is correct? Or the book I read is correct?
Thank you guys.
That depends what you put in the term "postback".
The AJAX call will send the complete form data back to the server, just as if the form was posted normally. The server will answer with a partial response that only contains the parts of the page that should be updated.
So, the request is not partial, but the response is.
I am not sure how you are posting back from the client side. I am guessing you are using UpdatePanels. How well you 'AJAX-ify' a web page depends on what method you employ.
UpdatePanels - Read Dave Ward's posting on them - http://encosia.com/2007/07/11/why-aspnet-ajax-updatepanels-are-dangerous/
PageMethods to post back to a web service, get the data and update the DOM to display the result
JQuery and other such AJAX frameworks to post back to a web service
I am sure the link above should clear things up a bit
I'm having a hard time understanding your terminology. I'm not really sure what a "postback" is, much less a "partial" one. I do know that one of the basic ways to transmit information to an HTTP server is via a POST request, which is usually used when submitting forms. If you mean to say that the entire form is transmitted when you click a submit button, I believe you'd be right.
You also seem to be doing something with AJAX, but it's difficult to tell. The whole point of AJAX is to have dynamic data displayed on a page without resorting to reloading it. Defining what to send and what to do with the results is entirely up to your own JavaScript. So unless you're using a framework, which you don't specify, there is no such thing as "ajaxified controls."
In any case, "AJAX" usually means using the XMLHttpRequest() method of modern browsers to send data to servers without refreshing the page. When you call this function, you specify exactly what data to send. This has nothing to do with HTML forms. One caveat: if you are indeed using a library for AJAX, it might impose additional limits on how you structure information to send.
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)
When an user tries to send AJAX requests simultaneously from multiple browser tabs, the earlier requests get completed and the page loads but the other AJAX calls are preempted. AS a result of which the response is empty for the other calls. Only one call survives.
In my application using struts 2.0, JSP and javascript and the prototype framework, i found that the server response is empty in the cases mentioned above though the data gets updated in teh database with the request parameters. The onSucess event handler for Ajax.request gets called but the the response is empty.
Can you please help?
Thanks
I'm not quite sure what's happening to cause this, but here's one thing to try: The last large AJAX-centric application I developed, we had to add a random number parameter to each query string to ensure there was no caching on either the client or server side (or ISP side, these days).
Guaranteeing the query URL is different in each tab could solve your problem.
I think we should get ready status from Ajax call before starting making another call to server (except you were creating a new ajax object for each call), but i could be wrong.
I never use prototype, but i use Adobe Spry for years and have no problem with multiple Ajax call, but this one is for prototype, read this it should helpful.
Multiple Ajax Requests