JS file is not working

Question

JS for my main page is working..for example, I am using main_file.js for my default loaded page. Which is actually working properly. but I have a search option on my default page which leads to some other .phtml file (named as second..phtml). js used for that .phtml is not working. even I have included it in the .xml file too.

This is how I declare js in .xml file for my default page .phtml

<script src="[CP_MODULE]::js/main_quickorder.js"/>

this how I declare js in .xml file of second .phtml.

<script src="[CP_MODULE]::js/test2.js"/>

first one is working properly but second one is not working.

• Gosu Przmak: It feels like a bit small amount of info, you should post how your components are declared and defined (xml, phtml, js) Considering the amount info you gave it can be anything a typo or you put your code in wrong xml file or you initialized the javascript in an invalid way
• Muhammad Ali: oky...I will try my level best to explain it again
• Arun Kumar: Check in console that file is called or not

Answer 1

This is easy to check than you thought.

1. First, you need to make sure that the JS file is in the page - Meaning your layout get updated, your definition is correct.

So you can search in the page for that file's name (view-source with ctrl-U or search in Element tab)

2. When we're sure the file is in the page, check the console, see if any red error happen? If so, then your JS is running, it just not running properly.

3. When 1 and 2 are done -> we know the file is in the page, there's no error. It's time to enter some code to signal that the JS file is working.

You can use console.log or alert to know that your file is working properly.

4. If none of those steps help, you may loading the file improperly. You need to provide more information about the xml, how you define layout, phtml and js files.

Answer 2

You can also load the JS in the phtml template this way:

<script type="text/javascript">
require([
 '[CP_MODULE]::js/test2.js'
], function() {})
</script>

and make sure the test2.js file is in app/code/CP/MODULE/view/frontend/web/js/test2.js