7

This is a followup of the question How can a module be disabled based on device or viewport size in Joomla 3 to optimize performance for mobile devices?

How can I use com_ajax to load and unload a module? The call can be made using either pure javascript or jquery, and it will be based on viewport size (we are using mediacheck.js for that: https://github.com/sparkbox/mediaCheck).

Depending on where this answer goes, we may even [get our dev to] put a component together to allow this kind of dynamic loading (choose breakpoints, choose what modules to load/unload).

Justification: Responsive/Adaptive (choose your flavor) is essential nowadays, and so is reducing load size for mobile (slow 3G speed if on a good reception area, here in Brazil). If I can use 10~15k of jQuery/Javascript to avoid loading 20~200k of a module (modules can contain images, so, yes, can reach a fairly big size), I'm all for it. Reducing screen clutter is also a must on a good mobile design. We can even argue that this is "mobile first", because we design without the module, then load it as screen size allows.

  • 1
    Very good question. Something I actually want to do myself but not sure on the best approach at the moment. Have you done any research to see if it has already been achieved? – Lodder Apr 28 '14 at 13:21
  • Didn't even know this was possible. Too much to keep up with now days. Good question. – Nestor Ledon Apr 28 '14 at 15:08
5

com_ajax is only really used if the data for the module is supported (JSON based), although it has other features. In some cased the easiest way to "just" load a module, is to create a new template file. This can be done by creating something like "module.php" in the template directory. Then using something like this inside.

<?php
$jinput = JFactory::getApplication()->input;
$module = $jinput->get('module_pos', 'default_value', 'get');
?>
<jdoc:include type="modules" name="<?php echo $module; ?>"/>

This should load just the module in a page, by using a url like index.php?tmpl=module&module_pos=foo in an ajax request you should be able to get "just" the module data. This will load all modules assigned to the position termed by module_pos.

This however has one issue, javascript. Modules add javascript to the head tag through Joomla's API. To combat this you would effectively need to add more to the module.php file to find out what is in the head tag, what is not already in the current page and in effect find and add what is needed. This process would be fairly hard but if you know the modules doing this, you could add more to your ajax call to automatically do this depending on the module.

This will help you to "load" the module, after it loads via ajax just use jquery to add the html to the page where you need to, to "unload" it, just remove it from the dom.

that can be done with jQuery(ROOT_ELEMENT_OF_MODULE).remove(); for removal and jQuery(PARENT_ELEMENT_TO_INSERT_MODULE).html(MODULE_HTML);. Of course there are variations that can be done, but that is the simple explanation.

  • Thank you, it works fine and it’s a simple solution. Can you explain a bit more how you can do this part : "if you know the modules doing this, you could add more to your ajax call to automatically do this depending on the module" ? Actually, i include all the js files manually (i know what files to add) – Sébastien Gicquel Mar 27 '15 at 11:36
  • You need to use something like jQuery('head').first().append('SCRIPT_TAG'); and that should load the JS. It won't work for all though since some might need the onload to fire (although you can try jQuery(document).trigger('readty');) But that also depends on how much JS your site has, triggering the onload twice can cause issues and I am not even sure if that works. – Jordan Ramstad Mar 27 '15 at 16:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.