How do I display a DIV if the current version of the program is greater than the version I have?

Question

$.getJSON("https://api.github.com/repos/theinfection/screencalculator.kdapp/contents/resources/version", function(data) {
    var currentVersion = decode64(data.content);

    $.get('./resources/version', function(dataVersion){
        var myVersion = dataVersion;

        if (currentVersion > myVersion) {
            $('.update').show();
        }
    });
});

Explanation of the code

First, I get the contents of a file on my GitHub repository called "version" (The file has "1.4.3" written in it). Then, since GitHub encodes the contents of files in base64, I decode it with another JS file. This sets the "currentVersion" variable to 1.4.3.

Next, I call the "version" file I have on my server (which has 1.4.2 written in it). That sets the "myVersion" variable to 1.4.2.

From there, I compare the two. If currentVersion is greater than myVerison, it shows the update DIV (which by default is set to "display:none;" in the CSS).

Problem

When the two variables are equal, the DIV still shows.

Question

What should I do so that this doesn't happen? How exactly should I be using the else and else if statements to accomplish what I want?

Thanks in advance!

Answer 1

It looks like your problem could be that 1.4.2 and 1.4.3 are not numbers and would be represented as string. You would need to add some logic like splitting the string by the period and doing checks on the sub versions.

Here is a post about comparing version numbers with JS that might solve your issue.

How to compare software version number using js? (only number)

EDIT

You can use the method from the post I linked to do the comparison for your versions

function version_compare(curVersion, myVersion) {
    var v1parts = curVersion.split('.');
    var v2parts = myVersion.split('.');

    for (var i = 0; i < v1parts.length; ++i) {
        if (v2parts.length == i) {
            return false;
        }

        if (v1parts[i] == v2parts[i]) {
            continue;
        }
        else if (v1parts[i] > v2parts[i]) {
            return false;
        }
        else {
            return true;
        }
    }

    if (v1parts.length != v2parts.length) {
        return true;
    }

    return false;
}

$.getJSON("https://api.github.com/repos/theinfection/screencalculator.kdapp/contents/resources/version", function(data) {
    var currentVersion = decode64(data.content);

    $.get('./resources/version', function(dataVersion){
        var myVersion = dataVersion;

        if (!version_compare(currentVersion,myVersion)) {
            $('.update').show();
        }
    });
});

I modified the method a little to return a bool instead of a string of which version is larger.

Answer 2

I've read through the post by DSlagle, and made some updates here after going through some of the comments that had changes on jsfiddle.

http://jsfiddle.net/zshift/BCGSb/

    var currentVersion = decode64(data.content);
    alert('Current version: ' + currentVersion);
    //$.get('http://kasimahmic.koding.com/works/PPI/resources/version', function(dataVersion){
    var myVersion = '1.4.2';
    alert('Local version: ' + myVersion);

    if (currentVersion > myVersion) {
        alert('update available');
        $('.update').show();
    }
    else
        alert('no update available');

The comparison should work fine with data from the server, but that depends on what your local resource file is returning. Since we can't debug directly against your data due to access control rights, I mocked out the call, and using 1.4.3 for both of the values resulted in the DIV not being shown. Changing 'myVersion' to 1.4.2 caused it to be shown. I also added the added some alerts to make it a little easier to see the values and flow for debugging.

Another note on debugging with jsfiddle. Using Chrome, you can easily debug running code in jsfiddle, just open the developer tools, go to the sources tab, open fiddle.jshell.net, and if your fiddle is at http://jsfiddle.net/{id}, then the source should be in a folder called {id}/show. This is the frame in the bottom right of jsfiddle. You can also inspect the page and click on the link in the iframe, this will navigate you to the same source window. from here, you can attach breakpoints and debug with live data. The reason I didn't bring this up before is that your code is running as soon as the page loads, so it's not possible to watch it live without calling a separate function after the page loads. But thought it might be useful for future reference ;)

Answer 3

This can be used as a simple version comparator :

function Version(parse) {
this.version = parse.split('.');

this.compare = function(comp) {
    for(i = 0; i < this.version.length; i++) {
        if(this.version[i] < comp.version[i]) {
            return "older";
        }else if(this.version[i] > comp.version[i]) {
            return "newer";
        }
    }
    return "same";
};
};

var ver = new Version("1.2.5");
var ver2 = new Version("1.2.4");

console.log(ver.compare(ver2)); // newer
console.log(ver.compare(ver)); // same
console.log(ver2.compare(ver)); // older

You can edit so it will return e.g. 0,1 or true,false, depends on you.

Gelidus