J3.x

J3.x:Developing an MVC Component/Adding AJAX

From Joomla! Documentation

< J3.x:Developing an MVC Component
Revision as of 11:24, 14 February 2018 by Robbiej (talk | contribs) (page skeleton)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Other languages:
Joomla! 
3.x
Tutorial
Developing an MVC Component

Articles in This Series

  1. Introduction
  2. Developing a Basic Component
  3. Adding a View to the Site Part
  4. Adding a Menu Type to the Site Part
  5. Adding a Model to the Site Part
  6. Adding a Variable Request in the Menu Type
  7. Using the Database
  8. Basic Backend
  9. Adding Language Management
  10. Adding Backend Actions
  11. Adding Decorations to the Backend
  12. Adding Verifications
  13. Adding Categories
  14. Adding Configuration
  15. Adding ACL
  16. Adding an Install/Uninstall/Update Script File
  17. Adding a Frontend Form
  18. Adding an Image
  19. Adding a Map
  20. Adding AJAX
  21. Adding an Alias
  22. Using the Language Filter Facility
  23. Adding a Modal
  24. Adding Associations
  25. Adding Checkout
  26. Adding Ordering
  27. Adding Levels
  28. Adding Versioning
  29. Adding Tags
  30. Adding Access
  31. Adding a Batch Process
  32. Adding Cache
  33. Adding a Feed
  34. Adding an Update Server
  35. Adding Custom Fields
  36. Upgrading to Joomla4



This is a multiple-article series of tutorials on how to develop a Model-View-Controller Component for Joomla! VersionJoomla 3.x.

Begin with the Introduction, and navigate the articles in this series by using the navigation button at the bottom or the box to the right (the Articles in this series).



This tutorial is part of the Developing a MVC Component for Joomla! 3.x tutorial. You are encouraged to read the previous parts of the tutorial before reading this.

This step introduces how to use AJAX within a Joomla component.

Functionality

In the previous step we added a map to our site web page. In this step we extend this to provide a "Search Here" facility for the map. On our site page we'll display a "Search Here" button, and when the user clicks this the javascript will make an Ajax call to the server to retrieve those Helloworld records which have latitude and longitude values which fall within the bounds of the map, as it's currently displayed on the page.

Approach

tbd

Packaging the Component

Contents of your code directory. Each file link below takes you to the step in the tutorial which has the latest version of that source code file.

helloworld.xml 

<?xml version="1.0" encoding="utf-8"?>
<extension type="component" version="3.0" method="upgrade">

	<name>COM_HELLOWORLD</name>
	<!-- The following elements are optional and free of formatting constraints -->
	<creationDate>January 2018</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 recorded in the components table -->
	<version>0.0.19</version>
	<!-- The description is optional and defaults to the name -->
	<description>COM_HELLOWORLD_DESCRIPTION</description>

	<!-- Runs on install/uninstall/update; New in 2.5 -->
	<scriptfile>script.php</scriptfile>

	<install> <!-- Runs on install -->
		<sql>
			<file driver="mysql" charset="utf8">sql/install.mysql.utf8.sql</file>
		</sql>
	</install>
	<uninstall> <!-- Runs on uninstall -->
		<sql>
			<file driver="mysql" charset="utf8">sql/uninstall.mysql.utf8.sql</file>
		</sql>
	</uninstall>
	<update> <!-- Runs on update; New since J2.5 -->
		<schemas>
			<schemapath type="mysql">sql/updates/mysql</schemapath>
		</schemas>
	</update>

	<!-- Site Main File Copy Section -->
	<!-- 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>controllers</folder>
		<folder>views</folder>
		<folder>models</folder>
	</files>

        <languages folder="site/language">
		<language tag="en-GB">en-GB/en-GB.com_helloworld.ini</language>
        </languages>

	<media destination="com_helloworld" folder="media">
		<filename>index.html</filename>
		<folder>images</folder>
		<folder>js</folder>
		<folder>css</folder>
	</media>

	<administration>
		<!-- Administration Menu Section -->
		<menu link='index.php?option=com_helloworld' img="../media/com_helloworld/images/tux-16x16.png">COM_HELLOWORLD_MENU</menu>
		<!-- Administration Main File Copy Section -->
		<!-- 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">
			<!-- Admin Main File Copy Section -->
			<filename>index.html</filename>
			<filename>config.xml</filename>
			<filename>helloworld.php</filename>
			<filename>controller.php</filename>
			<filename>access.xml</filename>
			<!-- SQL files section -->
			<folder>sql</folder>
			<!-- tables files section -->
			<folder>tables</folder>
			<!-- models files section -->
			<folder>models</folder>
			<!-- views files section -->
			<folder>views</folder>
			<!-- controllers files section -->
			<folder>controllers</folder>
			<!-- helpers files section -->
			<folder>helpers</folder>
		</files>
		<languages folder="admin/language">
        		<language tag="en-GB">en-GB/en-GB.com_helloworld.ini</language>
                        <language tag="en-GB">en-GB/en-GB.com_helloworld.sys.ini</language>
		</languages>
	</administration>

</extension>


Contributors

Prev: Adding a Map
Next: Using the language filter facility
Retrieved from "https://docs.sandbox.joomla.org/index.php?title=J3.x:Developing_an_MVC_Component/Adding_AJAX&oldid=478227"