如何从$（document）.ready（）运行javascript函数

我正在使用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”未显示。

来源

2012-08-11 You Kuper

你肯定传递一个SQL查询以获得？我假设这是一个内部网，而不是互联网网站... 无论如何，当我遇到这个bug的响应是好的，但JSON不是，检查服务器回复什么反应 – 2012-08-11 18:31:23

@Benjamin Gruenbaum：警报（数据）放在函数createChartControl中返回'2012-08-10'，这是正确的输出。 – 2012-08-11 18:36:16

你确定，你从updateList得到的响应是JSON对象吗？

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

如果您不反应JSON对象，请使用$ .get（）方法。请注意，不要使用'updateList.php？query ='+'DROP DATABASE（）'尝试一些MVC逻辑。

来源

2012-08-11 18:28:07

谢谢。但是，我认为这不是json问题，因为此代码（Variant 1）可以与dhtmlxGantt库一起正常工作。另外，当我在函数createChartControl中使用alert（data）时，我可以看到数据的内容，它不是null。 – 2012-08-11 18:33:24

另外，目前我还没有使用这个JSON对象。所以，应该有另一个问题。事实上，同样的问题是如果我运行$（document）.ready（function（）{}}当然，在这种情况下，我删除函数createChartControl（）中的输入。 – 2012-08-11 18:40:19

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>

来源

2013-02-08 10:30:57 asakura89

如何从$（document）.ready（）运行javascript函数

回答

相关问题