Sending Ajax requests and updating DOM

Question

I wrote some ugly JavaScript that is responsible for sending Ajax requests and update the DOM. I'm using it to show user progress of background jobs.

this.AjaxPoller = {
 poll: function() {
 setTimeout(this.AjaxPoller.request, 5000);
 },
 request: function() {
 $(".ajax_poller[data-url]").each(function(i, elem) {
 url = $(elem).data("url");
 $.getJSON(url, function(data) {
 if (checkProgress(data)) {
 location.reload();
 };
 $.each(data, function( key, val ) {
 $(key+ ' .progress_info').html(val);
 $(key + ' .progress-bar').width(val);
 });
 });
 });
 }
};
var checkProgress = function(obj) {
 correct = true;
 for (key in obj) {
 if (obj[key] != '100%') correct = false;
 }
 return correct;
}

What can I refactor in this code to make it better?

• Marc-Andre: Refactoring code is the goal of this site. Your title is general, please try to choose one that explain what the code do. Normally when you're here, it's for refactoring your code.

Answer 1

I personally like to rely on named functions rather than inline anonymous functions.

this.AjaxPoller = {
 poll: poll,
 request: request
};
function request() {
 $(".ajax_poller[data-url]").each(fetchDataForElement);
}
function fetchDataForElement(i, elem) {
 var url = $(elem).data("url");
 $.getJSON(url, handleJson);
}
function handleJson(data) {
 if (checkProgress(data)) {
 location.reload();
 }
 $.each(data, function(key, val) {
 $(key+ ' .progress_info').html(val);
 $(key + ' .progress-bar').width(val);
 });
}
function poll() {
 setTimeout(this.request, 5000); 
}
function checkProgress(obj) {
 var correct = true;
 for (key in obj) {
 if (obj[key] != '100%') correct = false;
 }
 return correct;
}

• Mateusz Urbański: But when I run this code it throws me an error: TypeError: this.AjaxPoller is undefined
• Robert Messerle: Oops, had a typo in the poll method - fixed it now.
• Mateusz Urbański: Thanks. I was also thinking about using here Javascript module pattern. What do You think about it?