将javascript代码添加到joomla（查看）default.php文件不起作用答案

【问题标题】：Adding javascript code to joomla (view) default.php file does not work将javascript代码添加到joomla（查看）default.php文件不起作用
【发布时间】：2014-06-23 20:16:49
【问题描述】：

我想在我的 Joomla (3.3) 视图文件中使用 (jquery) jqplot - default.php，请参阅下面的代码。

但是，当调用此文件时，首页不显示图表，并且控制台在 $(document).ready() 函数的行显示错误“Uncaught typeError: Undefined is not a function”。

我怀疑我在 default.php 文件中以错误的方式嵌入了 $(document).ready() 函数（？），但我不知道如何解决这个问题。有什么建议吗？

Joomla default.php 查看文件：

<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
$document = JFactory::getDocument();

//add jqplot libraries
//JHtml::_('jquery.framework); //I tried this before - same console error
JHtml::_('jquery.framework', false);

JHTML::script('jquery.jqplot.min.js');
$document->addStyleSheet('media/system/js/jquery.jqplot.min.css');
JHTML::script('jquery.jqplot.min.css');
JHTML::script('jqplot.barRenderer.min.js');
JHTML::script('jqplot.categoryAxisRenderer.min.js');
JHTML::script('jqplot.pointLabels.min.js');
JHTML::script('jqplot.enhancedLegendRenderer.js');
JHTML::script('weqlib.js');
?>

<head>
<script type="text/javascript">

    $(document).ready(function(){ //here the error console displays an error
        var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]); //copied from example at http://www.jqplot.com/tests/line-charts.php

    }); //$(document).ready
</script>
</head>

<!--<h1><?php echo $this->msg; ?></h1>-->
<body>
  <div id="chart1" style="width:600px; height:250px;"> </div>
</body>

【问题讨论】：

标签： jquery joomla jqplot

【解决方案1】：

在定义文件路径时，您应该始终以 JUri::root 开头，这是您的 Joomla 站点的根目录。例如：

JHtml::_('script',  JUri::root() . 'templates/TEMPLATE_NAME/weqlib.js' );

当然，将路径更改为文件所在的位置。

附带说明，您也可以使用以下内容导入样式表，而不是使用$document->addStylesheet()：

JHtml::_('stylesheet',  JUri::root() . 'media/system/js/jquery.jqplot.min.css' );

至于你的 jQuery 函数，在如上所述正确导入 js 文件后，你的代码应该可以工作，但是如果不能，请尝试通过更改以下方式在 noConflict 模式下运行 jQuery：

JHtml::_('jquery.framework', false);

到这里：

JHtml::_('jquery.framework');

一旦完成，将自定义脚本更改为使用 jQuery 作为别名的脚本：

jQuery(document).ready(function() {
     var plot1 = jQuery.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]);
});

希望对你有帮助

【讨论】：

嗨 Lodder，你成就了我的一天，谢谢！我遵循了您的所有建议，现在首页显示了图表。尽管如此，控制台仍显示错误：“Uncaught SyntaxError: Unexpected token at jquery.jqplot.min.css:1”。你明白为什么吗？（我从未编辑过 jquery.jqplot.min.css 文件）
嘿，很高兴这解决了您的问题。您遇到的错误与插件本身有关。我在谷歌上看了一眼，发现了这个（阅读最后一条评论）：getsatisfaction.com/apperyio/topics/…
对不起，plugin 是错误的用词。我的意思是它与 jqplot 库有关。我不太确定这个错误的细节，因为我从未使用过 jqplot
@Joppo - 在使用JHtml 导入 CSS 和 JS 文件时，我对代码做了一些小的改动。请看一下