Adding javascript resources

[inkredible]

Hello,

I am confused about the documentation regarding Javascript resources and I really want to find out if I am doing something wrong or if the documentation is simply wrong.

 

According to this documentation: 

\IPS\Output::i()->jsFiles = array_merge( \IPS\Output::i()->jsFiles, \IPS\Output::i()->js( 'front_websocket.js', 'botuserpanel', 'front' ) );

My file structure looks like this:

 

However they won't be loaded when I visit the very simple page. Even though CodingJungle showed me an alternative way of adding javascript resources (which actually worked) I would like to know what's up there. The same problem applies to adding CSS files. By the way: Do you recommend adding javascript libraries like this as well?

 

Just in case it's needed, my front controller userpnael.php which is pretty much the default one for the testing purpose:

namespace IPS\botuserpanel\modules\front\userpanel;

/* To prevent PHP errors (extending class does not exist) revealing path */
if ( !defined( '\IPS\SUITE_UNIQUE_KEY' ) )
{
   header( ( isset( $_SERVER['SERVER_PROTOCOL'] ) ? $_SERVER['SERVER_PROTOCOL'] : 'HTTP/1.0' ) . ' 403 Forbidden' );
   exit;
}

/**
 * userpanel
 */
class _userpanel extends \IPS\Dispatcher\Controller
{
   /**
    * Execute
    *
    * @return void
    */
   public function execute()
   {
        \IPS\Output::i()->jsFiles = array_merge( \IPS\Output::i()->jsFiles, \IPS\Output::i()->js( 'front_websocket.js', 'botuserpanel', 'front' ) );
        \IPS\Output::i()->output = \IPS\Theme::i()->getTemplate( 'view', 'botuserpanel', 'front' )->view();
      parent::execute();
   }

   /**
    * ...
    *
    * @return void
    */
   protected function manage()
   {
      // This is the default method if no 'do' parameter is specified
   }
   
   // Create new methods with the same name as the 'do' parameter which should execute it
}

[newbie LAC]

Hello,

Try 

\IPS\Output::i()->jsFiles = array_merge( \IPS\Output::i()->jsFiles, \IPS\Output::i()->js( 'websocket', 'botuserpanel', 'front' ) );

 

[GriefCode]

As you are not using the javascript framwork provided by IPS for your JS code, i suggest strongly to put your JS into the "interface" folder.

I've had a lot issues trying to load my javascript as it did not premanently appeared to be visible. I assum, mostly caused by caching issues (I'm using cloudflare in front, may that causing it). But it was permanently an issue.

As Example:
https://github.com/Grief-Code/IPS-Stats/tree/master/interface
https://github.com/Grief-Code/IPS-Stats/blob/290a20f42ae344c60ed3b1cbd6ae86f1ab2fd89f/modules/front/stats/RunningGames.php#L33-L37

Since I have used this way, i had no longer a single issue.

[inkredible]

7 hours ago, newbie LAC said:

Hello,

Try 

\IPS\Output::i()->jsFiles = array_merge( \IPS\Output::i()->jsFiles, \IPS\Output::i()->js( 'websocket', 'botuserpanel', 'front' ) );

 

That didn't work either,

but when I use my originally posted code the console log says: GET http://devforum.raccoonbot.com/applications/botuserpanel/dev/js/front/front_websocket?v=c489e92eaa 404 (Not Found)

I am not sure if IPS tries to merge all JS files into one JS file (which would be great for performance reasons)?

5 hours ago, GriefCode said:

As you are not using the javascript framwork provided by IPS for your JS code, i suggest strongly to put your JS into the "interface" folder.

I've had a lot issues trying to load my javascript as it did not premanently appeared to be visible. I assum, mostly caused by caching issues (I'm using cloudflare in front, may that causing it). But it was permanently an issue.

As Example:
https://github.com/Grief-Code/IPS-Stats/tree/master/interface
https://github.com/Grief-Code/IPS-Stats/blob/290a20f42ae344c60ed3b1cbd6ae86f1ab2fd89f/modules/front/stats/RunningGames.php#L33-L37

Since I have used this way, i had no longer a single issue.

Thanks for the tip I will take a look at it, but I also want to understand what I am doing wrong even though I have followed the documentation

[GriefCode]

 

55 minutes ago, inkredible said:

Thanks for the tip I will take a look at it, but I also want to understand what I am doing wrong even though I have followed the documentation

That is basically easy, sorry for not going directly into your question.

 

Imagine this is your call:

\IPS\Output::i()->jsFiles = array_merge( \IPS\Output::i()->jsFiles, \IPS\Output::i()->js( 'websocket', 'botuserpanel', 'front' ) );

Considering the Documentation:

Quote

\IPS\Output::i()->jsFiles = array_merge( \IPS\Output::i()->jsFiles, \IPS\Output::i()->js( 'front_mygroup.js', 'app', 'location' ) );

