javascript function is not working correctly in cakephp 2

Question

I am using cakephp 2.9.9, I want to use a simple jquery function and included in default.ctp, but it is not working as expected. Details are as follows:

1.I have downloaded the JQuery Library jquery-3.2.1.js, my javascript file name is script.js, I kept these two files in /app/webroot/js folder.

2.In my default.ctp file I have added the following lines -

echo $this->Html->script('jquery-3.2.1');
echo $this->Html->script('script');
echo $scripts_for_layout;

3.I want to change style of my navigation menu based on the current active link. My script.js file is as follows -

(function(){

    console.log(1); //this can be seen on console
    $("#nav a").on("click", function(e){
        console.log(2); // this cannot be seen on console
        $("#nav a").removeClass('active');
        $(e.currentTarget).addClass('active');
    });
})();

4.When I open my page, the page calls the script file (as 1 is executed on console) but it is not calling the .on() function of jquery. Any idea why this is happening?

check your browser console and see you have any error there? — Alive to die - Anant, Aug 04 '17 at 05:53
no there is no error displaying on the console - @Alive to Die — Esika, Aug 04 '17 at 06:13

curveball · Answer 1 · 2017-08-04T09:17:07.190

It might be caused by the following:

Check that you add jQuery before the script that uses it. Instead of console.log(1) try to output in the console console.log($) and make sure that Jquery is loaded.
Usually using JQuery we put our code inside ready() function like $(document).ready(function() { // code goes here });
Check that selector #nav a does actually exist on the page. Maybe it should be nav a?
If you use things like async/defer on script tags, make sure that you use defer (it preserves the order of the scripts) or remove it all and load script synchronously.
It is rather silly suggestion but have you actually clicked on links? Because you write "it is not calling the .on() function of jquery". By the way, you do not prevent the default behaviour (at least in the piece of code you shared), so even if everything is ok with Jquery and your code, a new page will be loaded and you will not see the style of the links changed on the current page. You have to use e.preventDefault() inside click handler - notice that in such case you will get your code applied, but a new page will not be loaded by default - e.preventDefault() cancels it. Instead, you have to load new content through AJAX or save the link into a variable and open new page in a new/current tab with JS like document.location.assign = "link-to-a-new-page" later.

It is hard to say more since you shared only tiny portion of your code.

score 0 · Accepted Answer · answered Aug 07 '17 at 04:01

I have found the solution for this problem. Instead of using jquery .on() function, I am changing the css based on the current URL. My code is as follows-

$(document).ready(function(){
var nav = document.getElementById('nav');
var anchor = nav.getElementsByTagName('a');
var current = location.href;
for (var i = 0; i < anchor.length; i++) {
    if(anchor[i].href == current) {
        anchor[i].className = "active";
    }
}

});

javascript function is not working correctly in cakephp 2

2 Answers2