Problem loading jQuery script from custom file in WordPress

  • Resolved adinaparaglide

    (@adinaparaglide)


    6 years, 4 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 (with the help of https://developer.ww.wp.xz.cn/reference/functions/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 in elementor, 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:
    http://travelerky.cz/tryingmyfirstjqueryonwp/?preview_id=646&preview_nonce=71889ba01d&preview=true#

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author David Vongries

    (@davidvongries)

    6 years, 4 months ago

    Hi @adinaparaglide,

    please change the code in your child theme’s functions.php to this:

    function wpb_adding_scripts() {
	wp_enqueue_script( 'mujscript', get_stylesheet_directory_uri() . ‘/myscriptos.js’, array( 'jquery' ), '1.0', false);
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts', 20 );

    and place your script file in your child theme’s root folder.

    Your script inside myscriptos.js is missing something. You’re not declaring jQuery.

    Please try this instead:

    (function($) {

	$(document).ready(function(){
		$("#button0").click(function(){
			$("#button1").fadeToggle();
			$("#button2").fadeToggle("slow");
			$("#button3").fadeToggle(3000);
		});
	});

})( jQuery );

    This is untested but should work 🙂

    Please let me know if you have any further questions.

    Best,
    David

    • This reply was modified 6 years, 4 months ago by David Vongries. Reason: Fixed: Quotation Marks
    Thread Starter adinaparaglide

    (@adinaparaglide)

    6 years, 4 months ago

    Thank you for answer and for your help David. I started this problem here https://ww.wp.xz.cn/support/topic/roblem-loading-jquery-script-from-custom-file-in-wordpress/

    And currently I am at: I enequed my custom script file (myscriptos.js) but script itself does not work,and in console it says “Uncaught TypeError: $ is not a function
    at myscriptos.js?ver=1.0:1”

    I tried to change the $dollar signs with different style (with your included) but the error is still the same. (I think it will be something with the versions of Jquery). So I am stuck right now.

    Thread Starter adinaparaglide

    (@adinaparaglide)

    6 years, 4 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 3 replies - 1 through 3 (of 3 total)

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