0

I'd like to create a Joomla module, but it requires jquery to operate, the problem is whether Jquery is activated (imported) before is still unknown, import jquery through <script src> may cause conflict with an existing jquery especially if it has a different version, I would like to do something like this:

<script>
if(jquery not exist before)
    {
    import and activate jquery
    }
</script>

the question is how to do that ?

Improve this question
1
  • I strongly advise you to not use jquery. You can do the same and better with JS. What do you need use with jquery that you can't find in javascript?
    – Carlitorweb
    Jan 14 at 19:36

2 Answers 2

Reset to default
2

Let Joomla handle it. In the main module you can add, for Joomla <= 3.9:

JHtml::_('jquery.framework');

or for Joomla 3.10 and 4+, add this at the very start of the file:

defined('_JEXEC') or die;
use Joomla\CMS\HTML\HTMLHelper;
HTMLHelper::_('jquery.framework');

the last line can be further down or inside a function if you want to include it conditionally.

Improve this answer
2
  • What would happen if jquery was activated via <script src> before, won't it conflict with newly activated Jquery via HTMLHelper? , because it is possible that the end user using a template with Jquery activated
    – dhany saguntoro
    Jan 18 at 20:26
  • in that case you would have two jquery instances, a real problem I could only solve by writing the plugin: Too Many Files which searches the markup after it's generated and fixes it. Other products have a similar feature
    – Riccardo Zorn
    Jan 19 at 8:07
0

I tried this, and this work but only if the jquery codes are separated as an External JS, this is my HTML file:

<html>
<head>

<!--script src="https://code.jquery.com/jquery-3.6.1.min.js"></script-->
<script>
if(window.jQuery)
{
    alert("jQuery is Active");
}
else
{
    alert("jQuery not activated before, activate now");
    var script = document.createElement('script');
    script.src = 'https://code.jquery.com/jquery-3.6.1.min.js';
    document.getElementsByTagName('head')[0].appendChild(script);  
    
    var script1 = document.createElement('script');
    script1.src = 'testJS.js';
    document.getElementsByTagName('head')[0].appendChild(script1);  
}


</script>
</head>
<body>

and here is my JS file

$(document).ready(function(){
  alert("jQuery test success");
});

but my problem is the jQuery codes are not always in the external JS file, sometimes the jQuery codes are written within the HTML file itself, this is my way to use jQuery without using external JS:

<html>
<head>

<script>
if(window.jQuery)
{
    alert("jQuery is Active");
}
else
{
    alert("jQuery not activated before, activate now");
    var script = document.createElement('script');
    script.src = 'https://code.jquery.com/jquery-3.6.1.min.js';
    script.onreadystatechange = handler;
    script.onload = handler;
    document.getElementsByTagName('head')[0].appendChild(script);     
}

function handler(){
       console.log('jquery added :)');
       $('p').css('background-color','green');
       alert('handler called');
    }    

</script>
</head>

<body>
<p id="test">my ID test</p>
<p>My TagName test</p>


</body>
</html>

Now another problem arises, the codes above work as long as jQuery codes are written inside the handler() function, but don't work if it is written outside the handler() function, so jQuery here doesn't behave like it usually does, as I know the $(document).ready(function(){}) can be written everywhere and can be split into several parts in different places, how to normalize jQuery behavior here?

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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