изменить содержание DIV HTML после Ajax функции

Question

проделанной

У меня есть следующий DIV:

<div class="progress" id="progress-bar"></div> 

Следующая Javascript с вызовом AJAX делает возвращение 0 в качестве данных. Однако он не добавляет содержимое html в div, когда я помещаю код в .done часть вызова ajax. Когда я помещаю этот код в начало javascript, индикатор выполнения отображается с 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>'); 
     } 
    }); 
}); 

Есть что-то, что я пропустил?

Answer 1

Если вы получаете данные в окне предупреждения, то ошибка может быть

1. формат, в котором вы получаете данные ответа. Это может быть не целое значение.

2. Это может быть строка с пробелами.

вы можете попробовать data.trim() == '0'

Answer 2

if(parseInt(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>'); 
    } 

Answer 3

Проблема лгал в той части, где я представляемый форму. Я изменил событие отправки формы на событие нажатия кнопки:

$("#loading").on("click", function(e) { 
    // do ajax stuff here 
} 

Однако я не могу объяснить, почему это работает.