How to display a Joomla module using javascript?

Question

JavaScript

The task is to display the desired module in the content of the main page, depending on the resolution of the monitor on the client.

The solution of the problem, as I see it, point by point:
In the html code of the template, insert the code

<?php
// если находимся на главной, добавляем стандартными средствами joomla код javascript

  $menuha = & JSite::getMenu();
  if ($menuha->getActive() == $menuha->getDefault()) {
    $document = & JFactory::getDocument();
                $document->addScript('/media/system/js/vin.js');
  }
?> 

in the body of the material in the right place we add a line into which we will insert the module using the script

<p id="vin"> </p>

javascript code (vin.js'):

setTimeout(function(){
  var vin = document.getElementById("vin");
  if (screen.width > 1152) {
  //	vin.innerHTML = "{loadposition Vinaora}"; - к сожалению оба способа 
        //      vin.innerHTML = " {module Vinaora}"; - вставки модуля тут не работают
  } else {
    //	vin.innerHTML = "{loadposition Vinaora2}"; - к сожалению оба способа 
              //        vin.innerHTML = " {module Vinaora2}"; - вставки модуля тут не работают
  }
}, 1200);

I ask you not to kick it painfully, it is clear that it is much more correct to finish the module so that it adapts to different resolutions, but I would like to sort this issue out for myself.

Ajax method is not suitable, due to the fact that in fact you need to call the same module with different settings.
ajax way:

$(document).ready(function() {
$('#vin').load('ПУТЬ_К_ФАЙЛУ/mod_vt_nivo_slider.php');
});

Answer 1

Put the content of the module in a hidden block and after loading the dom with javascript, move the content from the hidden block to the right place.
I don’t know how to do it on mootols, but on jquery it will be something like this:

<div class="hidden-module" id="hm1"><jdoc:include type=”modules” name=”hiddenpos” /> </div>
<!-- html -->
<div class="visible-module" id="vm1"></div>
<script>
$(document).ready(function(){
  $('#vm1').html($('#hm1').html());
});
</script>
<source>

Answer 2

you can ask a question) why exactly js output? it's just not absolutely necessary for your decision

Answer 3

<jdoc:include type='modules' name='module_position' />

and have to write. and you also need to correct "templateDetails.xml" which lies at the root of the template, and add the name of your module there, i.e.

<positions>
  <!--все стандартные позиции шаблона-->
  <position>module_position</position>
</positions>

and then in the admin panel, when choosing a module, this position will appear, and you can display the module in it