I'm trying to create a loader that tracks when AJAX calls start and end. It's using JSONP so the .ajaxComplete() doesn't work / isn't reliable.
Ideally I'd like to modify getJSON so that every time it is called a function, addAJAX(), is also called. The callback will also fire a function removeAJAX().
Currently I'm having to do this by adding in functions to every getJSON, of which there are many and likely to be many more.
For example:
// Add ajax tracker
hl.addAJAX();
$.getJSON('someurl.com?callback=?',{ key: APIKEY }, function(json) {
// Remove the ajax tracker
hl.removeAJAX();
});
Creating a wrapper function for AJAX calls is one option, but I'd really like to know if jQuery can be modified this way?
Yes you can override jQuery to do such actions. I have posted one answer for a similar type question. So Instead of re-posting, providing the reference -
How to get default error of ajax call
Technically it certainly could be done -- jQuery is just JavaScript, so you could dig through the sources .js files, find the method in question and modify to your heart's content. However, this certainly isn't a trivial edit and I would strongly advise you against modifying core functionality of third party libraries unless you think that there's no other feasible option and you're ready for what comes along with it.
I say that because that will mean, among other things, that you'll have to maintain those changes when you're trying to move to future versions, and that you may break support for other libraries or plugins which expect certain functions to work certain ways.
As much as it may be annoying to call the function in the callback every time, that's the recommended way of accomplishing this type of functionality.
Related
I'm working with a content management system that utilizes a number of different AJAX procedures for different functions. I really don't want to start poking around the core procedures because what I need doesn't warrant the effort.
So here's my question. Is there a generic JQuery on-completion handler that will detect if an AJAX call has been performed/was successful that I can utilize to launch a procedure without having to append to the return function of the specific query/process?
jQuery has a global .ajaxComplete event you can look into.
https://api.jquery.com/category/ajax/global-ajax-event-handlers/
I've been looking through some code that rewrites window._jqjsp. From the context, it seemed like it was either part of the DOM or something jQuery might insert.
Anyone has a clue what window._jqjsp is?
It's used in jQuery mobile development. It looks to be a special type of callback that passes on data to other callbacks.
"The jQuery JSONP plugin provides the sham callback, defaultly named _jqjsp, whose sole purpose is to make the response data available for the app's actual callback functions."
http://software.intel.com/en-us/articles/jquery-mobile-listview
It's most likely an extension. I know that a few of the Chrome extensions I use inject scripts on the page.
EDIT:
After checking around, it looks like this plugin might be assigning itself to that variable. Are you using jquery-jsonp? This mentions it.
So, I'm trying to improve my javascript skills and get into using objects more (and correctly), so please bear with me, here.
So, take this example: http://jsfiddle.net/rootyb/mhYbw/
Here, I have a separate method for each of the following:
Loading the ajax data
Using the loaded ajax data
Obviously, I have to wait until the load is completed before I use the data, so I'm accessing it as a callback.
As I have it now, it works. I don't like adding the initData callback directly into the loadData method, though. What if I want to load data and do something to it before I use it? What if I have more methods to run when processing the data? Chaining this way would get unreadable pretty quickly, IMO.
What's a better, more modular way of doing this?
I'd prefer something that doesn't rely on jQuery (if there even is a magical jQuery way), for the sake of learning.
(Also, I'm sure I'm doing some other things horribly in this example. Please feel free to point out other mistakes I'm making, too. I'm going through Douglas Crockford's Javascript - The Good Parts, and even for a rank amateur, it's made a lot of sense, but I still haven't wrapped my head around it all)
Thanks!
I don't see a lot that should be different. I made an updated version of the fiddle here.
A few points I have changed though:
Use the var keyword for local variables e.g., self.
Don't add a temporary state as an object's state e.g., ajaxData, since you are likely to use it only once.
Encapsulate as much as possible: Instead of calling loadData with the object ajaxURL, let the object decide from which URL it should load its data.
One last remark: Don't try to meet requirements you don't have yet, even if they might come up in the future (I'm referring to your "What if...?" questions). If you try, you will most likely find out that you either don't need that functionality, or the requirements are slightly different from what you expected them to be in the past. If you have a new requirement, you can always refactor your model to meet them. So, design for change, but not for potential change.
I'd like to have a chain of filters (mostly in cases of errors) which are called sequentially and are given the xhrObject, so that each filter function can decide what to do based on the specific fault. There should also be a mechanism for passing along the data to the next filter function, or stopping the chain at some point.
I know that the Deferred objects in jQuery allow something like that, but I don't really see a way to declare one global xhrObject, to which these filter callbacks will hook up at the very beginning, so that they are handling any response/fault. Besides, having one global service delegate is not good either, because it may make the app go out of sync if the users perform many operations, while the previous ones haven't finished yet.
Besides, having one global service delegate is not good either,
because it may make the app go out of sync if the users perform many
operations, while the previous ones haven't finished yet.
AJAX, by its nature, is asynchronous. You should program accordingly. There is nothing wrong with a single delegation AJAX function.
I'd like to have a chain of filters
I think you need to explain this portion a little more clearly.
I'm building a web app with a lot of ajax calls to be made.
Should I be trying to keep a small number of methods, and just pass in information about what type of request it is, and then switch based on that type inside the method
or
Many smaller methods, so don't have to pass in type, but more code to write setting up each method.
Currently I'm passing type from the id of the element being interacted with in the html, and then this tells me what I'm trying to do
row-action-data-id (I then split this in the functions, to work out what needs doing)
Are there any best practices for patterns like this?
its a judgement call. you always want to refactor out any duplicate code as much as possible but its important that your code is readable and maintainable.