How can I use com_ajax to load and unload another module (for Adaptive Design)

Question

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.

Answer 1

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.