Use a javascript var in function - order issue

Question

I am having issues with the order of my javascript, I'm sure this is very easy:

I want to check what a variable is (using an if statement), and then set it either from another var, or from the value in a txt file

So far I can load the file, and set the var (I can check it in the console) successfully

However the later parts of the script do not wait for the var to be set, so the var is not used, resulting in an error for the var "cleanTradeDate"

My question is, is the below correct or should I be structuring the var differently. How do I make the subsequent code wait/use the "cleanTradeDate" value?

Here is a sample of the code:

var URLTradeDate = document.URL.substring(document.URL.search('tradeDate=') + 10, document.URL.search('tradeDate=') + 22);
var cleanTradeDate;
$(document).ready(function () {
if (URLTradeDate == '') {
    $.get('data/0.max_trade_date.txt', function(maxTradeDate) {
        cleanTradeDate = maxTradeDate.replace(/[\n\r]+/g, '');
    });
} else {
    cleanTradeDate = URLTradeDate;
}

$("#datepicker").datepicker({dateFormat: 'yy-mm-dd'});
$("#datepicker").datepicker('setDate', cleanTradeDate);
});

Btw, getting the right date seems to be a problem that better should be solved at the server side — Bergi, Sep 29 '16 at 15:56
solved this! I just subset all the subsequent code in $.get function.... — user1758908, Sep 29 '16 at 16:05
but that only will work if no `URLTradeDate` is found. Have a look at my answer for how to make both cases work without code duplication — Bergi, Sep 29 '16 at 16:15

score 2 · Answer 1 · edited May 23 '17 at 12:33

It's not where the variable is declared, but that it's filled asynchronously. You better use promises:

$(document).ready(function () {
    var index = location.search.indexOf('tradeDate=');
    var URLTradeDate = location.search.slice(index + 10, index + 22);
    var promise = (index == -1 || URLTradeDate == '')
      ? $.get('data/0.max_trade_date.txt').then(function(maxTradeDate) {
            return maxTradeDate.replace(/[\n\r]+/g, '');
        });
      : $.when(URLTradeDate);
    promise.then(function(cleanTradeDate) {
        $("#datepicker").datepicker({dateFormat: 'yy-mm-dd'});
        $("#datepicker").datepicker('setDate', cleanTradeDate);
    });
});

score 0 · Accepted Answer · edited Sep 30 '16 at 10:56

$.get is asynchronous (meaning the code doesn't wait for it to finish before carrying on), so you'll want something more like:

var URLTradeDate = document.URL.substring(document.URL.search('tradeDate=') + 10, document.URL.search('tradeDate=') + 22);
$(document).ready(function () {
    if (URLTradeDate == '') {
        $.get('data/0.max_trade_date.txt', function(maxTradeDate) {
            setTradeDate(maxTradeDate);
        });
    } else {
        setTradeDate(URLTradeDate);
    }
});

function setTradeDate(tradeDate){
    tradeDate = tradeDate.replace(/[\n\r]+/g, '');
    $("#datepicker").datepicker({dateFormat: 'yy-mm-dd'});
    $("#datepicker").datepicker('setDate', tradeDate);
}

This way once the data is received from the $.get, you call a function 'setTradeDate' that sets the datepicker.

EDIT: moved the formatting of maxTradeDate inside the setTradeDate function and fixed a couple of errors I noticed.

If you're using a function with a parameter, you should completely omit the `cleanTradeDate` variable that is now unnecessary — Bergi, Sep 29 '16 at 16:16

Use a javascript var in function - order issue

2 Answers2