My web template includes HTML and jQuery code for a project I'm working on.
During the $.getJSON call, there can be a delay in loading the data. To inform the user to wait, I added a warning message in a div with the id="warning".
The code properly validates the status dropdown and retrieves the correct data for the table. The table displays correctly as well.
However, when the submit button is clicked, the warning message does not appear, and the table remains visible while the data is loading.
How can I hide the table while the data is loading and display the warning message properly?
<div class="container-fluid">
<form id="search_form">
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
{{ render_field(form.status) }}
</div>
<div class="col-xs-4">
<input type="submit" value="Get Issues" id="submit">
</div>
<div class="col-xs-4">
</div>
</div>
<div class="row">
<div hidden="true" id="warning" class="col-xs-12 center alert alert-warning">
<p>Data is loading, this might take a few seconds</p>
</div>
</div>
<div class="row">
<div id="errors" hidden="true" class="col-xs-12 center alert alert-danger">
</div>
</div>
</div>
</form>
<script>
var table;
$('#submit').click(function(event) {
event.preventDefault();
if (!$('#status').val()) {
$('#errors').html('');
$("<p>Please select a status</p>").appendTo($('#errors'));
$("#errors").show();
$("#table_div").hide();
return;
} else {
$("#errors").hide();
}
$("#warning").show();
//get the data for the table
$.getJSON("/all_issues/status/" + $("#status").val(), function(data) {
table = $('#search_table').dataTable( {
destroy: true,
"data": data,
});
$('#table_div').show();
});
$("#warning").hide();
});