Returning empty string on a input that has a value

Question

I have a date input in my page, which I'm using Daterangepicker framework to populate it.

Here is the code of how I start my page!

$(function(){
   startSelectors();
   var variaveis = returnInputVars();
   var rede = variaveis[0];
   var codLoja = variaveis[1];
   var period = variaveis[2];
   console.log('1.'+rede+' 2.'+codLoja+' 3.'+period);
});

function returnInputVars(){
   var rede = $("#dropdown-parceria").val();
   var codLoja = $("#dropdown-loja").val();
   var periodo = $("#datepicker-range").val();
   return [rede, codLoja, periodo];
};

The function startSelectors() is set to start my datepicker and other fields, which is working perfectly. After it, I create a var called "variaveis" to fill with the values of each field because I will use then later (this functions also works perfectly at other scripts of my page).

Running the page, my console returns this:

The funny thing is, if I type at the console this, the value is shown, just while starting the script is does not work!

Anybody experienced something like this?

***UPDATE

Adding this script to my start function:

console.log($("#datepicker-range"));

The value is shown, but the second console.log don't:

EDIT 1. FIDDLE (Suggested by @halleron)

Can you provide a fiddle or all of the RELEVANT code please? — hallleron, Aug 10 '17 at 13:50
I cant provide a fiddle of everything because it wont, my data that generates the datepicker is from a db. But i'll share a fiddle my js, just for analyzis. — João Vitor, Aug 10 '17 at 13:56
Well you could provide some sample data like it was coming from the db ... — hallleron, Aug 10 '17 at 13:57
Wrap all of your pertinent code in a `$(document).ready(function() {});` function. — Alexander Dixon, Aug 10 '17 at 15:49
arent `$(document).ready(function() {});` and `$(function(){});` the same thing? @AlexanderDixon — João Vitor, Aug 10 '17 at 17:19
I'm almost positive this is an order of operations thing. Typically to isolate and trouble shoot I use a page sniffer. `var counter = 0; var imgScanner = setInterval(function() { if (condition) { clearInterval(imgScanner); } else { //var doNothing = ""; counter++; if (counter === 100) { console.log(counter); clearInterval(imgScanner); } } }, 50);` Where `condintion` is if the datepicker.length is true (is on the page) — Alexander Dixon, Aug 10 '17 at 18:33
@AlexanderDixon I understood your metodology using a page sniffer, but how can i implement this in my code? Maybe creating a function setting an interval to check if the value length is not null? — João Vitor, Aug 10 '17 at 20:50
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Liam, Sep 01 '17 at 13:00

Alexander Dixon · Accepted Answer · 2017-08-16T19:59:44.067

To ensure things are loaded in the correct order, it is useful to apply a page sniffer code snippet that will scan the page continuously until a condition is met, or until a preset counter limit is reached (to prevent strain on browser memory). Below is an example of what I typically use that would fit your scenario.

I think because you are dealing with asynchronous loading, you can't have a global variable that holds the values in a global scope without an interval to detect when it can be used. Otherwise, it will attempt to read the variable when it is not yet ready.

You can invoke functions anywhere you like. But I would keep all of your variables contained within the page_sniffer_2017() because that is a controlled environment where you know that everything successfully loaded and you know that the variables are ready to be accessed without error.

That way, regardless of connection speed, your functions will only fire when ready and your code will flow, sequentially, in the right order.

Within the ajax success options, always add a class to the body of the document that you can search on to determine if it has finished loading.

$(document).ready(function() {
    page_sniffer_2017();
});

function page_sniffer_2017() {
    var counter = 0;
    var imgScanner = setInterval(function() {
        if ($("#datepicker-range").length > 0 && $("#datepicker-range").val().length && jQuery('body').hasClass('date-picker-successfully-generated')) {
            var periodoDatepicker = $("#datepicker-range").val(); // ok 
            console.log(periodoDatepicker); // ok 
            var variaveis = returnInputVars(replaceDate(periodoDatepicker)); // ok 
            console.log(variaveis[0], variaveis[1], variaveis[2]);
            //startNewSelectors(variaveis); 
            // start ajax call 
            generateData(variaveis[0], variaveis[1], variaveis[2]);
            clearInterval(imgScanner);
        } else {
            //var doNothing = ""; 
            counter++;
            if (counter === 100) {
                console.log(counter);
                clearInterval(imgScanner);
            }
        }
    }, 50);
}

testing the code it returned perfectly what I needed, but to set the value into a var, how can I do it? The setInterval returns a true or false — João Vitor, Aug 14 '17 at 17:14
@jvbarsou I updated the code by initializing a variable and then updating it after the `page_sniffer_2017()` returns true. — Alexander Dixon, Aug 14 '17 at 17:21
`console.log(master_date);` is returning an empty string @Alexander Dixon :/ but the console.log inside the function is returning the correct date — João Vitor, Aug 14 '17 at 17:30
can the var `master_date`assume the value inside the function without been called or receiving the a return value from a function? — João Vitor, Aug 14 '17 at 17:35
I updated the code and modified your original `returnInputVars()` function to pass in the cached date. — Alexander Dixon, Aug 14 '17 at 17:36
the code is now returning `undefined` @Alexander. Here how the code is: https://jsfiddle.net/115yvbhh/1/ — João Vitor, Aug 14 '17 at 17:47
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/151912/discussion-between-jvbarsou-and-alexander-dixon). — João Vitor, Aug 14 '17 at 18:45
Dear god don't do this.. the real answer is [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Liam, Sep 01 '17 at 12:59

Returning empty string on a input that has a value

1 Answers1

Linked