current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I want to use (jquery) jqplot in my Joomla (3.3) view file - default.php, pls see code below.

However, when calling this file the frontpage does not show a chart and the console shows the error 'Uncaught typeError: Undefined is not a function' at the line of $(document).ready() function.

I suspect I embed the $(document).ready() function in the wrong way in the default.php file(?), but I don't know how to fix this. Any suggestions?

Joomla default.php view file: 

<?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>
share|improve this question
add comment

1 Answer

up vote 0 down vote accepted

When defining paths to files, you should always start with JUri::root which is the root of your Joomla site. For example:

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

Of course change the path to where ever you have the files located.

On a side note, you can use the following to import your Stylesheet aswell rather that using $document->addStylesheet():

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

As for your jQuery function, after importing the js files correctly as mentioned above, your code should work, however if it doesn't, try running jQuery in noConflict mode by changing this:

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

to this:

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

and once done change you custom script to this which uses jQuery as the alias:

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

Hope this helps

share|improve this answer
    
Hi Lodder, you made my day, thnx! I followed all your suggestions and the frontpages now shows the graph. Still, the console displays the error: "Uncaught SyntaxError: Unexpected token at jquery.jqplot.min.css:1". You understand why? (I never edited the jquery.jqplot.min.css file) –  Joppo Jun 23 at 20:46
    
Hey, glad this solved your issue. The error you're getting is something to do with the plugin itself. I had a look on Google and found this (read the very last comment): getsatisfaction.com/apperyio/topics/… –  Lodder Jun 23 at 21:42
    
With plugin you mean the css file I guess (?) Interesting... –  Joppo Jun 24 at 10:06
    
Sorry, plugin was the wrong use of wording. I meant it's to do with the jqplot library. I'm not too sure about the details of this error as I have never used jqplot –  Lodder Jun 24 at 10:13
    
@Joppo - I've made a small change to the code when importing CSS and JS files using JHtml. Please take a look –  Lodder Jun 25 at 10:22
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.