Enabling an HTML button after a certain condition

Question

I have two HTML buttons as follows:

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

The first button is used to generate a file on the local disk. The second button is used to download the generated file. I disabled the download button initially.

My question: how to enable the download button once the file is created? ( not when the submit button is clicked)

The main challenge is that the file generation might take different times according to how big the processed data is

Below a Javascript snippet

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 side

@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)

EDIT I solved the question below. Thanks for your suggestions and help

Answer 1

Thanks all for your help. Below is the answer:

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

I'm not too sure how you generate the log files. If you generate the log file on your server side. To enable the download button once the file is generated , you can check the file existence on your server by setting a timer or if there is no actual physical path on your server of that file you can use a variable to indicate if the files is generated and send the check request (AJAX)periodically.

Answer 3

for javascript only:

you could set up a event trigger to show the second button after the first button has been clicked. For instance,

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

This will enable the alarm-log-download button once alarm-log-submit has been clicked.

to go one step further, jquery has a handy function when(). it will execute said commands after a specified event. For instance,

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

Reference:

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

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

Answer 4

I don't know how you saving your file on the local disk but you have to find a way to receive a return when this file is successfully saved. Then you enable the download button.

Supposing that you are using something like this:

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