Uncaught TypeError-undefined is not a function

Uncaught TypeError: undefined is not a functionUncaught TypeError: undefined is not a function in datepicker

This error takes my 2 hours today I was developing an asp.net application and I never gone through this error before First time i got this error and it shuffles me for two big hours

You will get number of solutions over forums
But sorry to say all these are workaround to get rid-off that error
very less tried to explain why this error came and what is meaning of this error .

Today after spending my 2 hours on this simple error i decided to write something about solution to this error

CAUSE OF ERROR :Uncaught TypeError: undefined is not a function

This error clearly means this is some function that is undefined in the class from which we are accessing it

Like in my case this error was coming at this line :-

$( "#datepicker" ).datepicker();
or
jquery( "#datepicker" ).datepicker();

The main reason behind this error is Jquery Multiple versions calling . If you are using jquery and you have refrenced multiple versions of jquery like Jquery1.10.2 and Jquery 2.0.1 in same file then mostly this error will come at runtime at that page .

The reason behind why it says Undefined TypeError because when multiple versions of jquery are called on same page then we are having two jquery script running and they are like -

1.  Jquery1_10_2
2.  Jquery2_0_1

and we are using only jquery or a '$' dollar symbol there and when browser is unable to find Jquery there then how can it find datepicker function or any other function that you are using at that time . This is main cause of error

Solution of Error : 

Uncaught TypeError: undefined is not a function

So let's talk about solutions to this error . I tried my best at 1:00 AM at Night to find solution to this error and then share it with my blog readers

Now we need to tell browser that we need to use specific version of juery only if we are using multiple versions of jquery on same page

Otherwise simple solution would be to remove the second refrenced version of jquery if possible

so in order to tell broser that we are using specific version of jquery we need to make some changes to our code

Like in my case i am using following code to put jquery datepicker on my website and i am using
jquery1_11_0 version of jquery
So here is my code i have replaced '$' or jquery with jquery1_11_0 and that's it the problem is solved

CODE -
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<script type="text/javascript">
    var jQuery_1_11_0 = $.noConflict(true);
    jQuery_1_11_0(document).ready(function () {
        jQuery_1_11_0('#datepicker').datepicker();

    })
</script>

Share this

Unknown