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.

score 2 · Answer 1 · answered Jan 06 '13 at 14:52

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 06 '13 at 14:52

Zeta

103,620
13
194
236

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($) { ... });` – Mattias Buelens Jan 06 '13 at 15:16
Good idea though, but how do we handle the parameter that way? – Henry Gunawan Jan 06 '13 at 15:27
@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. – Zeta Jan 06 '13 at 15:28

score 1 · Accepted Answer · answered Jan 06 '13 at 15:00

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 06 '13 at 15:00

Sanchit

2,240
4
23
34

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. – Henry Gunawan Jan 06 '13 at 15:24

score 1 · Answer 3 · answered Jan 06 '13 at 15:10

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.

You could also replace the two outer functions with just `jQuery(function($) { /* run at DOM ready */ });` — Mattias Buelens, Jan 06 '13 at 15:13

Cannot call javascript function in wordpress

3 Answers3

Linked