jvbarsou jvbarsou - 2 years ago 155
jQuery Question

Returning empty string on a input that has a value

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!

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];

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:

enter image description here

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

enter image description here

Anybody experienced something like this?


Adding this script to my start function:


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

enter image description here

EDIT 1. FIDDLE (Suggested by @halleron)

Answer Source

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() {

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]);
            // start ajax call 
            generateData(variaveis[0], variaveis[1], variaveis[2]);
        } else {
            //var doNothing = ""; 
            if (counter === 100) {
    }, 50);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download