按鈕單擊時調用函數時出現JQuery代碼問題

對node.js和Jquery而言是新的。按鈕單擊時調用函數時出現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存儲數據在DB我要取的數據，我們無法預測，它也是我必須調用按鈕點擊功能。

$('#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，並用文本測試顯示微調圖像正在運行..

。

來源

2014-01-17 Sush

在這裏你去：

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 調用的成功屬性的。我做了一個單獨的函數來處理'成功'，以使您的代碼更容易遵循（爲您自己）
onRunTaskCompleted在任務完成時運行。它會打電話給 'getReport'。紡紗機仍在旋轉！
當調用'getReport'返回時，我們設置返回的html，或消息'無法運行測試'。我添加了一個始終回調以從編輯按鈕中刪除禁用的屬性。這是，因爲您希望在完成和失敗時都執行此操作，並且總是是理想方式，因爲它在完成和失敗時都運行。

來源

2014-01-17 10:28:06

您可以使用代碼時保存數據記錄成功的類似的東西

$('#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"); 
     }); 


     }, 
    }); 
})

來源

2014-01-17 10:30:09

按鈕單擊時調用函數時出現JQuery代碼問題

回答

相關問題