Проблемы с кодом JQuery при вызове функций при нажатии кнопки

Question

Новым для node.js и JQuery.

В следующем коде на кнопке щелкните Я запустил задачу, и мы не можем предсказать, когда эта задача завершится при выполнении задачи я получу результат теста и сохраню в БД.

Вот мой HTML код

<table> 
    <tr> 
    <td style="height:10px;"> 
     <div id="testResult" style="padding-left: 120px; display: none; "> 
     <img src="./images/spinner.gif" />Running the test... 
     </div> 
    </td> 
    </tr> 
</table> 
<button id="runBtn">RUN</button> 

в кнопке мыши первым я пишу код для выполнения задачи, и мы не можем предсказать, когда он complete.After хранения данных в БД я должен получать эти данные, его также я должен вызвать функцию нажатия кнопки.

$('#runBtn').click(function() { 
var unitData 
..... 
..... 
// For running the task 
    $.ajax({ 
     type: "post", 
     url: "/runTask", 
     dataType: "json", 
     data: unitData, 
     success: function (value) { 
     console.log("Data saved succesfully"); 
     }, 
    }); 

// For fetching the result of task  

    $('#testResult').html('<img src="./images/spinner.gif" /> Running the test...'); 
     $('#testResult').show(); 
     $.ajax({ 
      url: '/getReport', 
      cache: false 
     }).done(function (html) { 
      $("#testResult").html(htm); 
      $('#edit').removeAttr("disabled"); 
     }).fail(function() { 
      $("#testResult").html("Failed to run the test"); 
      $('#edit').removeAttr("disabled"); 
     });  

    }) 

Что мне нужно на кнопку мыши я должен отобразить спиннера изображение с тест работает ... (мы не можем предсказать, когда будет проверять complte) и после испытаний полных данных, хранящую в БД (она работает нормально) и должны показать, что данные на веб-странице и исчезнуть изображение с прядильщиком.

Теперь, когда я нажимаю кнопку запуска, тест будет запущен и в то же время вызывает '/gerReport' и сохраняет нулевое значение. Мне нужно позвонить /getReport только после того, как результат теста придет и покажет изображение прядильщика с текстовым тестом бежит ..

.

Answer 1

Здесь вы идете:

var $testResultElement = $("#testResult"), 
    onRunTaskCompleted = function() { 
     console.log("Data saved succesfully"); 

     // Task running is complete, so now we can get the report 
     $.ajax({ 
      url: '/getReport', 
      cache: false 
     }).done(function (html) { 
      $testResultElement.html(html); 
     }).fail(function() { 
      $testResultElement.html("Failed to run the test"); 
     }).always(function() { 
      $('#edit').removeAttr("disabled"); 
     }); 
    }; 

$('#runBtn').click(function() { 
    // var unitData 
    // ..... 
    // ..... 
    $testResultElement.html('<img src="./images/spinner.gif" /> Running the test...').show(); 

    // For running the task 
    $.ajax({ 
     type: "post", 
     url: "/runTask", 
     dataType: "json", 
     data: unitData, 
     success: onRunTaskCompleted 
    }); 

Вот логика:

• Когда кнопка нажата, первый отобразить счетчик (работает тест ...)
• Запуск задачи. Обратите внимание, как я изменил свойство успеха вызова ajax . Я сделал отдельную функцию для обработки «успеха», чтобы сделать код немного проще для вас (0).
• onRunTaskCompleted запускается, когда задача выполнена. Он выполнит вызов 'getReport'. Вращатель все еще вращается!
• Когда возвращается вызов getReport, мы устанавливаем возвращаемый html, или сообщение «Не удалось запустить тест». Я добавил всегда-callback , чтобы удалить отключенный атрибут из кнопки редактирования. Это , потому что вы хотели сделать это как при завершении, так и при сбое, и всегда это - идеальный способ, так как он запускается как на завершающем, так и в сбое.

Answer 2

Вы можете использовать свой код, когда сохранить запись данных успешно что-то подобное

$('#runBtn').click(function() { 
var unitData 
..... 
..... 
// For running the task 
    $.ajax({ 
     type: "post", 
     url: "/runTask", 
     dataType: "json", 
     data: unitData, 
     success: function (value) { 
     console.log("Data saved succesfully"); 

// For fetching the result of task 
     $('#testResult').html('<img src="./images/spinner.gif" /> Running the test...'); 
     $('#testResult').show(); 
     $.ajax({ 
     url: '/getReport', 
     cache: false 
     }).done(function (html) { 
     $("#testResult").html(htm); 
     $('#edit').removeAttr("disabled"); 
     }).fail(function() { 
     $("#testResult").html("Failed to run the test"); 
     $('#edit').removeAttr("disabled"); 
     }); 


     }, 
    }); 
})