Actions

User

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...")
 
m (Using AJAX in the frontend)
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="js">
+
<source lang="javascript">
 
/**
 
/**
 
  * @package Joomla.Tutorials
 
  * @package Joomla.Tutorials

Revision as of 06:50, 27 June 2012

Contents

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. 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

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&amp;view=categories&amp;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

For details on how to install the component into your Joomla! site, refer to the information provided in Part 01.

File listing

Download this part

Download example package

Articles in this series

This tutorial is supported by the following versions of Joomla!

Joomla 2.5