Problem loading jQuery script from custom file in WordPress

Resolved adinaparaglide
(@adinaparaglide)

1 year, 9 months ago
Hello. I have problem to load jquery script from created file (myscriptos.js) to all my pages (to header). First I tried to load my scripts by using wp_enqueue_script to my functions.php file and create new js file (myscriptos.js). Used this lines:
(function wpb_adding_scripts() {
```
wp_register_script(‘mujscript’, get_template_directory_uri() . ‘/myscriptos.js’, array(‘jquery’),’1.0′, false);
wp_enqueue_script(‘mujscript’);
}
add_action( ‘wp_enqueue_scripts’, ‘wpb_adding_scripts’ );
```
Then when I checked in source code on updated site It has appeared.

Then I have pasted this code to the new js file (myscriptos.js):
```
$(document).ready(function(){
$(“#button0”).click(function(){
$(“#button1”).fadeToggle();
$(“#button2”).fadeToggle(“slow”);
$(“#button3”).fadeToggle(3000);
});
});
```
Then I saved it, and created these buttons on the top of this site, this script supposed to do: When I click on Button0(black one) then Button 1,2 and 3 should fade. But nothing is happening and it does not seem the script is loading Could you please somebody help me? Thank you in advance.
For whole desciptions of problem with picture is this link:
[ redundant link removed ]
- This topic was modified 1 year, 9 months ago by adinaparaglide.
- This topic was modified 1 year, 9 months ago by Jan Dembowski.
- This topic was modified 1 year, 9 months ago by bcworkz. Reason: code fixed
The page I need help with: [log in to see the link]

Viewing 14 replies - 1 through 14 (of 14 total)

Fahim Murshed
(@fahimmurshed)

1 year, 9 months ago

Check how wp_enqueue_script works
– https://developer.wordpress.org/themes/basics/including-css-javascript/

– https://developer.wordpress.org/reference/functions/wp_enqueue_script/

Also, if you can ask your question to the theme support forum: https://wordpress.org/support/theme/page-builder-framework/

Thread Starter adinaparaglide
(@adinaparaglide)

1 year, 9 months ago

Thank you for advice I will try to ask there, and thx for the tip, I think I did wp_enqueue_script with the help of the topic you send me. :

Fahim Murshed
(@fahimmurshed)

1 year, 9 months ago

That’s great! You can mark this post “Resolve” if my support is helpful 🙂

Thread Starter adinaparaglide
(@adinaparaglide)

1 year, 9 months ago

I mean I did the wp_enqueue_script before I came here:D But yeah It did not solve my problem but it was helpful I post it in topic you adviced me(for themes). 🙂
Fahim Murshed
(@fahimmurshed)

1 year, 9 months ago
I think you missed something.

Can you please post here your code?

Don’t forget to use this editor code tag

As I knew if you want to add your script, just add like this:

wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/assets/js/bootstrap.min.js', array( 'jquery' ), '20190522', true );

Check this: https://themes.trac.wordpress.org/browser/starter-blog/1.4.6/functions.php:Line# 138

Your file will be load easily without any issue.

Don’t forget to check your JS code too.
- This reply was modified 1 year, 9 months ago by Fahim Murshed.
Thread Starter adinaparaglide
(@adinaparaglide)

1 year, 9 months ago
code for enqueueing script is:
```
function wpb_adding_scripts() {
 wp_register_script('mujscript', get_template_directory_uri() . '/myscriptos.js', array('jquery'),'1.0', false);
 wp_enqueue_script('mujscript');
}
  add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' )
```
I also tried delete the wp_register_script line, like this :
```
function wpb_adding_scripts() {
 
wp_enqueue_script('mujscript', get_template_directory_uri() . '/myscriptos.js', array('jquery'),'1.0', false);
}
  
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );  
```
and code for script on the myscriptos.js file is:
```
$(document).ready(function(){
  $("#button0").click(function(){
    $("#button1").fadeToggle();
    $("#button2").fadeToggle("slow");
    $("#button3").fadeToggle(3000);
  });
});
```
But it does not seem to work and regarding the link you sent,it is not working.
Thank you for helping me:)
- This reply was modified 1 year, 9 months ago by adinaparaglide.
- This reply was modified 1 year, 9 months ago by adinaparaglide.
Fahim Murshed
(@fahimmurshed)

1 year, 9 months ago

Check my first reply and follow those links. If not working then something you missed. I hope a senior person can help you with this.

All the best.

Thread Starter adinaparaglide
(@adinaparaglide)

1 year, 9 months ago

Thanks and the page I am having my tries on http://travelerky.cz/tryingmyfirstjqueryonwp/?preview=true&fbclid=IwAR12x1CO4BRqNjDEXt7Y2pl1qux3hhroU6qIWcCb6QAitjMhewPhstFNuaU

Fahim Murshed
(@fahimmurshed)

1 year, 9 months ago

Did you check your site console error?

Your JS file does not load properly.
It said: Failed to load resource: the server responded with a status of 403 (Forbidden)
Ravi Khadka
(@ravikhadka)

1 year, 9 months ago
please check myscriptos.js. it must be inside your currently active theme folder.

use this code in your functions.php file
```
function your_custom_scripts() {
  wp_enqueue_script( 'myscriptos', get_template_directory_uri() . '/myscriptos.js', array ( 'jquery' ), 1.0, false);
 
}
add_action( 'wp_enqueue_scripts', 'your_custom_scripts' );
```
Thread Starter adinaparaglide
(@adinaparaglide)

1 year, 9 months ago
So this console error brought me to search for what is this console ,how can I use it etc. (very handy tool).Thank you very much for that. So I figured out through certains forums
https://www.hostinger.com/tutorials/what-is-403-forbidden-error-and-how-to-fix-it
that I had to change right to my “myscriptos.js” file. I changed rights to this file (by changing atttributes in TotalCommander through FTP server straight to my server provider of my site from 640 to 644). Fixed that.

And after It gave me this error: “Uncaught TypeError: $ is not a function
at myscriptos.js?ver=1.0:1” so through searching I again figured out that typo of jquery in WordPress has to be slightly different

https://wordpress.stackexchange.com/questions/2895/not-defined-using-jquery-in-wordpress

So I changed my current jqery script to
```
jquery(document).ready(function($){
  $("#button0").click(function(){
    $("#button1").fadeToggle();
    $("#button2").fadeToggle("slow");
    $("#button3").fadeToggle(3000);
  });
});
```
but it gives me the same error so i changed again for
```
jquery(document).ready(function(){
  jquery("#button0").click(function(){
    jquery("#button1").fadeToggle();
    jquery("#button2").fadeToggle("slow");
    jquery("#button3").fadeToggle(3000);
  });
});
```
But still the same. Basically this jquery script I have found here
https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadetoggle

So I am stuck again but we are getting there I feel it. 🙂
- This reply was modified 1 year, 9 months ago by adinaparaglide.
- This reply was modified 1 year, 9 months ago by adinaparaglide.
Moderator bcworkz
(@bcworkz)

1 year, 9 months ago

You must be viewing a cached response. Either of your corrections is appropriate for the $ is not a function error. The latter fix does not even contain a $ function, so the error message has to be stale. Be sure all caches are cleared, both in your browser and any in WP or external server caches. Be sure you actually saved your changes and uploaded to your server at the correct location. Seems silly, but I make silly errors like that sometimes. I’m assuming I’m not the only one 🙂

Thread Starter adinaparaglide
(@adinaparaglide)

1 year, 9 months ago

So I clear the cache from browser, from wordpress (through WP cache plugin), and I even try to clear content of my script file (myscriptos.js) and it still showing the same error. I only did not clear cache of server at least I do not know how? Thank you 🙂 Yes and as a newbie it is a trap next to trap, but it is way of learning to disarm these traps 😀
Thread Starter adinaparaglide
(@adinaparaglide)

1 year, 9 months ago
So It is fixed.:))
Basically what I have done I restart whole process. After deleting current file (my scriptos.js) and deleteing eneque from function.php. So I started over.
1. enequeue my file inside function.php following this code
```
function wpb_adding_scripts() { 
wp_enqueue_script('mujscript',get_template_directory_uri().'/myscript.js',array('jquery'), null, false);
}
 add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts');
```
2.creating my new js.file which I am reffering in enequeue line. myscript.js

3.setting authorization rights to this file. In my case I use total commander and changing attributes of my myscript.js file to 644.

4.using trial jquery code inside the myscript.js
```
jQuery(function($){
  $("#button10").click(function(){
    $("#button1").fadeToggle();
    $("#button2").fadeToggle("slow");
    $("#button3").fadeToggle(3000);
  });
});
```
$ sign in wordpress for jquery can not be as defining jquery. It is just different typo in wordpress

Everything should work right now, if not for future problems for newbies like me , using Developement tools in google chrome(f12) help you analyze problem more efficiently. Thanks everyone for your help. 🙂

Viewing 14 replies - 1 through 14 (of 14 total)

The topic ‘Problem loading jQuery script from custom file in WordPress’ is closed to new replies.

WordPress.org

Problem loading jQuery script from custom file in WordPress

Views