Quick clicks loads all ajax call results on last month loaded.

[FranciscoMateo]

Hi guys,

I found an issue related to your Monthly.js. Seems that if you click many times on same button, multiples ajax call are produced and put their results in the last month loaded:

http://g.recordit.co/zcb8st5whj.gif

Exist some way to fix this?

Regards.
Francisco Javier Mateo

[richardtallent]

There are basically three decent solutions I can think of:

1. On the server, you can check if a request is already being processed for the same client, and if so, return an error code. (This is the hardest to do, especially if your use case doesn't involve authenticated users or if your server stack doesn't have shared state.)

2. You can improve the Monthly code to generate a random number before running the $.get(), pass that number explicitly to the handler, and when the handler returns, if the number is not the same as the variable provided through the closure, return. (I'm not sure if this would be easy, but it would be preferable to (3) below in terms of user experience.)

3. You can improve the Monthly code so the buttons in the header are disabled just before calling $.get() and are re-enabled after the handler event has finished parsing the events.

[FranciscoMateo]

Hi guys,

Thanks richardtallent, following more and less your advice I can fix the issue. I just added the following code on montlhy.js javascript file:

$(parent).block({message: null, overlayCSS: {background: "#fff", opacity: .6}});
$(parent).unblock();

Like this:
monthly.js: 266

function addEvents(month, year) {
	if(options.events) {
		// Prefer local events if provided
		addEventsFromString(options.events, month, year);
	} else {
		var remoteUrl = options.dataType === "xml" ? options.xmlUrl : options.jsonUrl;
		if(remoteUrl) {
			// Replace variables for month and year to load from dynamic sources
			var url = String(remoteUrl).replace("{month}", month).replace("{year}", year);
			$(parent).block({message: null, overlayCSS: {background: "#fff", opacity: .6}});
                         $.get(url, {now: $.now()}, function(data) {
                        addEventsFromString(data, month, year);
                        $(parent).unblock();
                    }, options.dataType).fail(function() {
			console.error("Monthly.js failed to import " + remoteUrl + ". Please check for the correct path and " + options.dataType + " syntax.");
			})
		}
	}
}

Regards!

[pmachapman]

My fix for this issue is in PR #48, and involves only displaying the event data loaded via AJAX if the month and year of the AJAX request matches the month and year current selected in the calendar.

I found this to be a simple approach to the problem.