如何從$（document）.ready（）運行javascript函數

Question

我正在使用jsgantt庫在我的網頁上創建甘特圖。問題是以下。

變體1不起作用，而變體2正在起作用。將顯示警報「開始」，而功能createChartControl內不顯示警報「Fin」。所以，我不知道爲什麼變種1不工作（即空白DIV容器）和Firebug不顯示任何錯誤消息。任何幫助，高度讚賞。

變體1：

<script> 
    function createChartControl(htmlDiv) 
    { 

alert("Start"); 

      var g = new JSGantt.GanttChart('g',document.getElementById(htmlDiv), 'hour'); 

      g.setShowRes(1); // Show/Hide Responsible (0/1) 
      g.setShowDur(1); // Show/Hide Duration (0/1) 
      g.setShowComp(1); // Show/Hide % Complete(0/1) 
      g.setCaptionType('Resource'); // Set to Show Caption (None,Caption,Resource,Duration,Complete) 
      g.setFormatArr("hours","minutes") 

      if(g) { 

      // Parameters    (pID, pName,     pStart,  pEnd,  pColor, pLink,   pMile, pRes, pComp, pGroup, pParent, pOpen) 

      // You can also use the XML file parser JSGantt.parseXML('project.xml',g) 

      g.AddTaskItem(new JSGantt.TaskItem(1, 'Add minutes/hours',   '',     '',     'ff0000', 'http://help.com',  0, 'Ilan',  0, 1, 0, 1)); 
      g.AddTaskItem(new JSGantt.TaskItem(11, 'Add support for half days', '5/14/2009 14:00', '5/14/2009 15:30', 'ff00ff', 'http://www.jsgantt.com', 0, 'Ilan', 100, 0, 1, 1)); 
      g.AddTaskItem(new JSGantt.TaskItem(12, 'Add minute view',    '5/14/2009 16:00', '5/14/2009 17:00', '00ff00', '',      0, 'Ilan', 40, 0, 1, 1)); 
      g.AddTaskItem(new JSGantt.TaskItem(13, 'Add hours view',    '5/14/2009 16:00', '5/14/2009 17:00', '00ffff', 'http://www.yahoo.com', 0, 'Ilan', 60, 0, 1, 1)); 
      g.AddTaskItem(new JSGantt.TaskItem(14, 'Add support for format options',    '5/14/2009 18:00', '5/14/2009 19:00', '00ffff', 'http://www.yahoo.com', 0, 'Shlomy', 60, 0, 14, 1)); 


      g.Draw(); 
      g.DrawDependencies(); 

alert("Fin"); 

      } 
      else 
      { 
      alert("not defined"); 
      } 
    } 
    </script> 

    <script> 
    $(document).ready(function() { 
           createChartControl('schedule'); 

    }); 
    </script> 

    <div style="position:relative" class="gantt" id="schedule"></div> 

變2：

<div style="position:relative" class="gantt" id="schedule"></div> 
<script> 
     var g = new JSGantt.GanttChart('g',document.getElementById('schedule'), 'hour'); 

     g.setShowRes(1); // Show/Hide Responsible (0/1) 
     g.setShowDur(1); // Show/Hide Duration (0/1) 
     g.setShowComp(1); // Show/Hide % Complete(0/1) 
     g.setCaptionType('Resource'); // Set to Show Caption (None,Caption,Resource,Duration,Complete) 
     g.setFormatArr("hours","minutes") 

     if(g) { 

     // Parameters    (pID, pName,     pStart,  pEnd,  pColor, pLink,   pMile, pRes, pComp, pGroup, pParent, pOpen) 

     // You can also use the XML file parser JSGantt.parseXML('project.xml',g) 

     g.AddTaskItem(new JSGantt.TaskItem(1, 'Add minutes/hours',   '',     '',     'ff0000', 'http://help.com',  0, 'Ilan',  0, 1, 0, 1)); 
     g.AddTaskItem(new JSGantt.TaskItem(11, 'Add support for half days', '5/14/2009 14:00', '5/14/2009 15:30', 'ff00ff', 'http://www.jsgantt.com', 0, 'Ilan', 100, 0, 1, 1)); 
     g.AddTaskItem(new JSGantt.TaskItem(12, 'Add minute view',    '5/14/2009 16:00', '5/14/2009 17:00', '00ff00', '',      0, 'Ilan', 40, 0, 1, 1)); 
     g.AddTaskItem(new JSGantt.TaskItem(13, 'Add hours view',    '5/14/2009 16:00', '5/14/2009 17:00', '00ffff', 'http://www.yahoo.com', 0, 'Ilan', 60, 0, 1, 1)); 
     g.AddTaskItem(new JSGantt.TaskItem(14, 'Add support for format options',    '5/14/2009 18:00', '5/14/2009 19:00', '00ffff', 'http://www.yahoo.com', 0, 'Shlomy', 60, 0, 14, 1)); 


     g.Draw(); 
     g.DrawDependencies(); 

     } 

     else 

     { 

     alert("not defined"); 

     } 
