Text only | Text with Images

ElkArte Community

Title: jQuery version madness
Post by: Joker™ on July 20, 2014, 10:29:18 am
Hi everyone,

As most of the JS things are done with jQuery most of the times, but there is a ugly madness behind jQuery too... versions.

So, lets say you have used 2.0.3 or some latest version, developed a mod/feature and placed it on the web as a software for others to use. But, suddenly some other developer made a piece of code using jQuery version build way ago(lets say v 1.1), and all your mod/feature functionality got shattered into pieces, reason being the older version of jQuery doesn't contains the function you have made use of. In that case how can you tackle such madness, as you have $/jQuery object on DOM but its useless? I've made some changes in one of my mod for SMF, but I want to hear opinion of other devs, so that I can steal the best approach :D.

Hack I did to overcome the issue, commit (https://github.com/siddhartha-gupta/SMF-Likes/commit/d07b524878208ead158db85d459961ad59d32c4b)

/me can see some awesome replies coming out
Title: Re: jQuery version madness
Post by: forumsearch0r on July 20, 2014, 05:17:49 pm
"lp_jquery2_0_3". Clever.

(Actually, using the very latest versions of everything isn't always wanted, especially in large companies where browsers are older.)
Title: Re: jQuery version madness
Post by: emanuele on July 22, 2014, 12:19:12 pm
/me tried a variant:

Code: [Select]
loadJquery("2.0.3", function ($) {
	// Here it goes my code that works only with version 2.0.3
});

function loadJquery(ver, callback)
{
	var url = 'http://ajax.googleapis.com/ajax/libs/jquery/' + ver + '/jquery.min.js',
		script = document.createElement("script");
	script.type = "text/javascript";
	script.src = url;

	if (typeof(jQuery) == "undefined")
	{
		appendjQuery(script, callback);
	}
	else
	{
		compareJQueryVersion(jQuery.fn.jquery, ver, function (result) {
			switch(result) {
				case false:
				case 1:
					callback(jQuery);
					break;
				case 2:
					appendjQuery(script, callback);
			}
		});
	}
};

function appendjQuery(script, callback)
{
	var head = document.getElementsByTagName("head")[0],
		done = false;

	script.onload = script.onreadystatechange = function() {
		if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete"))
		{
			done = true;
			callback(jQuery.noConflict());
			script.onload = script.onreadystatechange = null;
			head.removeChild(script);
		};
	};
	head.appendChild(script);
}

function compareJQueryVersion(v1, v2, callback)
{
	var v1parts = v1.split('.');
	var v2parts = v2.split('.');

	for (var i = 0; i < v1parts.length; ++i)
	{
		if (v2parts.length == i)
		{
			//v1 + " is larger"
			callback(1);
			return;
		}

		if (v1parts[i] == v2parts[i])
		{
			continue;
		}
		else if (v1parts[i] > v2parts[i])
		{
			//v1 + " is larger";
			callback(1);
			return;
		}
		else
		{
			//v2 + " is larger";
			callback(2);
			return;
		}
	}

	if (v1parts.length != v2parts.length)
	{
		//v2 + " is larger";
		callback(2);
		return;
	}
	callback(false);

	return;
}
Title: Re: jQuery version madness
Post by: Joker™ on July 26, 2014, 03:14:39 pm
Quote from: forumsearch0r – "lp_jquery2_0_3". Clever.

(Actually, using the very latest versions of everything isn't always wanted, especially in large companies where browsers are older.)
One of my mod uses 'on' 'off' methods of jquery, and another mod installed jquery 1.1, as a result the mod stopped working. So, there are cases where one needs to check the jQuery version.


Quote from: emanuele – /me tried a variant:

Code: [Select]
loadJquery("2.0.3", function ($) {
	// Here it goes my code that works only with version 2.0.3
});

function loadJquery(ver, callback)
{
	var url = 'http://ajax.googleapis.com/ajax/libs/jquery/' + ver + '/jquery.min.js',
		script = document.createElement("script");
	script.type = "text/javascript";
	script.src = url;

	if (typeof(jQuery) == "undefined")
	{
		appendjQuery(script, callback);
	}
	else
	{
		compareJQueryVersion(jQuery.fn.jquery, ver, function (result) {
			switch(result) {
				case false:
				case 1:
					callback(jQuery);
					break;
				case 2:
					appendjQuery(script, callback);
			}
		});
	}
};

function appendjQuery(script, callback)
{
	var head = document.getElementsByTagName("head")[0],
		done = false;

	script.onload = script.onreadystatechange = function() {
		if (!done && (!this.readyState || this.readyState == "loaded" || this.readyState == "complete"))
		{
			done = true;
			callback(jQuery.noConflict());
			script.onload = script.onreadystatechange = null;
			head.removeChild(script);
		};
	};
	head.appendChild(script);
}

function compareJQueryVersion(v1, v2, callback)
{
	var v1parts = v1.split('.');
	var v2parts = v2.split('.');

	for (var i = 0; i < v1parts.length; ++i)
	{
		if (v2parts.length == i)
		{
			//v1 + " is larger"
			callback(1);
			return;
		}

		if (v1parts[i] == v2parts[i])
		{
			continue;
		}
		else if (v1parts[i] > v2parts[i])
		{
			//v1 + " is larger";
			callback(1);
			return;
		}
		else
		{
			//v2 + " is larger";
			callback(2);
			return;
		}
	}

	if (v1parts.length != v2parts.length)
	{
		//v2 + " is larger";
		callback(2);
		return;
	}
	callback(false);

	return;
}

Nice nice. Just a suggestion, for typeof use === comparator
Text only | Text with Images