在.net中使用ajax切換數據不能使用動態內容

Question

我正在製作一個實時數據門戶，其中必須使用c＃在asp.net中使用Ajax顯示實時數據。

我有一個表和一個包含數據，但以不同方式/不同風格的div。

每次在4秒後加載我的頁面以顯示更新的數據，即table和div都刷新以更新數據。

最初當頁面加載第一次，我已經顯示錶來顯示數據和隱藏div格式的數據，如果我點擊按鈕（切換按鈕）它將以div格式顯示數據並隱藏表格數據。

現在的問題是，當我點擊切換按鈕時，它不會顯示div格式的數據，但它會重新加載整個Java腳本 ，並在每次單擊按鈕時在表格中顯示數據。 我想在表格和div之間切換。

下面我有我的代碼到目前爲止我所做的。 請幫助我做錯了什麼。 謝謝。

注意數據來自db，它是SQL。

<form id="form1" runat="server"> 
    <div id="container"> 
      <table id="liveData"> 
      </table> 
      <div id="div_f" style="display:none;"> 
       <%--<table id="liveData_div"></table>--%> 
      </div> 
    </div> 
    <button>Toggle Data</button> 
</form> 
<script src="Scripts/jquery-2.1.4.min.js"></script> 
<script src="Scripts/jquery-2.1.4.js"></script> 
<script> 
    (function worker() { 
     $.ajax({ 

      type: "POST", 
      url: "Default2.aspx/BindData", 
      contentType: "application/json;charset=utf-8", 
      data: {}, 
      dataType: "json", 
      success: function (data) { 
       //alert("Hello"); 
       $("#liveData").empty(); 
       if (data.d.length > 0) { 
        InDivs(data); 
        $("#liveData").append("<tr><th>Node Id</th><th>Parent</th><th>Voltage</th><th>Humid</th><th>HumTemp</th><th>PrTemp</th><th>Pressure</th><th>Light</th><th>Accel_X</th><th>Accel_Y</th><th>result_time</th></tr>"); 
        for (var i = 0; i < data.d.length; i++) { 
         $("#liveData").append("<tr><td>" + 
         data.d[i].nodeID + "</td><td>" + 
         data.d[i].parent + "</td> <td>" + 
         data.d[i].voltage + "</td><td>" + 
         data.d[i].humid + "</td> <td>" + 
         data.d[i].humtemp + "</td><td>" + 
         data.d[i].prtemp + "</td> <td>" + 
         data.d[i].press + "</td><td>" + 
         data.d[i].light + "</td> <td>" + 
         data.d[i].accel_x + "</td><td>" + 
         data.d[i].accel_y + "</td><td>" + 
         data.d[i].result_time + "</td></tr>"); 
        } 


       } 
       // Nontoggle(); 
      }, 

      error: function (result) { 

       //Handling error 
       alert("error"); 
      }, 
      complete: function() { 
       // Schedule the next request when the current one's complete 
       setTimeout(worker, 4000); 
      } 
     }); 
    })(); 

    function InDivs(data) { 
     $("#div_f").empty(); 
     if (data.d.length > 0) { 
      //$("#liveData").append("<tr><th>Node Id</th><th>Parent</th><th>Voltage</th><th>Humid</th><th>HumTemp</th><th>PrTemp</th><th>Pressure</th><th>Light</th><th>Accel_X</th><th>Accel_Y</th><th>result_time</th></tr>"); 
      for (var i = 0; i < data.d.length; i++) { 
       $("#div_f").append(
       "<table class='LiveData_div'><tr>" + 
       "<td>Node Id</td>" + 
       "<td>" + data.d[i].nodeID + "</td>" + 
       "<td>Parent Id</td>" + 
       "<td>" + data.d[i].parent + "</td>" + 
       "</tr>" + 
       "<tr>" + 
       "<td>Voltage</td>" + 
       "<td>" + data.d[i].voltage + "</td>" + 
       "<td>Humid</td>" + 
       "<td>" + data.d[i].humid + "</td>" + 
       "</tr>" + 
       "<tr>" + 
       "<td>Hum Temp</td>" + 
       "<td>" + data.d[i].humtemp + "</td>" + 
       "<td>Press</td>" + 
       "<td>" + data.d[i].press + "</td>" + 
       "</tr>" + 
       "<tr>" + 
       "<td>Press Temp</td>" + 
       "<td>" + data.d[i].prtemp + "</td>" + 
       "<td>Light</td>" + 
       "<td>" + data.d[i].light + "</td>" + 
       "</tr>" + 
       "<tr>" + 
       "<td>Accel_x</td>" + 
       "<td>" + data.d[i].accel_x + "</td>" + 
       "<td>Accel_y</td>" + 
       "<td>" + data.d[i].accel_y + "</td>" + 
       "</tr>" + 
       "<tr>" + 
       "<td>Time</td>" + 
       "<td>" + data.d[i].result_time + "</td>" + 
       "</tr></table>"); 
      } 
     } 
    } 
    $(function() { 
     $('button').live('click', function() { 
      $('#div_f').toggle(); 
      $('#liveData').toggle(); 
     }); 
    }); 


</script> 

Answer 1

問題

你的頁面重載，因爲button標籤在默認情況下type='submit'，這將刷新頁面。

解決方案

你應該定義你的類型type='button'防止這種行爲，e.g：

<button type='button'>Toggle Data</button> 

希望這有助於。

Answer 2

嘗試添加 「返回false;」在你點擊按鈕的結尾：

$('button').live('click', function() { 
     $('#div_f').toggle(); 
     $('#liveData').toggle(); 
     return false; 
    });