</script> 

更新1：我應該說變1工作時，我用dhtmlxGantt庫創建圖表在函數createChartControl中。

更新2：我更新了我的示例代碼在變量1中。仍不起作用 - 即警報「開始」顯示，而警報「Fin」未顯示。

Answer 1

你確定，你從updateList得到的響應是JSON對象嗎？

echo json_encode(array('a'=>'b')); 
die(); 

如果您不反應JSON對象，請使用$ .get（）方法。請注意，不要使用'updateList.php？query ='+'DROP DATABASE（）'嘗試一些MVC邏輯。

Answer 2

jsgantt需要全局變量g才能正常工作。將var g更改爲window.g。
所以它看起來像這樣

變體1：

<script> 
    function createChartControl(htmlDiv) 
    { 
     alert("Start"); 

     window.g = new JSGantt.GanttChart('g',document.getElementById(htmlDiv), 'hour'); 

     g.setShowRes(1); // Show/Hide Responsible (0/1) 
     g.setShowDur(1); // Show/Hide Duration (0/1) 
     g.setShowComp(1); // Show/Hide % Complete(0/1) 
     g.setCaptionType('Resource'); // Set to Show Caption (None,Caption,Resource,Duration,Complete) 
     g.setFormatArr("hours","minutes") 

     if(g) { 
      // Parameters (pID, pName, pStart, pEnd, pColor, pLink, pMile, pRes, pComp, pGroup, pParent, pOpen) 
      // You can also use the XML file parser JSGantt.parseXML('project.xml',g) 

      g.AddTaskItem(new JSGantt.TaskItem(1, 'Add minutes/hours', '', '', 'ff0000', 'http://help.com', 0, 'Ilan', 0, 1, 0, 1)); 
      g.AddTaskItem(new JSGantt.TaskItem(11, 'Add support for half days', '5/14/2009 14:00', '5/14/2009 15:30', 'ff00ff', 'http://www.jsgantt.com', 0, 'Ilan', 100, 0, 1, 1)); 
      g.AddTaskItem(new JSGantt.TaskItem(12, 'Add minute view', '5/14/2009 16:00', '5/14/2009 17:00', '00ff00', '', 0, 'Ilan', 40, 0, 1, 1)); 
      g.AddTaskItem(new JSGantt.TaskItem(13, 'Add hours view', '5/14/2009 16:00', '5/14/2009 17:00', '00ffff', 'http://www.yahoo.com', 0, 'Ilan', 60, 0, 1, 1)); 
      g.AddTaskItem(new JSGantt.TaskItem(14, 'Add support for format options', '5/14/2009 18:00', '5/14/2009 19:00', '00ffff', 'http://www.yahoo.com', 0, 'Shlomy', 60, 0, 14, 1)); 

      g.Draw(); 
      g.DrawDependencies(); 

      alert("Fin"); 
     } 
     else { 
      alert("not defined"); 
     } 
    } 
</script> 

<script> 
    $(document).ready(function() { 
     createChartControl('schedule'); 
    }); 
</script> 
<div style="position:relative" class="gantt" id="schedule"></div>