Support » Developing with WordPress » Problem loading jQuery script from custom file in WordPress

Problem loading jQuery script from custom file in WordPress

  • Resolved adinaparaglide

    (@adinaparaglide)


    9 months, 2 weeks 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 9 months, 2 weeks ago by adinaparaglide.
    • This topic was modified 9 months, 2 weeks ago by Jan Dembowski.
    • This topic was modified 9 months, 2 weeks 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)

    9 months, 2 weeks 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/

    adinaparaglide

    (@adinaparaglide)

    9 months, 2 weeks 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)

    9 months, 2 weeks ago

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

    adinaparaglide

    (@adinaparaglide)

    9 months, 2 weeks 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)

    9 months, 2 weeks 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 9 months, 2 weeks ago by Fahim Murshed.
    adinaparaglide

    (@adinaparaglide)

    9 months, 2 weeks 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:)

    Fahim Murshed

    (@fahimmurshed)

    9 months, 2 weeks 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.

    adinaparaglide

    (@adinaparaglide)

    9 months, 2 weeks ago

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

    Fahim Murshed

    (@fahimmurshed)

    9 months, 2 weeks 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)

    9 months, 2 weeks 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' );
    adinaparaglide

    (@adinaparaglide)

    9 months, 2 weeks 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. 🙂

    Moderator bcworkz

    (@bcworkz)

    9 months, 2 weeks 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 🙂

    adinaparaglide

    (@adinaparaglide)

    9 months, 2 weeks 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 😀

    adinaparaglide

    (@adinaparaglide)

    9 months, 2 weeks 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.

Topic Tags

Views