Adding module scripts after jquery core?

[Soma]

How?

I'm facing the same problem everytime I want to create a process module with a js. It will automaticly get added which is great, but unfortunately before jquery core. Is there a way say where it should get added? How is the order of them defined anyway?

[Michael Murphy]

Have you tried the ->prepend or ->append commands?

I just noticed them today in the admin templates :

$config->styles->prepend($config->urls->adminTemplates . "styles/main.css"); 
$config->styles->append($config->urls->adminTemplates . "styles/ui.css"); 
$config->scripts->append($config->urls->adminTemplates . "scripts/main.js"); 

[Soma]

Thanks, yes I know that already. But not quite what I was looking for.

Problem is, modules that have a .js with the same name, as the module, will get added automaticly. So no need for -$config->scripts->add() and the like; .How I solve the problem (as I get to this point every time), is to add it manually using in the init or execute function, or using str_replace in hooks to get the desired location. I just thought it's strange it gets added before jquery core.

I'm doing it now with renaming the .js file and using $this->config->scripts->add() in the execute function, which does add it after jquery core.

[ryan]

Soma, I'm not exactly sure why that would be happening, but it sounds like a possible bug in the system. I've not had it happen here before, so wondering how I can duplicate. Is there a specific module that you are using where it always happens?

[apeisa]

Also custom admin template could affect this?

[Soma]

Soma, I'm not exactly sure why that would be happening, but it sounds like a possible bug in the system. I've not had it happen here before, so wondering how I can duplicate. Is there a specific module that you are using where it always happens?

Hmm.. it just a normal process module extends process.

On install I create a custom admin page using the standard admin template and add it to the admin folder. Nothing special here.

I create a JS file with the same name as the module and it get's loaded automatic, just on top of the js scripts as the first. Don't know what could be different from others or special about it.

[ryan]

With your Process module, does it have "'autoload' => true" in the getModuleInfo() function? If so, that could be the problem. I'm guessing that's it? Process modules are designed to load on demand (when requested by a page's 'process' field) rather than automatically, so it's feasible that an autoload Process module could load before JqueryCore. The best bet is not to make autoload Process modules, and instead split off any needed autoload functionality into a sister module. The main function of Process modules is to provide interactivity for some admin function, so you don't want all that interactivity code loading on requests where it's not going to be used. A good example is the new LanguageSupport module in the PW 2.2 dev branch. The main module is an autoload module called LanguageSupport.module. But the interactive functions are split off into two other Process modules: ProcessLanguage.module and ProcessLanguageTranslator.module.

[Soma]

Ryan, the modules is autoload=false I just copied one to start with...

class ProcessDataTable extends Process {

static $columns = array('id','title','path','modified','modified_users_id','actions');

public static function getModuleInfo() {
	return array(
		'title' => 'DataTable',
		'summary' => 'Provides ajax driven data table for pages.',
		'version' => 100,
		'href' => 'http://processwire.com/talk/index.php/topic,637.0.html',
		'permanent' => false,
		'singular' => true, 
		'autoload' => false,
		'permission' => 'page-edit'
	);
}

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

}

[ryan]

Just to confirm, the code snippet you posted is reproducible with it's JS loading before jQueryCore? I will give a try here and get a fix going next week.

In the short term, I'd suggest renaming your JS file, and instead loading it like this:

<?php
public function ___execute() {
    $this->config->scripts->add($this->config->urls->ProcessDataTable . 'your-js-file.js'); 
    // .. then your code here
}

I'm hoping that might provide a temporary fix in your case, but since I don't yet understand why it's loading jQueryCore after yours, I can't say for certain. But I am certain we'll be able to find a fix next week.

[Soma]

Thanks, Ryan. Yes I'm doing it this way already to get it working. I add it through API.

Yes the example getModuleInfo is untouched and there's nothing else, when I try again to have it loaded automaticly it get's added as first script before jquery core with the code posted.

class ProcessDataTable extends Process {

static $columns = array('id','title','path','modified','modified_users_id','actions');

public static function getModuleInfo() {
	return array(
		'title' => 'DataTable',
		'summary' => 'Provides ajax driven data table for pages.',
		'version' => 100,
		'href' => 'http://processwire.com/talk/index.php/topic,637.0.html',
		'permanent' => false,
		'singular' => true, 
		'autoload' => false,
		'permission' => 'page-edit'
	);
}

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

}

public function ___execute() {
	...

[ryan]

I've tried to duplicate here this morning, but still can't. Can you tell me if I'm missing any parts necessary to duplicate? Here's what I did:

Copy the code you pasted to create ProcessDataTable.module, and also created an associated ProcessDataTable.js file with this:

$(document).ready(function() { alert('test'); }); 

Then I put those two files in this directory: /site/modules/ProcessDataTable/

I installed from the Modules menu. Then I went and created this page in the admin: /processwire/test/. I select ProcessDataTable for the 'process' field of that page and save. Now I have a 'test' menu item in my admin top nav. If I click that page, I get the test alert. If I view the source, I see ProcessDataTable.js loading after JqueryCore and JqueryUI, as they are supposed to.

Are there any parts I'm missing? For instance, I'm using the default admin theme. Do I need to install a different admin theme to duplicate? Is it possible there is some other autoload module calling upon ProcessDataTable in your case?

Thanks,

Ryan

[Soma]

There's nothing special, pretty much what you describe. Theme doesn't matter... No other modules...

I attached the module. But it's just rough code, nothing serious yet.

DataTable.zip

[ryan]

Thanks Soma, I tried to install and test this. While I can't get the module itself to work yet (getting some errors) I am seeing the proper load order for it's js file when viewing the 'data tables' page and looking at the source.

I am wondering if this module ever had autoload enabled? The autoload setting in PW's modules table will be according to what it was at the time of installation. So if it was autoload at one time and you changed it, PW might not realize it's no longer autoload.

If you view the modules table in the DB (via PhpMyAdmin) or the like, and locate the ProcessDataTable in there, what does it have for the 'flags' column? It should be a '1'. If it's a '2' or a '3', then it's autoload. If that's the case, try changing it to a '1' manually, or just uninstall and re-install the module from PW admin. Let me know what you find here...

[Soma]

Thanks Ryan, I think this was it. Not sure how this happend, cause I never played with autoload. I think I even reinstalled it. And before attaching it I reinstalled again, but I think I wasn't looking at the code after. Somehow I successfully messed up and after doing it right I didn't look correctly...

Now it works, and gets loaded after jquery core. If you uncomment the scripts add in ___execute, and remove the module js one it should work. I commented them out to test. HF

[ryan]

Looking good Soma! Just made those changed and tested it out. Very cool.

A couple things I found: It reported 0 results for me until I selected another template, and then changed it again to select 'Show All'– then it worked.

In your find() code in the module, you could replace it with this and it would give the same result but be a little faster/more efficient:

$pa = $this->pages->find($selector);
$total = $pa->getTotal();

[Soma]

Coming back with the all time favorite of me, appending scripts.

If I create a new js module, it gets appended before the jquery core scripts at first position. How can I add scripts after, or at certain position?

<?php

class MyJSModule extends ModuleJS {

   public static function getModuleInfo() {
           return array(
           'title' => 'MyJSModule',
           'version' => 1,
           'summary' => 'test',
           'href' => '',
           'autoload' => true
           );
   }

   public function init(){
       parent::init();
   }
   // note ModuleJS automatically loads any JS or CSS files with the same basename as this module

}

And the output is this:

<script type='text/javascript' src='/site/modules/MyJSModule/MyJSModule.js?v=1'></script>
<script type='text/javascript' src='/wire/modules/Jquery/JqueryCore/JqueryCore.js?v=162'></script>
<script type='text/javascript' src='/wire/modules/Jquery/JqueryUI/JqueryUI.js?v=180'></script>
<script type='text/javascript' src='/wire/modules/Process/ProcessPageEdit/ProcessPageEdit.js?v=102'></script>
...

[ryan]

ModuleJS and Process modules aren't meant to be autoload, so I think that's why you are seeing that behavior here. I don't see any problem with making them autoload, except that you'll need to load your JS/CSS separately. So I'd name them something different (maybe put an underscore in front of the filename), and move your script load to your execution rather than initialization.

$this->scripts->add($this->config->urls->modules->MyJSModule . '_MyJSModule.js'); 

[Soma]

Thanks Ryan, that's what I also tried and still get's appended as the first script.

"...and move your script load to your execution rather than initialization."

What? execute? instead of init() ?

[ryan]

What? execute? instead of init() ?

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.