I am working on a project that has over 40 ajax webservice calls. I want add a few debugging options to my project. One of which is a timing method. I have already created my Timer class/object in Javascript.
I need help determining which ajax function is current running. I have implemented the .ajaxStart and .ajaxStop listeners and would like to retrieve information pertaining to the current ajax call within these function.
Is there a way to perhaps access the requested url or anything to help identify which ajax call is running?
You can use a prefilter to access the native ajax object which would give much better debug info.
Related
When should the load( url, data, callback ) method be used versus jQuery.get( url, data, callback, type ) when making AJAX calls with jQuery?
First of all those two functions are completely different. The 'load' function works with selectors and loads the result of AJAX call inside the selected group and the callback is to handle the "oncomplete" event of the call; while the $.get function is more general and the callback handles the success response of AJAX call where you are free to define any behavior you want. And you can find all this information just by looking at the documentation and specification of the jQuery framework.
Here you can find a good documentation.
#Artem's answer seems to be missing the fact that the load is a more generic function than get.
According to the jQuery API docs, load uses get or post depending on the data. Quoting it here:
Request Method
The POST method is used if data is provided as an object; otherwise, GET is assumed.
So for the purpose of getting partial HTML content from the server & inserting it into the DOM, load is a better method than the get method, as the developer does not need to worry about handling huge data & various intermediate steps that the load function does before fetching & before inserting the content.
For instance, if you need to load partial content of a page, you could use the following expression:
$('#result').load('ajax/test.html #container');
This retrieves the content of ajax/test.html, but then jQuery parses the returned document to find the element with an ID of container. This element, along with its contents, is inserted into the element with an ID of result, and the rest of the retrieved document is discarded.
One thing to keep in mind is that, when you just need a GET request avoid providing an object to the data parameter & instead use the $.param method to get a serialized form of the request parameters.
load injects the data directly into the DOM. If you don't need this behavior, use get.
would only have to look at the jQuery code, as it is available for review.
anyway all calls must reach the same method but respond in different ways depending on the need
I have a web application that is growing more complex. It makes heavy use of JavaScript based HTML generation and AJAX calls, and herein lies my problem:
Since I can't know how long an ajax call might take getting back to client side, I don't know when the callback gets actually executed. The user might have at that point navigated away from the element that originally caused the AJAX event, in which case this callback can cause some havoc. Is there a way to "expire" old callbacks ?
Are there any libraries that would offer that functionality? (I am using jQuery now but am not 100% familiar with it).
Thanks,
You might want to look into Ajax Queue Manager. There are params you can set to abort old requests before sending a new one. I think that might be what your looking for.
Well, the simple answer is to check for the proper state of your app within your callback functions, before they do whatever it is they are doing that causes problems. For example, you could make sure that certain elements are still being hovered over.
I need to execute a few scripts on a page whose ajax requests (onchange/onclick on different elements) are constructed using a custom framework that I cannot change. Fundamentally, I would like to, on successful completion of specific request, execute a few scripts that I have written. Is it possible to use ajaxComplete() or ajaxSuccess() when the ajax call was not initiated using jQuery?
No. Those are part of the event handling jQuery adds to the events it fires off itself.
I don't think there's an event fired when any ajax request at all finishes; your best option is to wrap the XHR constructor before loading this other framework and restore it afterwards. Even that may not work depending on what the framework is actually doing.
Can you be more specific about what this other code is and what you want to add to it? There are events that fire when the page is mutated, for instance, which might be more appropriate.
I'm having a problem with a Java JSF application: In a certain case, a user action causes an Ajax HTTP request that updates the UI correctly, but then immediately a second request is triggered, causing a second, incorrect update.
How can I find out (preferably using Firebug) where exactly that second request is triggered? There's a lot of minified framework JS code, so I don't know where to place breakpoints. Setting the form onsubmit handler to console.trace did not help, I suppose because these are independant Ajax requests.
While trying out the suggestions in the answers, I found that Firebug already has exactly what I need out of the box: the Console tab displays all requests, and for Ajax requests it shows the file and line number where they originate, which tells me where to set my breakpoint...
Using Firebug you can set Breakpoints on DOM (HTML) Mutation Events if you have some HTML changes in your UI update.
If the framework abstracts the AJAX requests, you should be able to trace the calls to the abstractions. For example, jQuery allows this through its global AJAX event handlers.
Another, more robust way to tackle the problem would be to replace the XHR object and trace calls made to it (i.e. if the framework does not provide the above abstraction or if the calls that you want to use don't use the abstraction). Just replace the GM_log with console.trace in the script at the end of the page and include it in the page you're testing.
What I personally have done in these case is using an HTTP proxy that can put a request or response 'on hold'. E.g. Burp Proxy (this is actually a security tool, but it works great for debugging purposes)
Start up the proxy and configure your browser to use it. Navigate to the page where the roque requests originates from and activate intercepting requests (this might take some practice as Burp Proxy can be a rather complicated tool).
Now do the user action, if all goes well the proxy intercepts it and waits for your confirmation to let it go through. Do this. Then you'll probably see the second request coming and being intercepted by the proxy as well. Don't let this one through, but instead switch to Firebug and suspend into the debugger. Hopefully you'll then be able to see where it originates from. Edit: on second thoughts, the asynchronous nature of AJAX probably means you won't be able to see what the exact spot is via this method anyway... :(
At least you can also configure it to intercept responses. Both requests and responses can be edited on the fly, which can be great for experimenting and debugging and might help in narrowing down the problem.
Might this would help, caller is a method in Function object of javascript.
console.log(arguments.callee.caller.toString());
I am firing an Ajax request using jQuery. During the process, I show a loading text to the user till it reaches the success/errorhandler function. Is there a way to abort the request in middle of it. So that it doesn't goes to the success/errorHandler variable. One way I can think of is using a global variable. Is there a better method.
Thanks
Perhaps is a start?
$.ajax() returns the XMLHttpRequest that it creates. In most cases you won't need that object to manipulate directly, but it is available if you need to abort the request manually.
http://docs.jquery.com/Ajax/jQuery.ajax#options
I think you can just call the abort() method of your request object.
It may be more complicated than this depending on the behaviour you are after see here.