You have a folder position issue.

The location is the folder location within your 'front' folder. It would be this:

• app
  • dev
    • js
      • front
        • location
          • mygroup.js

I colored it a bit to understand it easier.

Also your folder name is 'Front' and not 'front', with a capital letter.

 

So your call should be:

Quote

\IPS\Output::i()->jsFiles = array_merge( \IPS\Output::i()->jsFiles, \IPS\Output::i()->js( 'front_websocket.js', 'botuserpanel', 'location' ) );

You would need to create a folder after the front folder and replace it with 'location'.

Regards

[HeadStand]

All the posts above are almost right, but not quite.

Directory structure MUST be as follows:

dev -> js -> front -> controllers  -> controllername -> file.

Additionally, your JS MUST be named ips.controllername.filename.js.

So for example, if you're trying to load your custom js, it would be

dev -> js -> front -> controllers -> websocket -> ips.websocket.custom.js

The code to call it would be

\IPS\Output::i()->jsFiles = array_merge( \IPS\Output::i()->jsFiles, \IPS\Output::i()->js( 'front_websocket.js', 'botuserpanel', 'front' ) );

You must also make sure that the JS above is actually an IPS JS controller and not a 3rd party script. That means it should have something like

ips.controller.register( 'botuserpanel.front.websocket.custom'

You would also need to load that controller somewhere on the form, either by attaching it to an HTML element with data-controller='botuserpanel.front.websocket.custom' OR by adding it to the global controllers from inside your PHP controller.

\IPS\Output::i()->globalControllers[] = 'botuserpanel.front.websocket.custom';

HOWEVER. If your JS does NOT follow IPS standards, and it is NOT an IPS controller, it does not belong in your dev/js folder at all. Instead it belongs in your app's interface folder, and you would load it with

\IPS\Output::i()->jsFiles = array_merge( \IPS\Output::i()->jsFiles, \IPS\Output::i()->js( 'custom.js', 'botuserpanel', 'interface' ) );

 

[inkredible]

4 hours ago, GriefCode said:

 

That is basically easy, sorry for not going directly into your question.

 

Imagine this is your call:

\IPS\Output::i()->jsFiles = array_merge( \IPS\Output::i()->jsFiles, \IPS\Output::i()->js( 'websocket', 'botuserpanel', 'front' ) );

Considering the Documentation:

You have a folder position issue.

The location is the folder location within your 'front' folder. It would be this:

• app
  • dev
    • js
      • front
        • location
          • mygroup.js

I colored it a bit to understand it easier.

Also your folder name is 'Front' and not 'front', with a capital letter.

 

So your call should be:

You would need to create a folder after the front folder and replace it with 'location'.

Regards

Thanks for your help, I was confused after your post because actually I've got my own directory in my app/dev/js/front/ folder (which was called websocket). However this, didn't work:

\IPS\Output::i()->jsFiles = array_merge( \IPS\Output::i()->jsFiles, \IPS\Output::i()->js( 'front_websocket.js', 'botuserpanel', 'websocket') );

Afterwards I have create the directory "controllers" inside of my front folder, moved the whole websocket folder into the controllers folder and specified controllers as location, then finally it did work. Is that normal?

5 hours ago, HeadStand said:

All the posts above are almost right, but not quite.

Directory structure MUST be as follows:

dev -> js -> front -> controllers  -> controllername -> file.

Additionally, your JS MUST be named ips.controllername.filename.js.

So for example, if you're trying to load your custom js, it would be

dev -> js -> front -> controllers -> websocket -> ips.websocket.custom.js

The code to call it would be

\IPS\Output::i()->jsFiles = array_merge( \IPS\Output::i()->jsFiles, \IPS\Output::i()->js( 'front_websocket.js', 'botuserpanel', 'front' ) );

You must also make sure that the JS above is actually an IPS JS controller and not a 3rd party script. That means it should have something like

ips.controller.register( 'botuserpanel.front.websocket.custom'

You would also need to load that controller somewhere on the form, either by attaching it to an HTML element with data-controller='botuserpanel.front.websocket.custom' OR by adding it to the global controllers from inside your PHP controller.

\IPS\Output::i()->globalControllers[] = 'botuserpanel.front.websocket.custom';

HOWEVER. If your JS does NOT follow IPS standards, and it is NOT an IPS controller, it does not belong in your dev/js folder at all. Instead it belongs in your app's interface folder, and you would load it with

\IPS\Output::i()->jsFiles = array_merge( \IPS\Output::i()->jsFiles, \IPS\Output::i()->js( 'custom.js', 'botuserpanel', 'interface' ) );

 

Thanks for the detailed explanation, now it's clear for me. I will contact IPS and maybe they want to add that to their documentation, it may help others too.