Question

我有一个JQuery加载屏幕，在按下表单提交按钮时显示：

$(document).ready(function () {
    $('#submit').click(function () {
        $("#plotLoader").show();
    });
});

表单主要是select类型，但我也有一个JQuery Datepicker来选择日期。加载屏幕完全显示select类型，但是当我从Datepicker中选择日期时它根本不显示？

可能导致这种情况的原因是什么方法可以修复它？

修改

以下是我要求的更多代码。

HTML表单：

<form id="options" method="post" action="SQLselecter.jsp">

        Plot Type: 
        <select name="PlotType" id="PlotType">
            <option value="Point">Point</option>
            <option value="Line">Line</option>
            <option value="Bar">Bar</option>
            <option value="Pie">Pie</option>
        </select>

        ADACS:
        <select name="ADACS" id="ADACS">
            <option value="ADACS">ADACS</option>
            <option value="ADACS">ADACS</option>
            <option value="ADACS">ADACS</option>
            <option value="ADACS">ADACS</option>
        </select>

        Skyline: 
        <select name="Skyline" id="Skyline">
            <option value="Skyline">Skyline</option>
            <option value="Skyline">Skyline</option>
            <option value="Skyline">Skyline</option>
            <option value="Skyline">Skyline</option>
        </select>

        AccessType:
        <select name="AccessType" id="AccessType">
            <option value="AccessType">AccessType</option>
            <option value="AccessType">AccessType</option>
            <option value="AccessType">AccessType</option>
            <option value="AccessType">AccessType</option>
        </select>

        Dates:
        <input type="text"  id="datepickerFrom" name="fromDate" placeholder="mm/dd/yyyy">
        <input type="text"  id="datepickerTo" name="toDate" placeholder="mm/dd/yyyy">

        <div id="buttons">
                <input type="submit" id="submit" value="Plot Graph" onclick="return check();">
        </div>
</form>

Javacript

function check()
    {
        if (document.getElementById('PlotType').value=="") {
        alert ("Please select plot type.");
        return false;
        }

        if (document.getElementById('datepickerFrom').value=="" && document.getElementById('datepickerTo').value==""
                && document.getElementById('Skyline').value=="" && document.getElementById('ADACS').value=="" && document.getElementById('AccessType').value=="" ) {
            alert ("Please select at least one search parameter.");
            return false;
        }

        if (document.getElementById('datepickerFrom').value!="" || document.getElementById('datepickerTo').value!="") {

            if (document.getElementById('datepickerFrom').value==""
             || document.getElementById('datepickerFrom').value==null )
            {
                alert ("Please Enter 'From date'.");
                return false;
            }
            if (document.getElementById('datepickerTo').value==""
                || document.getElementById('datepickerTo').value==null)
               {
                   alert ("Please Enter 'To date'.");
                   return false;
               }
            return true;
        }

        $(document).ready(function () {
            $('#submit').click(function () {
                $("#plotLoader").show();
            });
        });

    }

Answer 1

试试这个：

$('#submit').click(function (e) {
    e.preventDefault();
    $("#plotLoader").show();
});

<强>更新

解决方法

你必须创建两个按钮：

给出CSS visibility:hidden;
一个虚拟按钮（一个图形按钮或一个看起来像按钮的div，除了显示加载器并触发真正的提交按钮之外什么都没做！）

解释

在你想要真正按钮的地方使用虚拟按钮（我的意思是将它放在同一个地方）

在虚拟按钮的点击事件上写：

$('#dummy').click(function(){
    $("#plotLoader").show();
    setTimeout(function(){
        $('#submit').trigger('click');
    },500);
});

现在，当浏览器实际处理重定向时，用户可以看到加载器。

JQuery加载器不适用于JQuery Datepicker

1 个答案: