Cannot call javascript function in wordpress

Question

This might be basic, but this issue takes me hours to figure out and I haven't found any solutions for this. I am using Wordpress 3.5 and I have an external javascript file called general.js in this folder: wp-content/themes/[folder_name]/js. In general.js, I write a function called hideError, basically to hide error label that popped out from my textboxes.

(function($) {
function hideErrorLabel(i) {
    //codes for handling label
}
})(jQuery);

I called it like this:

<span class="component-wrapper" onmouseover="hideErrorLabel(0)">
    <input type="text" name="txtName" size="10" />
    <label for="txtName" class="error">All field must be filled.</label>
</span>

I pass a parameter because these textboxes are array. Strangely, it gives me javascript error "hideErrorLabel is not defined". What went wrong? Please help.

Zeta · Accepted Answer · 2013-01-06 14:52:50Z

2

(function($) {
 /* code */
})(jQuery);

will ensure that the /* code */ you provided gets executed after the DOM has been parsed. However, this will prevent hideErrorLabel from being defined when the parser tries to interpet the onmouseover attribute.

In order to fix this you should use modify your event handlers also in the /* code */ section:

(function($) {
function hideErrorLabel(i) {
    //codes for handling label
}

$('.component-wrapper').on('mouseover',hideErrorlabel);
})(jQuery);

answered Jan 6, 2013 at 14:52

Zeta

106k13 gold badges205 silver badges249 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mattias Buelens Over a year ago

Note that even in the fixed example, hideErrorLabel is still restricted to the function scope of the IIFE and not accessible in the global scope. This is a good practice though, as you normally don't want (and need) to leak your local functions to the global scope. On another note, you probably want to bind at DOM ready, which can be accomplished by replacing the outer (function($) { ... })(jQuery); with jQuery(function($) { ... });

Henry Gunawan Over a year ago

Good idea though, but how do we handle the parameter that way?

Zeta Over a year ago

@HenryGunawan: You didn't handle the parameter in your original edit, so I ignored it. Usually you would create a little wrapper: $('.component-wrapper').on('mouseover',function(){hideErrorlabel(0);});. However, I believe that your problem could be solved with CSS, and that's a) much easier and b) works with deactivated JS.

Sanchit · Accepted Answer · 2013-01-06 15:00:22Z

1

Just remove the first and last line of that javascript code. You are hiding your function! Declare it openly in any script tag.

<script type="text/javascript>
function hideErrorLabel(i) {
  //codes for handling label
}
</script>

answered Jan 6, 2013 at 15:00

Sanchit

2,2604 gold badges23 silver badges34 bronze badges

1 Comment

Henry Gunawan Over a year ago

Thanks for your solution. (function($) { })(jQuery); restricts my function to be used only inside it, so I decided to move hideErrorLabel function outside and it works.

Matt Whipple · Accepted Answer · 2013-01-06 15:10:03Z

1

There are a couple reasons this could be happening, the safest answer which is not the simplest would be to move the event binding in to the code. You could also use delegation and you shouldn't need an index if you're just looking to scope the function. If you do need the index you could get the location implicitly or use a dataset value to explicitly provide one through PHP.

It sounds like you'd just need something like:

(function($) {
  $(function() {
    $(document).on('mouseover', '.component-wrapper', function(event) {
      var $wrapper = $(event.currentTarget);
      $wrapper.find('.error').hide();
    });
  });
})(jQuery);

But you could adapt it to call external functions or provide extra logic as needed.

answered Jan 6, 2013 at 15:10

Matt Whipple

7,1541 gold badge26 silver badges35 bronze badges

1 Comment

Mattias Buelens Over a year ago

You could also replace the two outer functions with just jQuery(function($) { /* run at DOM ready */ });

Collectives™ on Stack Overflow

Cannot call javascript function in wordpress

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related