如何使用動態內容加載html頁面？

我想加載一個使用jquery getJSON（）函數讀取json文件的html頁面。如何使用動態內容加載html頁面？

sample.html

<html> 
<head> 
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script> 
    <script src="http://code.highcharts.com/stock/highstock.js"></script> 
     <script src="http://code.highcharts.com/modules/heatmap.js"></script> 
    <script> 

    $(document).ready(function() { 

    var options = { 
     chart: { 
      renderTo: 'container', 
      type: 'heatmap', 
      zoomType:'x', 
      plotWidth:400, 
      plotHeight:400 
     }, 
      title: { 
      text: '' 
     }, 

     xAxis: { 
      categories: ['AA11230', 'AA11231', 'AA11232', 'AA11233', 'AA11234', 'AA11235'] 
     }, 

     yAxis: { 
      categories: ['AA11230', 'AA11231', 'AA11232', 'AA11233', 'AA11234', 'AA11235'], 
      title: null 
     }, 

     colorAxis: { 
      min: 0, 
      minColor: '#FFFFFF', 
      maxColor: Highcharts.getOptions().colors[0] 
     }, 

     legend: { 
      align: 'right', 
      layout: 'vertical', 
      margin: 0, 
      verticalAlign: 'top', 
      y: 25, 
      symbolHeight: 280 
     }, 
     plotOptions:{ 
        series:{ 
          turboThreshold: 0 
          } 
     }, 
     series: [{}] 
    }; 

    $.getJSON('sample2.json', function(data) { 
     options.series[0].data = data; 
     var chart = new Highcharts.Chart(options); 
    }); 

}); 

    </script> 
</head> 
<body> 
<div id="container" style="min-width: 400px; height: 600px; margin: 0 auto"></div> 
</body> 
</html>

sample2.json

[[1, 2, 1], 
[2, 3, 1], 
[3, 4, 0.9], 
[4, 5, 0.7], 
[5, 6, 0.9], 
[1, 3, 0.1], 
[2, 4, 0.3], 
[3, 5, 0.4], 
[4, 6, 0.8], 
[1, 4, 1], 
[2, 5, 0.9], 
[3, 6, 0.8], 
[1, 5, 0.9], 
[2, 6, 0.6], 
[1, 6, 0.1] 
]

的index.html

 <html> 
     <script> 
     $(function(){ $("#plots-tabs-C").load("sample.html"); });  </script> 
    <body> 
     <div id="plots-tabs" class="plots-tabs" style="padding-top: 10px; padding-bottom: 10px"> 


     <ul id="plots-tabs-header" class="plots-tabs-header"> 
      <li class="plots-tabs-tab"><a href="#plots-tabs-A">PLOT A</a></li> 
      <li class="plots-tabs-tab"><a href="#plots-tabs-B">PLOT B</a></li> 
      <li class="plots-tabs-tab"><a href="#plots-tabs-C">PLOT C</a></li> 
     </ul> 

     <div id="plots-tabs-body" class="plots-tabs-body"> <div id="plots-tabs-A" class="plots-tabs-body-content" style="margin: 0px; padding: 0px;"> </div>  
     <div id="plots-tabs-B" class="plots-tabs-body-content"></div> 
     <div id="plots-tabs-C" class="plots-tabs-body-content"></div> 
    </div> 
    </div> 
    </body> 
    </html>

但在CLI cking PLOT C不自動加載數據（sample2.json）。我該如何解決這個問題？

來源

2015-09-02 Manish

您沒有任何代碼可以顯示當您點擊** PLOT C時會發生什麼情況。 – PeterKA

如果每個選項卡分開，當您在它們之間切換時，您每次都會使新圖表失去活性，或者它如何好像？你可以在jsfiddle.net上設置工作演示嗎？ –

你可以嘗試在點擊事件包裹你的負載電話：

$("#plots-tabs-C").click(function(){ $("#plots-tabs-C").load("sample.html"); });

此外，它看起來就像你有一個額外的 DIV結束標記在您的index.html。

來源

2015-09-02 15:16:08

但它似乎並沒有在我的應用程序中工作。 – Manish

如何使用動態內容加載html頁面？

回答

相關問題