Print
Category: Joomla FAQ
Hits: 8943229

User Rating: 2 / 5

Star ActiveStar ActiveStar InactiveStar InactiveStar Inactive
 
Warning! The article is not actual since system plugin AjaxModuleLoader is available. It's not unpublished for learning purposes.

Give me your blood!Task: Load some modules after full page loaded only. Have possibility to periodically reload a module (i.e. a sport matсh scores).

Be able to use either Mootools or jQuery.

Explanation: A web-site has too many modules what causes it to load slow. It would be preferable to load some secondary modules after main content structure  is loaded.

Limitation: Will not work for some moules which use much JS themselves. At least for mod_jreviews_listings.

Example. One time load.

Example. Reloads periodically. Time interval is set to 60 seconds.

Solution.

  • Generate an ajax loader image at http://ajaxload.info/ and plase it at your web-site to have it here:  /images/ajax-loader.gif
  • Place a file templates/YOURTEMPLATE/mymodule.php with content:
  • Place the following code in the place you want the module(s) to be loaded

    where attribute rel contains module position to be loaded and attribute alt contains module chrome. What module chrome is read here: http://docs.joomla.org/What_is_module_chrome %3F
  • Place the following code in the place you want the module(s) to be loaded. This may be an article, an HTML module, or it may be hard coded to Joomla template:
    • For one time load:
    • For periodail reload with default interval 5 seconds:
    • For periodail reload with custom interval ( here 10 seconds):
      • Where attribute rel contains module position to be loaded and attribute alt contains module chrome. What module chrome is read here: http://docs.joomla.org/What_is_module_chrome %3F. The attribute alt is not required.
      • Class name periodical tell the script to reload the module(s) periodically.
      • The attribute id sets the interval of reload in miliseconds (1000 ms = 1 sec)
  • Add to your template index.php this code:
  • If you use jQuery instead or together with Mootools, then change line $usejQuery = false; to $usejQuery = true; in the code above.

Explanation.

We need to have a link to load some module position without any non-module HTML. The resulting page must be a raw module output, no tags like  ,. Only the module(s) HTML code. Joomla gives us an opportunity to use own templates for such purposes. I got the info from ooffick at http://forum.joomla.org/viewtopic.php?p=1436858#p1436858 .

So, firtsly we must create a file named mymodule.php in our template folder: templates/YOURTEMPLATE/mymodule.php . We can call the file by following link http://your-domain.com/index.php?tmpl=mymodule , or in this web-site case https://gruz.ml/index.php?tmpl=mymodule .

The file contents must be as follows. 

templates/YOURTEMPLATE/mymodule.php:

It's obivous from the code above, that we can pass 2 more parameters via a URL: moduleposition (the position with the modules to be loaded) and modulestyle (module chrome).

So following by the link https://gruz.ml/index.php?tmpl=mymodule we can see modules from the default user1 position. Module chrome is also default,  xhtml. The page code is like this:

As we can see, it's not a full page, but a raw output. If follow to https://gruz.ml/index.php?tmpl=mymodule& ;moduleposition=top&modulestyle=, we can see modules from top position without any chrome to minimize HTML code output. More about module chrome: http://docs.joomla.org/What_is_module_chrome %3F

Such a link we must have to load modules using Ajax without redundant code.

Now we have to prepare the place for out module. So we will use a spinner image generated at  http://ajaxload.info/ and placed to /images/ajax-loader.gif at our web-site. Here it is:

Next place the code in the place where you want to load modules using Ajax:

As we can see, rel contains the module position and alt - module chrome. I used this attributes just for convinience.

And finally the AJAX part. The following code must be placed into the Joomla template after

defined( '_JEXEC' ) or die( 'Restricted access' );

The code is:

Found a typo? Please select it and press Ctrl + Enter.
FaLang translation system by Faboba