Jump to content

How to load a javascript file in a module


adrianmak
 Share

Recommended Posts

I'm learning how to write my own module.

To learn how to write a module, one of method is to read modules developed by other people.

Take Module Manager module which is written by @Soma

https://github.com/somatonic/ModulesManager/blob/master/ModulesManager.module

While I read thru the source, I could not find a javascript thing load statement to load the ModuleManager.js

https://github.com/somatonic/ModulesManager/blob/6ddf1f872b17773cff2426e6f196d4d07c6ee709/ModulesManager.module#L173-L175

I could find only these two lines which is output two javascript variables used by ModuleManager.js. It is not to load the ModuleManager.js for this module.

https://github.com/somatonic/ModulesManager/blob/6ddf1f872b17773cff2426e6f196d4d07c6ee709/ModulesManager.module#L173-L175

https://github.com/somatonic/ModulesManager/blob/6ddf1f872b17773cff2426e6f196d4d07c6ee709/ModulesManager.module#L173-L175

 

Anyone could explain how the module load its own ModuleManager.js file ?

 

 

  • Thanks 1
Link to comment
Share on other sites

ModuleManager inherits from the Process class and calls its parent's init method here. Process::init in turn invokes Modules::loadModuleFileAssets. This method looks for .js and .css files in the same location and with the same name as the module it is called for and, if found, adds them to $config->scripts / $config->styles.

Admin themes all have lines like these in their template code to load the contents of the $config->scripts and $config->styles:

	<?php foreach($config->styles as $file) echo "\n\t<link type='text/css' href='$file' rel='stylesheet' />"; ?>

	<?php foreach($config->scripts as $file) echo "\n\t<script type='text/javascript' src='$file'></script>"; ?>

 

  • Like 7
Link to comment
Share on other sites

Another way if you would like to load arbitrary JavaScript file in your module is :

  • Define an array with the files defined in it :
protected $jsfiles = array(
	'js/MyScript.js'
);
  • Then in ready(), write :
foreach ($this->jsfiles as $jsfile) {
	$this->config->scripts->add($this->config->urls->MyModule . $jsfile);
}

 

And, the question "Why my JS file are loaded before Jquery ? Should I call my script in init(), ready() or execute() ?

@ryan answer :

Quote

That's right, it just needs to be moved anywhere after the PW initialization (after init, after ready). JqueryCore is not an autoload module (since its only used by admin) so all the autoload modules init before it does. If your module has an execute() or render() or something like that, that's where you'd want to move your script loader. This is also important for an autoload module because some sites use $config->scripts or $config->styles for the front-end, and you wouldn't want your module loading into that context, because who knows if they are even using jQuery in their site.

 

  • Like 3
Link to comment
Share on other sites

I wrote a few lines of code to practice.

ProcessTest.module

<?php

class ProcessTest extends Process {

    function init() {
        parent::init();
    }

    function ___execute() {

        $this->config->js("demo", "value passed from process module");
        $out = "";
        $out .= "<h2 class='tagline'>Process Test module title</h2>";

        return $out;
    }
}

ProcessTest.js

;
(function($, config) {

    var text = config.demo;

    $("h2.tagline").addClass("color-red");   
    console.log(text);

})(jQuery, config);

ProcessTest.css

.color-red {
    color: #F00;
}

 

I could display the string in console.log passed from the module. But the jquery addClass is not working properly. No class added in the selected element.

Link to comment
Share on other sites

6 hours ago, BitPoet said:

Perhaps the script runs too early. In that case, wrap the code in a document ready handler.

If the code wrapped in a document ready function, how to pass value to a jquery document ready function ?

I checked from internet, there is no way to pass parameter to a jquery document ready function

Link to comment
Share on other sites

Quote

how to pass value to a jquery document ready function ?

Something like this...

// your functions
function doSomething($) {
  // @note: non-self-executing function
  // 'config' is a global PW variable 
  var text = config.demo;
  $("h2.tagline").addClass("color-red");
  console.log(text);
}
// ready
jQuery(document).ready(function ($) {
  doSomething($);// pass jQuery ($) if needed
});

 

Edited by kongondo
  • Like 2
Link to comment
Share on other sites

14 hours ago, adrianmak said:

If the code wrapped in a document ready function, how to pass value to a jquery document ready function ?

why do you need that complicated setup? maybe I missed something here but why not just like this?

$(document).ready(function() {
  var text = ProcessWire.config.demo;
  $("h2.tagline").addClass("color-red");
  console.log(text);
});

 

Link to comment
Share on other sites

9 hours ago, bernhard said:

why do you need that complicated setup? maybe I missed something here but why not just like this?


$(document).ready(function() {
  var text = ProcessWire.config.demo;
  $("h2.tagline").addClass("color-red");
  console.log(text);
});

 

I leaned from @soma ModuleManager process module.
The js script is written like that.

What I key to learn is to pass variable from php to js.

The class might be passed from php

 

The code I wrote is just for learning purpose. Probably make nonsense at all.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...