Adding javascript to Joomla!

Details
Written by: Stanko Milosev
Category: Extensions
Hits: 5648

If you want to add your javascript to Joomla! header from your component, you can do it like this:

JHTML::_('behavior.mootools');
 $doc =& JFactory::getDocument();
$js = "

function show(options)
{
$('update').innerHTML = '<div align=".'"center"'."><img src="/.'"images/ajax-loader.gif" width="66" height="66"/>'."<p/>Prosim poÄŤakajte</div>'
var ajaxRequest = new Ajax('index.php', {
method: 'get',
 onComplete: function(response) {
  $('update').innerHTML = response;
  }
  });
  ajaxRequest.request(options);
 }

 window.addEvent('domready', function()
 {
 $('form1').addEvent('submit', function(e)
  {  $('update').innerHTML = '<div align=".'"center"'."><img src="/.'"images/ajax-loader.gif" width="66" height="66"/>'."<p/>Prosim poÄŤakajte</div>'
  // Stop the form from submitting
  new Event(e).stop();
  // Update the page
  this.send({ update: $('update') });
  });
  });";
  $doc->addScriptDeclaration($js);

Javascript in component you can add only once, if you try to do it twice, one javascript will be overwriten with another. 

Ajax and custom function.

Details
Written by: Stanko Milosev
Category: Extensions
Hits: 5977

If you want instead of adding event to button in custom form to add ajax to some link (javascript function) here is how you can do it: 

function show(options)
         {
           $('update').innerHTML = '<div align=".'"center"'.">
  <img src="/.'"images/ajax-loader.gif" width="66" height="66"/>'."<p/>Please wait</div>'
           var ajaxRequest = new Ajax('index.php', {
                   method: 'get',
                   onComplete: function(response) {
                       $('update').innerHTML = response;
                   }
               });
               ajaxRequest.request(options);
}

 

Where options are variables which you sent through ajax, for example:

<a onclick="show('option=com_regdavzav&task=result&format=raw&pageNumber=2&naziv=ANGEL')" href="#">2</a>

It seems that mootools which are coming with Joomla! old, so documents about mootools which are in Joomla! you can find here.

 

Component name

Details
Written by: Stanko Milosev
Category: Extensions
Hits: 6624

When creating component, in manifest file, xml, name of the component must be name of file which are you using.

This example will work:

<?xml version="1.0" encoding="utf-8"?>
<install version="1.5.0" type="component">
  <name>Component</name>
  <author>Stanko MiloL?ev</author>
  <version>1.0.0</version>
  <description>Search for taxpayers from database</description>
  <files>
    <filename component="com_regdavzav">Component.php</filename>
  </files>
  <install>
  </install>
  <uninstall>
  </uninstall>
  <administration>
    <menu>Registar davÄTnih zavezancev</menu>
  </administration>
</install>

This example will not work:

<?xml version="1.0" encoding="utf-8"?>
<install version="1.5.0" type="component">
  <name>Component</name>
  <author>Stanko MiloL?ev</author>
  <version>1.0.0</version>
  <description>Search for taxpayers from database</description>
  <files>
    <filename component="com_regdavzav">com_component.php</filename>
  </files>
  <install>
  </install>
  <uninstall>
  </uninstall>
  <administration>
   <menu>Registar davÄTnih zavezancev</menu>
  </administration>
</install>

Because  <filename component="com_regdavzav">com_component.php</filename>, com_component.php is different from Component as it is defined in <name>Component</name>

Ajax finally.

Details
Written by: Stanko Milosev
Category: Extensions
Hits: 8071

After reading few books, digging Internet, finally I found way to use mootools Ajax in Joomla!

Point is in format=raw. If you have any component, if you add format=raw in link, for example

index.php?option=com_ajax&Itemid=60&format=raw you will see only result of component, and that what you need for ajax result.

You can use combination of "standard" ajax and Joomla! but in that case you would loose some of functionality of Joomla!, so better way is to use straight Joomla!

Here is my example, which you can download from here:

 

<?php  // no direct access
  defined( '_JEXEC' ) or die( 'Restricted access' );
  // add mootools
  JHTML::_('behavior.mootools');
  // Check the task parameter and execute appropriate function
  switch( JRequest::getVar( 'task' ))  {
    case 'result':
      searchResult();
      break;
    default:
      search();
    break;
  }
  function searchResult()
  {
    echo JRequest::getVar( 'name' );
  }
  function search()
  {
    $doc =& JFactory::getDocument();
    ?>
			<form method="post" action="<?php
						echo JRoute::_('index.php?option=com_regdavzav&task=result&format=raw'); ?>
					         " id="form1">  
  		  Ajax test: <input type="text" value="" class="flatinput" size="45" name="name" id="name"/>            
        <input type="submit" name="button132" id="button1" value="Submit"/>
		  </form>    
<div id="update"></div>
<?php
		$js = "window.addEvent('domready', function()
						{
							$('form1').addEvent('submit', function(e)
								{
									// Stop the form from submitting
									new Event(e).stop();
									// Update the page
									this.send({ update: $('update') });
								});
						});";
		$doc->addScriptDeclaration($js);
  }
?>

With JHTML::_('behavior.mootools'); you are including mootools framework in your component. $doc =& JFactory::getDocument(); you will use for adding javascript ($js = ...) And in <div id="update"></div> you are actually updating page with informations from Ajax. <div> must be in function search() otherwise you will have problems (to me happened that I always added result, instead of cleaning previous).

I hope that this is all.

  1. Creating components

Page 2 of 3