Uncaught reference error: Function not defined

Question

I have some simple code for one of my first jquery scripts, I'm trying to call it's function but it keeps saying the function doesn't exist! I have check the spelling and I'm sure I had this working before but I have no idea what's changed.

This is my code: http://jsfiddle.net/spadez/6LLpC/

This is how I'm calling my function:

jQuery(function($){
applyField();
});

Can anyone show me where I went wrong please?

Denys Séguret · Accepted Answer · 2013-06-24T12:21:08.337

5

applyField isn't defined because jsFiddle wraps your code in an onload event handler. So the function is only visible in this event handler.

Choose "no wrap - in <head>" in the left menu :

enter image description here

Alternatively, you could also call your function from this event handler, this would be more coherent.

Note that calling the function isn't enough. If you want your event binding to be effective, change

$(this).on('change', '#apply',function() {

to

$(document.body).on('change', '#apply',function() {

Demonstration

edited Jun 24 '13 at 12:21

answered Jun 24 '13 at 12:14

Denys Séguret

372,613
87
782
758

1

That still doesn't work for me: http://jsfiddle.net/spadez/6LLpC/2/ – Jimmy Jun 24 '13 at 12:16
or keep the function itself inside the `jQuery(function()` wrap.. Something like [**this**](http://jsfiddle.net/6LLpC/4/). – Mr_Green Jun 24 '13 at 12:17
2

@Jimmy It works for me : http://jsfiddle.net/LKJRP/ – Denys Séguret Jun 24 '13 at 12:18
Ok it works but hides all my other fields: http://jsfiddle.net/spadez/LKJRP/1/ – Jimmy Jun 24 '13 at 12:55
I'm not sure what's going on but in chrome it is hiding other fields!? http://jsfiddle.net/spadez/LKJRP/6/embedded/result/ – Jimmy Jun 24 '13 at 12:58
@Jimmy As far as I know, it does what you seem to want. What do you want different ? – Denys Séguret Jun 24 '13 at 13:00
In my updated example I've added in additional input fields such as which aren't being shown, but when I remove the javascript they do show. – Jimmy Jun 24 '13 at 13:04
@Jimmy : Check my updates – Imad Alazani Jun 24 '13 at 13:13
@Jimmy If the problem is that you're hiding too many inputs, give the hidable ones some class and replace $('input') with $('.hidable'). – Denys Séguret Jun 24 '13 at 13:15

MrCode · Answer 2 · 2013-06-24T13:13:00.803

1

After fixing the onload issue, your second problem is this is not a parent of the <select> element, in your function. In order to use that style of .on you need to pass in a parent of the element you're targeting (which can be document).

Change from:

$(this).on('change', '#apply',function() {

To:

$(document).on('change', '#apply',function() {

Also, to prevent hiding all inputs, I suggest using a class instead of selecting $('input'). See fiddle.

Updated fiddle

edited Jun 24 '13 at 13:13

answered Jun 24 '13 at 12:20

MrCode

63,975
10
90
112

Am I literally going insane?! Why do these examples all stop other inputs from displaying - see here: http://jsfiddle.net/spadez/6LLpC/9/ – Jimmy Jun 24 '13 at 13:01
1

@Jimmy see my updated fiddle for a fix. It's because you hide all inputs, instead you can use a class to differentiate them. – MrCode Jun 24 '13 at 13:13

Imad Alazani · Answer 3 · 2013-06-24T13:16:51.580

1

Approach - 1 => Click here for Demo

JQuery

$(document).ready(function(){
applyField();
});

// Apply Fields
function applyField() {
    $(this).on('change', '#apply',function() {
        var selected = $(this).find(':selected').val(),
            elem = $("#"+selected);
        $("input").addClass('hidden');
        elem.removeClass('hidden');
        $(".donthide").show();
    });
    $("#apply").trigger('change');
};

Approach - 2=> Click here for Demo

JQuery

on needed to execute the function after the DOM is ready.. Check demo.

$(document).ready(function () {
    $(this).on('change', '#apply',function() {
        var selected = $(this).find(':selected').val(),
            elem = $("#"+selected);
        $("input").addClass('hidden');
        elem.removeClass('hidden');
        $(".donthide").show();
    });
    $("#apply").trigger('change');
});

edited Jun 24 '13 at 13:16

answered Jun 24 '13 at 12:23

Imad Alazani

6,688
7
36
58

1

Can you explain what you've changed and how it solves the problem? – MrCode Jun 24 '13 at 12:24
Your example also hides other fields, I can't see the file upload one for example in chrome: http://jsfiddle.net/spadez/6LLpC/8/ – Jimmy Jun 24 '13 at 13:00
1

@Jimmy : Please check updates – Imad Alazani Jun 24 '13 at 14:00

Uncaught reference error: Function not defined

3 Answers3

Approach - 1 => Click here for Demo

Approach - 2=> Click here for Demo

Linked

Related