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

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&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[edit]

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

File listing[edit]

Download this part[edit]

Download example package

Articles in this series[edit]

This tutorial is supported by the following versions of Joomla!

Joomla 2.5