外部页面使用jquery load事件加载图形页面时未加载Morris图表

时间:2016-08-01 08:46:08

标签: javascript php jquery html

我想将另一页的DONUT CHART加载到当前页面。 - 当我点击主页按钮我想要显示graph-page.php的图表时,更多的赎罪

注意:当我手动运行Graph_page.php时,它工作正常

Home.php

<input class="button" type="button" />
     <div class="home"></div>

       <script>
        $(document).ready(function(){
         $(".button").click(function(){
         $(".home").load("Graph_page.php", function(responseTxt, statusTxt, xhr){
          if(statusTxt == "success")
           //success alert

           if(statusTxt == "error")
         //error alert
    });

   });

  });
   </script>

Graph_page.php

       <div class="box-body chart-responsive">
   <div class="chart" id="sales-chart" position: relative;"></div>
          </div>

//script DONUT CHART
 <script type="text/javascript">
  $(function () {
    "use strict";      
    var donut = new Morris.Donut({
      element: 'sales-chart',
      resize: true,
      colors: ["#f56954","#00a65a","#3c8dbc"],
      data: [
        {label: "Absent Days", value: 5},
        {label: "Present Days", value: 10}, 
        {label: "Working Days", value: 15}
      ],
      hideHover: 'auto'
    });

  });
</script>

1 个答案:

答案 0 :(得分:0)

这个

的最佳方式
$(".home").load("Graph_page.php", function(responseTxt, statusTxt, xhr){     
var donut = new Morris.Donut({
  element: 'sales-chart',
  resize: true,
  colors: ["#f56954","#00a65a","#3c8dbc"],
  data: [
    {label: "Absent Days", value: 5},
    {label: "Present Days", value: 10}, 
    {label: "Working Days", value: 15}
  ],
  hideHover: 'auto'
});

Morris构建器无法识别最近加载的DOM,因此在加载页面后进行此构建。