Before I started with Joomla I developed a html page that uses jqplot, and that pages worked/works fine.
Now I want to include jqplot in a custom joomla (3.3) component that I'm developing, but when calling the component (by means of main menu item) no chart is shown.
UPDATE DEFAULT.PHP (JOOMLA) CODE FURTHER TO COMMENT:
<?php
// No direct access to this file
defined('_JEXEC') or die('Restricted access');
$document = JFactory::getDocument();
//add jqplot libraries
JHtml::_('jquery.framework');
$document->addScript(JPATH_ROOT.'/media/system/js/jquery.jqplot.min.js');
$document->addStyleSheet(JPATH_ROOT.'/media/system/js/jquery.jqplot.min.css');
$document->addScript(JPATH_ROOT.'/media/system/js/jqplot.barRenderer.min.js');
$document->addScript(JPATH_ROOT.'/media/system/js/jqplot.categoryAxisRenderer.min.js');
$document->addScript(JPATH_ROOT.'/media/system/js/jqplot.pointLabels.min.js');
$document->addScript(JPATH_ROOT.'/media/system/js/jqplot.enhancedLegendRenderer.js');
$document->addScript(JPATH_ROOT.'/media/system/js/weqlib.js');
?>
<head>
<script type="text/javascript">
jQuery(document).ready(function(){
var plot1 = jQuery.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>-->
<h1>Prosumer Dashboard </h1>
<div id="chart1" style="width:600px; height:250px;"> </div>
I think the way I call the libabries is wrong (I know for sure the jqplot function call is ok, as I also copied this from my old html file).
Any idea what I'm doing wrong and how to fix this?
You should add javascript to the head of the page in the following way...
<?php
$document = JFactory::getDocument();
$document->addScript('/media/system/js/sample.js');
?>
Your script currently will be attempting to load the javascript in relation to the page's URL, not in relation to your component's URL, so it will not be finding them.
Also, Joomla 3 comes with JQuery - load it like this (possibly in your template rather than your component)...
JHtml::_('jquery.framework');
Note that this runs in no conflict mode, so you have to replace any '$' in your jquery scripts with the 'jQuery'. You can also make it run in conflict mode...
JHtml::_('jquery.framework', false);
However, this may cause problems if your site has any other libraries running.
Related
I need to put this line into a Joomla index.php, I've tried different ways but they don´t work.
$(window).load(function(){
$("#header").sticky({ topSpacing: 0 });
});
Block of JavaScript code in Joomla can be declared using JDocument class AddScriptDeclaration method.
<?php
$document = JFactory::getDocument();
$document->addScriptDeclaration('
$(window).load(function(){$("#header").sticky({topSpacing:0});});
');
?>
this is my first time making a component for Joomla 3.
I'm trying to convert a php website to a component.
Almost every view of my php website is built this way:
Header
Sidebar
Navigation bar
Actual content
Footer
Scripts
So basically it looks like this:
A view from php website
<?php require_once('includes/header.php'); ?>
<body>
<div">
<?php require_once('includes/sidebar.php') ?>
<div>
<?php require_once('includes/navbar.php') ?>
</div>
<div>
<!-- Content or something -->
</div>
<?php require_once('includes/footer.php') ?>
</div>
<?php require_once('includes/scripts.php') ?>
<script>
</script>
</body>
</html>
But in Joomla this is not possible. If I try to include or require a php file like above it just doesn't work.
View in component looks like this:
com_component
../views
../tmpl
default.php
view.html.php
../includes
header.php
footer.php
sidebar.php
scripts.php
navbar.php
Default.php is supposed to show a dashboard on the frontend.
This is what I'm trying to do in default.php:
Default.php
<?php include_once('../../includes/header.php') ?>
<body>
<?php include_once('../../includes/sidebar.php') ?>
<?php include_once('../../includes/navbar.php') ?>
<!-- Some content-->
<?php include_once('../../includes/footer.php') ?>
<!-- etc -->
What I've done
I've found some JDocument and JHTML functions which can add stylesheets and javascript to the template. But that is not what I'm looking for.
I used Joomla's addCustomTag function but it only shows a commented php line in the template.
Tried to make a String of it and passed it through a variable.
Questions
Is it possible to include php files in a template (default.php)?
If not, is there any other way to do it?
If yes, is that good practice in Joomla?
Thanks
To include files in the same directory as the given file, you can use:
include __DIR__ . '/../includes/header.php'
If you don't use DIR the current path is related to the main page (index.php in the site root) and not to the layout (default.php).
A more Joomla compatible solution is to put all your "sub-layouts" in the same folder with a conventional naming like this:
com_component/
views/
myview/
view.html.php
tmpl/
default.php
default_header.php
default_footer.php
....
Then you can use in your main layout the following code:
echo $this->loadTemplate('header');
...
echo $this->loadTemplate('footer');
You don't need a component to do any of this. I mean you can
do this but it should only be as an intermediary step since Joomla is designed to make all this easier by having APIs to include modules which is basically what all your pieces are.
You'll notice that in the joomla template file there are places where module positions are loaded. These are things like menus, footers, sidebars etc.
Depending on what they are you should really make each of these subsections a module. In some cases you can probably use existing modules already in Joomla or make a "custom html" module if you are just loading some html. In other cases makin a joomla module is really easy, just a few files, and you can put your php code there, really to start you can put the whole thing in the tmpl/default.php for the module or you can split it between the helper and the layout.
You'll be much happier in the long run if you take advantage of using a CMS rather than fighting it.
Components are only for the "body" area, what you need to do is make a template and then the modules.
I use google charts js library in only one page in my project and I have external and global head and footer. head tags are in head.php file and required js libraries are included in there. Anatomy of my pages are like this:
<?php
require('header.php');
?>
<div>my body elements of this page lie here </div>
<?php
require('footer.php');
?>
I can include google charts library in header.php. It will be loaded in every page, but I need it in only one page. So, I do not want to make the loading progress slow. How can I include that library only if I am loading this particular page? Is it possible? Thanks in advance.
Simply add a variable before you include the header, and check for that variable within header.php
<?php
//page that requires the js
$chartjs = true;
require('header.php');
?>
<div>my body elements of this page lie here </div>
<?php
require('footer.php');
?>
.
<?php
//header.php
if(isset($chartjs) && $chartjs){
//inlcude js file here
}
Alternatively, You could load it conditionally via JavaScript depending on the context of the page, I'll use jQuery here for ease of use with the Ajax side of it, so for example:
Page Body:
<div class="chart"></div>
Header.php
<script>
var $charts = $('.chart');
if ( $charts.length ) {
$.getScript("charts.js", function(){
$charts.plot(); //init.
});
}
</script>
This will delay the loading of the chart however though. Also, for reference how to load without the jQuery library, see Load scripts after page has loaded? for some good references on post-page load scripts.
Reference $.getScript
You have several options. One is what Steve recommended in his answer.
I'd like to use this in chart page:
require('header.php');
?>
<script type="text/javascript" src="chart.js"></script>
<div>my body elements of this page lie here </div>
<?php
require('footer.php');
The other is to check the $_SERVER["REQUEST_URI"], and include only in header, it this is the specified page.
I want to include external js file in my php script. I am following zend framework.Right now I am adding js file in controller's init function like this.
public function init() {
$this->doUserAuthorisation();
parent::init();
$this->view->headScript()->appendFile($this->view->baseUrl().'/js/front_cal/jquery-1.3.2.min.js');
$this->view->headLink()->setStylesheet($this->view->baseUrl().'/styles/front_cal/calendar.css');
}
problem what i am facing is, js file doesnot include.Is this the right way to include js file?
JavaScript (and images, CSS, flash movies, etc) belong to the view layer so configure them there.
For globally included files, add them to your layout, eg
<!-- layout.phtml -->
<head>
<?php echo $this->headScript()->prependFile(
$this->baseUrl('path/to/file.js')) ?>
<?php echo $this->headLink()->prependStylesheet(
$this->baseUrl('path/to/file.css')) ?>
<!-- snip -->
<?php echo $this->inlineScript()->prependFile(
'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js') ?>
</body>
Your view scripts can then add assets to the helpers which are echoed out in the layout. As the layout uses the prepend*() methods, the global files will be displayed first, eg
<?php // views/scripts/index/index.phtml
$this->inlineScript()->appendFile($this->baseUrl('path/to/script.js'));
In above solution the 'path/to/file.js' script will be included in the header twice. There is no need for echo before calling prependFile. Such behaviour can lead to duplicating javascript controls.
<!-- layout.phtml -->
<head>
<?php echo $this->headScript()->prependFile(
$this->baseUrl('path/to/file.js')) // this will echo out the whole prependFile queue
Has anyone managed to integrate HTML5 Boilerplate in the YII PHP Framework (specifically the folder structure and build process)?
Boilerplate recommends using the #import when adding styles to the head.
<style>#import(/example.css);</style>
Yii uses the ClientScript model to add
<link type="text/css" src="/example.css" />
Use the Yii::app()->clientScript Model to register the file. Yii allows you to register script files as needed, per controller or per view. Therefor your http requests can be minimal. I would suggest registering the required scripts/css in the main layout and add other scripts as they are needed with the
Yii::app()->clientScript->registerScriptFile();
Yii is based on the MVC model. The V is for view. The view foldes contain the html elements your model and controller will adjust based on data types. Inside the view folder Yii uses the layout folder to define layouts.
$this->layout = 'main';
That line will look for:
Protected -> views -> layout -> main.php
The layout folder should contain main, _htmlHead, _header and _footer. The renderPartial will be used for render the different layout parts. It's like a php include for HTML. The second param of $this->render or $this->renderPartial is used to pass data to the view. For example nav data:
$this->renderPartial('_footer', array('nav'=>array('/link/'=>'Link Name')));
In the _htmlHead register the needed elements using the Yii::app()->clientScript. If you want to use a different version of jQuery then use the ScriptMap model, don't register jQuery twice. Yii's coreScript, validation and paging are based on jQuery.
$cs = Yii::app()->clientScript;
$cs->registerCssFile('/css/base.css');
$cs->registerScriptFile('/js/base.js', CClientScript::POS_END);
/* Load Script at END of DOM tree: CClientScript::POS_END */
http://www.yiiframework.com/doc/api/1.1/CClientScript
In the past I've used the config.php file in Yii to set an assetsLocaion parameter. If I move my assets it won't break the site.
Yii::app()->clientScript->registerScriptFile(Yii::app()->param->assetsLocation.'/js/example.js');
The basic layout of the boilerplate will be defined in the layout/main.php. Check out the theme documentation: http://www.yiiframework.com/doc/guide/1.1/en/topics.theming
Layout File Might look like this:
<!doctype html>
<?php $this->renderPartial('//layouts/_Htmlhead); ?>
<body>
<div id="container">
<?php $this->renderPartial('//layouts/_header); ?>
<div id="main" role="main">
<?php echo $content; ?>
</div>
<?php $this->renderPartial('//layouts/_footer); ?>
</div>
<?php $this->renderPartial('//layouts/_footerScripts); ?>
</body>
</html>
Check my Yii BoilerPlate and Bootstrap Integration
https://github.com/drumaddict/YiiApp
A simple Yii HTML5 Boilerplate theme is available at https://github.com/neam/yii-html5-boilerplate
There is a very detailed Wiki article by Antonio Ramirez titled:
YiiBoilerplate - Setup a professional project structure in seconds
http://www.yiiframework.com/wiki/374/yiiboilerplate-setup-a-professional-project-structure-in-seconds/
Sources for this setup:
https://github.com/clevertech/YiiBoilerplate
What about
https://github.com/clevertech/YiiBoilerplate
I think they Uses HTML5Bilerplate