Question

我有两个HTML按钮，如下所示：

<button id="alarm-log-submit" class="btn btn-primary alarm-log-btn" >Generate Log</button>
<button id="alarm-log-download" class="btn btn-primary alarm-log-second-btn">Download Log</button>

第一个按钮用于在本地磁盘上生成文件。第二个按钮用于下载生成的文件。我最初禁用了下载按钮。

我的问题：如何在创建文件后启用下载按钮？（不是在点击提交按钮时）

主要的挑战是根据处理数据的大小来生成文件可能需要不同的时间

在Javascript代码段下方

document.getElementById("alarm-log-download").setAttribute("disabled", "disabled");
$( document ).on("click", "#alarm-log-submit", function(e){
        e.preventDefault();
        var tableName = $('#alarm-log-stream').val();
        var startTime = $('#alarm-log-start-datepicker').find('input').val();
        var endTime = $('#alarm-log-end-datepicker').find('input').val();
        var fileType = $("#file-type").val().toLowerCase();
        var returnVal = {'tableName':tableName,'startTime':startTime, 'endTime':endTime, 'filetype':fileType};
        console.log(returnVal);
        socket.emit("start_end_time", returnVal);  
        // How to check for file creation here ?!      
        document.getElementById("alarm-log-download").removeAttribute("disabled");
    });
$( document ).on("click", "#alarm-log-download", function(e){
        e.preventDefault();
        var tableName = $('#alarm-log-stream').val();
        var fileType = $("#file-type").val().toLowerCase();
        var fileName = tableName + "." + fileType;
        window.location = "/api/rest/v1/scanning/download/" + fileName;
        console.log(fileName)
        $("#download-form").action("/api/rest/v1/scanning/download/" + fileName);
        $("#download-form").submit();

    });

Python方

@socketio.on("start_end_time", namespace='/frontend')
def db_access(json_object):
    start_ts = str(json_object['startTime'])
    end_ts = str(json_object['endTime'])
    file_type = str(json_object['filetype'])
    table_name = str(json_object['tableName'])
    cur = db_connect()
    json_data = db_select_time_query(cur, start_ts, end_ts, table_name)
    # File generation
    if file_type == "csv":
        db_export_to_csv(json_data, table_name)
        print "csv"
    else:
        print "pdf"
        db_export_to_pdf(json_data, table_name)

编辑我解决了以下问题。感谢您的建议和帮助

Answer 1

感谢大家的帮助。以下是答案：

的Javascript

$( document ).on("click", "#alarm-log-submit", function(e){
        e.preventDefault();
        document.getElementById("alarm-log-download").setAttribute("disabled", "disabled");
        var tableName = $('#alarm-log-stream').val();
        var startTime = $('#alarm-log-start-datepicker').find('input').val();
        var endTime = $('#alarm-log-end-datepicker').find('input').val();
        var fileType = $("#file-type").val().toLowerCase();
        var returnVal = {'tableName':tableName,'startTime':startTime, 'endTime':endTime, 'filetype':fileType};
        console.log(returnVal);
        socket.emit("start_end_time", returnVal);
        //when you click this button, it sends a JSON object with player id, startTime="YYYY:MM:DD:HH:MM:SS", endTime=that
        socket.on('start_end_time', function (data) {
            document.getElementById("alarm-log-download").removeAttribute("disabled");
            console.log("socket call");
            console.log(data);
        });

    });
$( document ).on("click", "#alarm-log-download", function(e){
        e.preventDefault();
        var tableName = $('#alarm-log-stream').val();
        var fileType = $("#file-type").val().toLowerCase();
        var fileName = tableName + "." + fileType;
        window.location = "/api/rest/v1/scanning/download/" + fileName;
        console.log(fileName)
        $("#download-form").action("/api/rest/v1/scanning/download/" + fileName);
        $("#download-form").submit();

    });

的Python

@socketio.on("start_end_time", namespace='/frontend')
def db_access(json_object):
    start_ts = str(json_object['startTime'])
    end_ts = str(json_object['endTime'])
    file_type = str(json_object['filetype'])
    table_name = str(json_object['tableName'])
    cur = db_connect()
    json_data = db_select_time_query(cur, start_ts, end_ts, table_name)
    if file_type == "csv":
        db_export_to_csv(json_data, table_name)
        print "csv"
    else:
        print "pdf"
        db_export_to_pdf(json_data, table_name)
    emit_data = json.dumps("file created")
    socketio.emit('start_end_time', emit_data, namespace="/frontend")

Answer 2

仅适用于javascript：

您可以设置一个事件触发器，在单击第一个按钮后显示第二个按钮。例如，

    <button id="alarm-log-submit" class="btn btn-primary alarm-log-btn" onclick="document.getElementById('alarm-log-download').disabled = false;">Generate Log</button>

一旦alarm-log-download被点击，这将启用alarm-log-submit按钮。

更进一步，jquery有一个方便的函数when()。它将在指定的事件之后执行所述命令。例如，

$.when($('#alarm-log-submit')).done(
    document.getElementById("alarm-log-download").disabled = false;
);

参考：

http://www.w3schools.com/jsref/prop_select_disabled.asp

https://api.jquery.com/jquery.when/

Answer 3

我不知道如何将文件保存在本地磁盘上，但是当成功保存此文件时，您必须找到一种方法来接收返回。然后启用下载按钮。

假设你使用的是这样的东西：

<SCRIPT LANGUAGE="JavaScript">
 function WriteToFile(passForm) {

    set fso = CreateObject("Scripting.FileSystemObject");  
    set s = fso.CreateTextFile("C:\test.txt", True);
    s.writeline("HI");
    s.writeline("Bye");
    s.writeline("-----------------------------");
    s.Close();
    document.getElementById("alarm-log-download").disabled = false;
 }
  </SCRIPT>

Answer 4

我不太清楚如何生成日志文件。如果您在服务器端生成日志文件。要在生成文件后启用下载按钮，可以通过设置计时器来检查服务器上是否存在文件，或者如果服务器上没有实际的物理路径，则可以使用变量来指示文件是否已生成并定期发送检查请求（AJAX）。

在某种情况下启用HTML按钮

4 个答案: