I have a div element that looks like this:
<div class="progress" id="progress-bar"></div>
I am using the following JavaScript code along with an ajax call to retrieve some data. The data returned is 0, however, the content is not being added to the div when I place the code within the .done section of the ajax call. It only works when I place the code at the beginning of the JavaScript and then the progress bar appears filled to 45%.
$("#ipaddress_form").submit(function(e) {
var ipjs = $("#input_ipaddress").val();
var hostjs = $("#input_hostname").val();
var commjs = $("#input_comms").val();
$.ajax({
url: "include/handlingJS.inc.php",
type: "POST",
data: {
"ipjs": ipjs,
"hostjs": hostjs,
"commjs": commjs
}
}).done(function(data) {
alert(data);
if(data == 0) {
bar = $('#progress-bar');
bar.html('<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div>');
}
});
});
Am I overlooking something?