# Can't load Js files on default.ctp

**URL:** <https://discourse.cakephp.org/t/cant-load-js-files-on-default-ctp/5982>\
**Category:** Need Help\
**Created:** [April 24, 2019, 7:24pm UTC](https://discourse.cakephp.org/t/cant-load-js-files-on-default-ctp/5982 "2019-04-24T19:24:42Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![AsDk320](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/asdk320/32/1392_2.png) [@AsDk320](https://discourse.cakephp.org/u/AsDk320)\
**Post date:** [April 24, 2019, 7:24pm UTC](https://discourse.cakephp.org/t/cant-load-js-files-on-default-ctp/5982/1 "2019-04-24T19:24:42Z")

</div>

Hi there, so i’m trying to include a js file on my default.ctp but it’s not working. It works when i include it on my views, but for some reason it doesn’t work with default.ctp. I’m working with apache on Windows  
httpd.conf looks like this:  
DocumentRoot “C:/xampp/htdocs/myapp/webroot”  
\<Directory “C:/xampp/htdocs/OdontoQuiz”\>  
Options Indexes FollowSymLinks Includes ExecCGI  
AllowOverride All  
Require all granted  
  
vhosts:  
\<VirtualHost \*:80\>  
DocumentRoot “C:/xampp/htdocs/myapp/webroot”  
ServerName myapp.localhost  
  
Sorry for my english. Any help is aprecciated.

---

<div class="post-metadata">

**Author:** ![Zuluru](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/zuluru/32/1230_2.png) [@Zuluru](https://discourse.cakephp.org/u/Zuluru)\
**Post date:** [April 24, 2019, 11:43pm UTC](https://discourse.cakephp.org/t/cant-load-js-files-on-default-ctp/5982/2 "2019-04-24T23:43:32Z")

</div>

This isn’t likely to have anything to do with your Apache configuration. What does the code look like where you include the JS file from your view vs your layout?

---

<div class="post-metadata">

**Author:** ![AsDk320](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/asdk320/32/1392_2.png) [@AsDk320](https://discourse.cakephp.org/u/AsDk320)\
**Post date:** [April 25, 2019, 12:17am UTC](https://discourse.cakephp.org/t/cant-load-js-files-on-default-ctp/5982/3 "2019-04-25T00:17:58Z")

</div>

Well its mostly the same. If i use $this-\>Html-\>script() on default.ctp doesnt show on the “view source code” from chrome it. Not the case if i do it on one of my views. For example index.ctp. Oh right, doesnt work on an element neither. The thing is, it only happend with js, the css works perfectly.

---

<div class="post-metadata">

**Author:** ![Zuluru](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/zuluru/32/1230_2.png) [@Zuluru](https://discourse.cakephp.org/u/Zuluru)\
**Post date:** [April 25, 2019, 4:03am UTC](https://discourse.cakephp.org/t/cant-load-js-files-on-default-ctp/5982/4 "2019-04-25T04:03:28Z")

</div>

There are many important details that you have glossed over in your description. The problem is somewhere in what you haven’t shown, so we can only make random guesses, and most won’t bother. Help us help you. Please show the actual code.

---

<div class="post-metadata">

**Author:** ![spadeX](https://avatars.discourse-cdn.com/v4/letter/s/919ad9/32.png) [@spadeX](https://discourse.cakephp.org/u/spadeX)\
**Post date:** [April 25, 2019, 5:23am UTC](https://discourse.cakephp.org/t/cant-load-js-files-on-default-ctp/5982/5 "2019-04-25T05:23:26Z")

</div>

You should follow the cakephp book convention to add your js,css,images files in the webroot folder.  
cakephp easiest way include js,css, image. hope you understand.

well, Post the some code so that you can get right direction to your solution for Problem

---

<div class="post-metadata">

**Author:** ![AsDk320](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/asdk320/32/1392_2.png) [@AsDk320](https://discourse.cakephp.org/u/AsDk320)\
**Post date:** [April 25, 2019, 1:48pm UTC](https://discourse.cakephp.org/t/cant-load-js-files-on-default-ctp/5982/6 "2019-04-25T13:48:34Z")

</div>

Yes, sorry.  
This is default.ctp [https://i.imgur.com/VNsA3Pt.png](https://i.imgur.com/VNsA3Pt.png)  
This is how view source looks like [https://i.imgur.com/2iJP0vs.png](https://i.imgur.com/2iJP0vs.png)  
So i added to my index.ctp doing the same [https://i.imgur.com/e2dFLGJ.png](https://i.imgur.com/e2dFLGJ.png)  
And it’s actually included without problems [https://i.imgur.com/b7uPPPX.png](https://i.imgur.com/b7uPPPX.png)

---

<div class="post-metadata">

**Author:** ![FinlayDaG33k](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/finlaydag33k/32/1049_2.png) [@FinlayDaG33k](https://discourse.cakephp.org/u/FinlayDaG33k)\
**Post date:** [April 25, 2019, 2:17pm UTC](https://discourse.cakephp.org/t/cant-load-js-files-on-default-ctp/5982/7 "2019-04-25T14:17:15Z")

</div>

But is your `index-styles.css` in `webroot/css/index-styles.css`?

---

<div class="post-metadata">

**Author:** ![Zuluru](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/zuluru/32/1230_2.png) [@Zuluru](https://discourse.cakephp.org/u/Zuluru)\
**Post date:** [April 25, 2019, 3:57pm UTC](https://discourse.cakephp.org/t/cant-load-js-files-on-default-ctp/5982/8 "2019-04-25T15:57:38Z")

</div>

Looks to me like `index-styles.css` is in the HTML output in both cases. Have I misunderstood the problem?

---

<div class="post-metadata">

**Author:** ![AsDk320](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/asdk320/32/1392_2.png) [@AsDk320](https://discourse.cakephp.org/u/AsDk320)\
**Post date:** [April 25, 2019, 6:07pm UTC](https://discourse.cakephp.org/t/cant-load-js-files-on-default-ctp/5982/9 "2019-04-25T18:07:15Z")

</div>

My index-styles.css is in webroot/css. But the problem is the js files. In this case, ‘menu’, i used the helper in the exact same way but it doesnt work on default.ctp. I just can’t understand why i can use font,css, images but not the javascript files. The only thing i came up with is some sort of security problem but i didn’t change anything.

---

<div class="post-metadata">

**Author:** ![FinlayDaG33k](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/finlaydag33k/32/1049_2.png) [@FinlayDaG33k](https://discourse.cakephp.org/u/FinlayDaG33k)\
**Post date:** [April 25, 2019, 7:02pm UTC](https://discourse.cakephp.org/t/cant-load-js-files-on-default-ctp/5982/10 "2019-04-25T19:02:55Z")

</div>

Maybe try it like this (in the `default.ctp`):

```auto
<?= $this->Html->script('main'); ?> 

```

note the lack of `[]` when defining it.  
idk if it really matters but it’s worth trying.

I came to this conclusion by looking at the tag where you include `index-styles.css` as it has the `.css` extention specified specifically.  
Of course, if you remove the `[]` from the tag where you include the `index-styles.css` you can remove the `.css` extention there as well 🙂

---

<div class="post-metadata">

**Author:** ![khairul](https://avatars.discourse-cdn.com/v4/letter/k/a88e4f/32.png) [@khairul](https://discourse.cakephp.org/u/khairul)\
**Post date:** [August 12, 2021, 6:11pm UTC](https://discourse.cakephp.org/t/cant-load-js-files-on-default-ctp/5982/11 "2021-08-12T18:11:48Z")

</div>

![16287918786227803675823356184888](https://canada1.discourse-cdn.com/flex029/uploads/cakephp/original/2X/7/7b162059e3ed8bac3e148b587a2bc3b4001479c3.jpeg)

---

<div class="post-metadata">

**Author:** ![KevinPfeifer](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/kevinpfeifer/32/3365_2.png) [@KevinPfeifer](https://discourse.cakephp.org/u/KevinPfeifer)\
**Post date:** [August 12, 2021, 8:21pm UTC](https://discourse.cakephp.org/t/cant-load-js-files-on-default-ctp/5982/12 "2021-08-12T20:21:21Z")

</div>

In your config/app.php you have entries like

```auto
'App' => [
  'cssBaseUrl' => 'css/',
  'jsBaseUrl' => 'js/'
]

```

With that something like

```auto
$this->Html->script('test.js');

```

would generate a script tag containing the URL like [https://yourdomain.com/js/test.js](https://yourdomain.com/js/test.js)

You can also use an array as a parameter, so

```auto
$this->Html->script(['test2.js', 'test3.js']);

```

would generate 2 script tags with a URL like [https://yourdomain.com/js/test2.js](https://yourdomain.com/js/test2.js) and [https://yourdomain.com/js/test3.js](https://yourdomain.com/js/test3.js)