在具有值的输入上返回空字符串 [英] Returning empty string on a input that has a value

问题描述

我在页面中输入了日期，我正在使用 Daterangepicker 框架进行填充.

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

function startSelectors()设置为启动我的日期选择器和其他字段，它运行良好.之后，我创建了一个名为"variaveis"的变量来填充 并使用每个字段的值，因为稍后我会使用它(此功能在页面的其他脚本中也可以正常使用).

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"));

显示该值，但第二个console.log不显示:

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

编辑1. 字段(由@halleron建议)

EDIT 1. FIDDLE (Suggested by @halleron)

推荐答案

为确保以正确的顺序加载内容，应用页面嗅探器代码片段将持续扫描页面直到满足条件是很有用的，或者直到达到预设的计数器限制(以防止对浏览器内存造成压力).以下是适合您情况的我通常使用的示例.

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.

您可以在任意位置调用函数.但是我会将所有变量都包含在page_sniffer_2017()中，因为这是一个受控环境，在此环境中，您知道所有内容均已成功加载，并且可以随时访问变量而不会出错.

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.

在ajax成功选项中，始终将一个类添加到文档的body中，您可以在该文档上进行搜索以确定其是否已完成加载.

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);
}

这篇关于在具有值的输入上返回空字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！