Difference between revisions of "Rvsjoen/tutorial/Developing an MVC Component/Part 16"
From Joomla! Documentation
< User:Rvsjoen | tutorial/Developing an MVC Component
(Created page with "= Using AJAX in the frontend = So moving on, we probably want our interface to become slightly more dynamic, using AJAX requests and dynamically updating the page and stuff. Som...") |
|||
Line 52: | Line 52: | ||
<span id="media/com_helloworld/js/ajax.js"> | <span id="media/com_helloworld/js/ajax.js"> | ||
'''<tt>media/com_helloworld/js/ajax.js</tt>''' | '''<tt>media/com_helloworld/js/ajax.js</tt>''' | ||
− | <source lang=" | + | <source lang="javascript"> |
/** | /** | ||
* @package Joomla.Tutorials | * @package Joomla.Tutorials |
Revision as of 06:50, 27 June 2012
Using AJAX in the frontend[edit]
So moving on, we probably want our interface to become slightly more dynamic, using AJAX requests and dynamically updating the page and stuff. Some would consider it black magic, but in reality it isn't that hard. The first thing we need to do is to load our favorite JavaScript framework, as Mootools comes shipped with the Joomla! core this is what we will use.
With your favorite editor, update the following file
site/views/helloworld/view.html.php
<?php
/**
* @package Joomla.Tutorials
* @subpackage Component
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/
// No direct access to this file
defined('_JEXEC') or die;
jimport('joomla.application.component.view');
class HelloWorldViewHelloWorld extends JView
{
public function display($tpl = null)
{
// Assign data to the view
$this->item = $this->get('item');
// Prepare the document
$this->prepareDocument();
// Display the view
parent::display($tpl);
}
protected function prepareDocument()
{
JHtml::_('behavior.framework');
$doc = JFactory::getDocument();
$doc->addScript(JURI::base(true).'/media/com_helloworld/js/script.js');
}
}
As you can see, we have added a new function prepareDocument() which is a convenience function used to (yeah you guessed it..) prepare the document for rendering. Here we first load the framework by calling JHtml and afterwards we add another script file to our component. This script file we are going to create in a second.
With your favorite editor, update the following file
media/com_helloworld/js/ajax.js
/**
* @package Joomla.Tutorials
* @subpackage Components
* @copyright Copyright (C) 2005 - 2010 Open Source Matters, Inc. All rights reserved.
* @license License GNU General Public License version 2 or later; see LICENSE.txt
*/
window.addEvent('domready', function() {
$('ajax-alert').addEvent('click', function(event) {
// Prevent the page from changing
event.stop();
// Make the ajax call
var req = new Request({
method : 'get',
url : $('ajax-alert').get('href'),
data : {
'do' : '1'
},
onRequest : function() {
alert('Request made. Please wait...');
},
onComplete : function(response) {
alert('Response: ' + response);
}
}).send();
});
});
Installation manifest[edit]
Now all we have to do is update the version number and we're done. We do not need any other changes to the manifest this time.
helloworld.xml
<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="2.5.0" method="upgrade">
<name>COM_HELLOWORLD</name>
<!-- The following elements are optional and free of formatting constraints -->
<creationDate>June 2011</creationDate>
<author>John Doe</author>
<authorEmail>john.doe@example.org</authorEmail>
<authorUrl>http://www.example.org</authorUrl>
<copyright>Copyright Info</copyright>
<license>License Info</license>
<!-- The version string is stored in the components table -->
<version>0.0.16</version>
<!-- The description is optional and defaults to the name -->
<description>COM_HELLOWORLD_DESCRIPTION</description>
<scriptfile>script.php</scriptfile>
<install>
<sql>
<file driver="mysql" charset="utf8">sql/install.mysql.utf8.sql</file>
</sql>
</install>
<uninstall>
<sql>
<file driver="mysql" charset="utf8">sql/uninstall.mysql.utf8.sql</file>
</sql>
</uninstall>
<!-- Note the folder attribute: This attribute describes the folder
to copy FROM in the package to install therefore files copied
in this section are copied from "site/" in the package -->
<files folder="site">
<filename>index.html</filename>
<filename>helloworld.php</filename>
<filename>controller.php</filename>
<folder>views</folder>
<folder>models</folder>
<folder>language</folder>
</files>
<media destination="com_helloworld" folder="media">
<filename>index.html</filename>
<folder>images</folder>
<folder>js</folder>
</media>
<administration>
<menu img="../media/com_helloworld/images/tux-16x16.png">COM_HELLOWORLD_MENU</menu>
<submenu>
<menu view="helloworlds">COM_HELLOWORLD_SUBMENU_MESSAGES</menu>
<menu link="option=com_categories&view=categories&extension=com_helloworld">COM_HELLOWORLD_SUBMENU_CATEGORIES</menu>
</submenu>
<!-- Note the folder attribute: This attribute describes the folder
to copy FROM in the package to install therefore files copied
in this section are copied from "admin/" in the package -->
<files folder="admin">
<filename>index.html</filename>
<filename>access.xml</filename>
<filename>helloworld.php</filename>
<filename>controller.php</filename>
<filename>config.xml</filename>
<folder>sql</folder>
<folder>tables</folder>
<folder>models</folder>
<folder>views</folder>
<folder>language</folder>
<folder>controllers</folder>
<folder>helpers</folder>
</files>
</administration>
</extension>
Testing your component[edit]
For details on how to install the component into your Joomla! site, refer to the information provided in Part 01.
File listing[edit]
- helloworld.xml
- script.php
- site/index.html
- site/helloworld.php
- site/controller.php
- site/views/index.html
- site/views/helloworld/index.html
- site/views/helloworld/view.html.php
- site/views/helloworld/tmpl/index.html
- site/views/helloworld/tmpl/default.php
- site/views/helloworld/tmpl/default.xml
- site/models/index.html
- site/models/helloworld.php
- site/language/index.html
- site/language/en-GB/index.html
- site/language/en-GB/en-GB.com_helloworld.ini
- admin/index.html
- admin/helloworld.php
- admin/controller.php
- admin/config.xml
- admin/helpers/index.html
- admin/helpers/helloworld.php
- admin/controllers/index.html
- admin/controllers/helloworld.php
- admin/controllers/helloworlds.php
- admin/models/index.html
- admin/models/helloworld.php
- admin/models/helloworlds.php
- admin/models/fields/index.html
- admin/models/fields/helloworld.php
- admin/models/forms/index.html
- admin/models/forms/helloworld.xml
- admin/models/rules/index.html
- admin/models/rules/greeting.php
- admin/models/helloworld.php
- admin/views/index.html
- admin/views/helloworld/index.html
- admin/views/helloworld/view.html.php
- admin/views/helloworld/tmpl/index.html
- admin/views/helloworld/tmpl/edit.php
- admin/views/helloworlds/index.html
- admin/views/helloworlds/view.html.php
- admin/views/helloworlds/tmpl/index.html
- admin/views/helloworlds/tmpl/default.php
- admin/views/helloworlds/tmpl/default_head.php
- admin/views/helloworlds/tmpl/default_body.php
- admin/views/helloworlds/tmpl/default_foot.php
- admin/tables/index.html
- admin/tables/helloworld.php
- admin/sql/index.html
- admin/sql/install.mysql.utf8.sql
- admin/sql/uninstall.mysql.utf8.sql
- admin/language/index.html
- admin/language/en-GB/index.html
- admin/language/en-GB/en-GB.com_helloworld.ini
- admin/language/en-GB/en-GB.com_helloworld.sys.ini
- media/index.html
- media/images/index.html
- media/images/tux-16x16.png
- media/images/tux-48x48.png
- media/js/index.html
- media/js/helloworld.js
Download this part[edit]
Articles in this series[edit]
This tutorial is supported by the following versions of Joomla!
- Introduction
- Part 01 - Developing a Basic Component
- Part 02 - Adding a view to the frontend
- Part 03 - Adding a menu item type to the frontend
- Part 04 - Adding a model to the frontend
- Part 05 - Adding options to menu items
- Part 06 - Using a database
- Part 07 - Basic backend
- Part 08 - Adding language translation
- Part 09 - Adding actions to backend
- Part 10 - Adding decorations to the backend
- Part 11 - Adding validation
- Part 12 - Adding categories
- Part 13 - Adding component options
- Part 14 - Adding ACL
- Part 15 - Adding a script file