Why are some custom javascript files working but some are not

Question

I added some custom javascript files to my wordpress page.

I put them in the funcstions.php like this:

  wp_register_script('formfunctions', get_template_directory_uri() . '/js/formfunctions.js', array( 'jquery' ));
  wp_enqueue_script( 'formfunctions' );
  wp_register_script('java1', get_template_directory_uri() . '/js/java1.js', array( 'jquery' ));
  wp_enqueue_script( 'java1' );

So somehow formfunctions.js is working correctly but java1.js is not. There are no errors in the JS files and they both do work on a (non-wordpress) sample page. The chrome inspector tells me that both files are loaded by the browser, does anyone have an idea why java1.js is not working?

Here are the contents of these files:

formfunctions.js

function yesChange(){
  jQuery("#urlh1").show();
  jQuery("#url").show();
}

function noChange(){
  jQuery("#urlh1").hide();
  jQuery("#url").hide();
}

function joyes(divname){
    jQuery(divname).hide();
}

function jono(divname){
  jQuery(divname).show();
}

and java1.js:

var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

jQuery(".next").click(function(){
if(animating) return false;
animating = true;

current_fs = jQuery(this).parent().parent();
next_fs = jQuery(this).parent().parent().next();

//activate next step on progressbar using the index of next_fs
jQuery("#progressbar li").eq(jQuery("fieldset").index(next_fs)).addClass("active");

//show the next fieldset
next_fs.show(); 
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
    step: function(now, mx) {
        //as the opacity of current_fs reduces to 0 - stored in "now"
        //1. scale current_fs down to 80%
        scale = 1 - (1 - now) * 0.2;
        //2. bring next_fs from the right(50%)
        left = (now * 50)+"%";
        //3. increase opacity of next_fs to 1 as it moves in
        opacity = 1 - now;
        current_fs.css({'transform': 'scale('+scale+')'});
        next_fs.css({'left': left, 'opacity': opacity});
    }, 
    duration: 800, 
    complete: function(){
        current_fs.hide();
        animating = false;
    }, 
    //this comes from the custom easing plugin
    easing: 'easeInOutBack'
});
});

jQuery(".previous").click(function(){
if(animating) return false;
animating = true;

current_fs = jQuery(this).parent().parent();
previous_fs = jQuery(this).parent().parent().prev();

//de-activate current step on progressbar
jQuery("#progressbar li").eq(jQuery("fieldset").index(current_fs)).removeClass("active");

//show the previous fieldset
previous_fs.show(); 
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
    step: function(now, mx) {
        //as the opacity of current_fs reduces to 0 - stored in "now"
        //1. scale previous_fs from 80% to 100%
        scale = 0.8 + (1 - now) * 0.2;
        //2. take current_fs to the right(50%) - from 0%
        left = ((1-now) * 50)+"%";
        //3. increase opacity of previous_fs to 1 as it moves in
        opacity = 1 - now;
        current_fs.css({'left': left});
        previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
    }, 
    duration: 800, 
    complete: function(){
        current_fs.hide();
        animating = false;
    }, 
    //this comes from the custom easing plugin
    easing: 'easeInOutBack'
});
});

jQuery(".submit").click(function(){
return false;
})

Are you wrapping the enqueue and register calls in a hook? See here for an example. — Andrew Bartel
– Andrew Bartel, Commented Jan 8, 2015 at 19:59
Do you have a page I can see it in action? Is nothing working from the file or is a specific event listener not firing? — Andrew Bartel
– Andrew Bartel, Commented Jan 8, 2015 at 20:40
Please, post the code in the question and not in external services. It is easier to read and will keep the question relevant for future if the external services stop working. — cybmeta
– cybmeta, Commented Jan 8, 2015 at 20:48

cybmeta · Accepted Answer · 2015-01-08 21:11:57Z

If, as you have ensured, the javascript files are correctly loaded, simply WordPress is not likely to be involved in your problem.

That being said, if, as you also have ensured, the code is correct and there are no errors, I think that the problem can be related with the DOM being not ready. The code from java1.js code depends on DOM, so you must be sure that DOM is ready before you try to execute it. One of the easier and popular ways to do it is to wrap your code in jQuery(document).ready method:

(function($){

    // $ is locally scoped, so you can use it safely
    // Your code that don't depends on DOM can go here

    $(document).ready(function(){

         // Your code that depends on DOM goes here

    });
})(jQuery);

Stack Exchange Network

Why are some custom javascript files working but some are not

1 Answer 1

Your Answer

Hot Network Questions

Why are some custom javascript files working but some are not

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions