Putting jQuery code within script tags not executing

[Masteries]

There is probably a very simple solution here that I'm not seeing but I'm trying to put jQuery code within <script> tags and it's not executing. It's a simple fadeIn/fadeOut effect. The same code works fine when I put it in product.tpl. The .tpl file where I'm putting this in is in a custom module that hooks into the footer. I also tried using {literal} tags with no result. There are no errors in the console.

 

I made sure the div selectors have the correct names and everything. This is the code:

 

<script type="text/javascript">
$(document).ready(function() {
    $(".outerDiv").hover(function() {
        $(this).children(".innerDiv").fadeIn("fast");
    }, function() {
        $(this).children(".innerDiv").fadeOut("fast");
    });
});
</script> 

 

The .tpl file is located in /modules/customModule/x.tpl. The module has no .js files inside because it does not use Javascript. As I mentioned earlier, this same code when put in product.tpl works fine. Any ideas on why this is happening? Isn't jQuery library loaded as default on the homepage?

Edited August 16, 2017 by Masteries (see edit history)

[Karolukas]

Hello Masteries

 

Did you try to put script between {literal} {/literal} tags? 

[Masteries]

Yeah I said it in my original post.

[Masteries]

I've considered adding Smarty context for "addJS" within the .php file of the module but that's if you want to use a .js file though. Creating one just to add this script seems like a hassle, why exactly isn't it executing within the .tpl file - I'm not sure. I also tried adding jQuery.noConflict and jQuery ready function but nope, still didn't work. Is there some sort of a block for jQuery on the footer? I also checked if jQuery library loads in the homepage and it does.

[bellini13]

Did you confirm that the script is actually being added to the home page footer, by using the "view source" menu option of the browser?

 

Did you check the javascript console of the browser for any javascript errors?

 

You can also use the javascript console of the browser to execute your code to test and see if it works.

[Masteries]

Did you confirm that the script is actually being added to the home page footer, by using the "view source" menu option of the browser?

 

Did you check the javascript console of the browser for any javascript errors?

 

You can also use the javascript console of the browser to execute your code to test and see if it works.

Yeah, it's showing fine in the source. No console errors as I said in my original post. The same code works fine when I put it in product.tpl.

[Masteries]

Did you confirm that the script is actually being added to the home page footer, by using the "view source" menu option of the browser?

 

Did you check the javascript console of the browser for any javascript errors?

 

You can also use the javascript console of the browser to execute your code to test and see if it works.

 

It actually works when I type the code in Console, why isn't it executing through the .tpl file?

[bellini13]

Yeah, it's showing fine in the source. No console errors as I said in my original post. The same code works fine when I put it in product.tpl.

go back and read your own post, you never said there were no console errors.  working on the product page is entirely different than working on the home page...

 

It actually works when I type the code in Console, why isn't it executing through the .tpl file?

 

you have not provided enough information to determine that.  you haven't even provided any real information to prove that the home page source code contains it, or even executing it.  add some console.log statements to your code and watch the browsers console to see if it actually executes

[Masteries]

go back and read your own post, you never said there were no console errors.  working on the product page is entirely different than working on the home page...

 

you have not provided enough information to determine that.  you haven't even provided any real information to prove that the home page source code contains it, or even executing it.  add some console.log statements to your code and watch the browsers console to see if it actually executes

 

Pretty sure I have.

 

There is probably a very simple solution here that I'm not seeing but I'm trying to put jQuery code within <script> tags and it's not executing. It's a simple fadeIn/fadeOut effect. The same code works fine when I put it in product.tpl. The .tpl file where I'm putting this in is in a custom module that hooks into the footer. I also tried using {literal} tags with no result. There are no errors in the console.

 

I made sure the div selectors have the correct names and everything. This is the code:

 

<script type="text/javascript">
$(document).ready(function() {
    $(".outerDiv").hover(function() {
        $(this).children(".innerDiv").fadeIn("fast");
    }, function() {
        $(this).children(".innerDiv").fadeOut("fast");
    });
});
</script> 

 

The .tpl file is located in /modules/customModule/x.tpl. The module has no .js files inside because it does not use Javascript. As I mentioned earlier, this same code when put in product.tpl works fine. Any ideas on why this is happening? Isn't jQuery library loaded as default on the homepage?

 

It's showing in the homepage source code. I always do an inspect element to make sure the change I have made is updated whenever I edit .tpl files. It's there but not doing anything/executing for some reason. For now I solved this by putting the code in a different template that's also in the homepage and gave it more specific div selections and it worked (and yes I already tried giving it more specific div selections prior to this with no results). It seems like there is something wrong with the custom module.

[NemoPS]

What if you try a console.log or alert on hover? So you can see which part is breaking