Uncaught TypeError: undefined is not a function

Question

I am following the example from this site to try and implement a live web chat application. I am very new to javascript to jquery, so I thought I'd just copy the example and learn as I go and add things.

This is the code that I am using:

@{
    ViewBag.Title = "OnlineUsers";
}


<html>
<head>
    <title>Online Users</title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>

</head>
<body>
    <div id="wrapper">
        <div id="upperPanel">
            <div>
                <ul id="messages" itemid="@HttpContext.Current.User.Identity.Name">

                </ul>
            </div>
            <div id="friends">

            </div>
        </div>
        <div id="bottomPanel">
            <textarea rows="2" cols="100" id="chatMessage"></textarea>
            <input id="chatSubmitMessage" type="submit" value="Send" style="margin-left: 10px;" /><br />  
        </div>
    </div>

    <script type="text/javascript">
        $(function () {
            var pusher = new window.Pusher('0b7eeff567653e170094');
            var channel = pusher.subscribe('chat_channel');
            channel.bind('message_received', function (data) {
                $("#messages").
                append('<li>' + data.user + ' ' + data.message + ' ' + data.timestamp + '</li>');
            });

            $('#chatSubmitMessage').bind('click', function () {
                $.post("/", {
                    chatMessage: $('#chatMessage').val(),
                    username: $('#messages').attr('itemid')
                });
            });
        });
    </script>

    </div>    
</body>
</html>

This code gives me the following error in the Chrome debugger:

Uncaught TypeError: undefined is not a function
(anonymous function)
fire jquery-1.8.2.js:974
self.add jquery-1.8.2.js:1018
jQuery.fn.jQuery.ready jquery-1.8.2.js:246
jQuery.fn.jQuery.init jquery-1.8.2.js:174
jQuery jquery-1.8.2.js:44
(anonymous function)
(anonymous function) jquery-1.8.2.js:564
jQuery.extend.globalEval jquery-1.8.2.js:565
(anonymous function) jquery-1.8.2.js:6006
jQuery.extend.each jquery-1.8.2.js:611
jQuery.fn.extend.domManip jquery-1.8.2.js:5991
jQuery.fn.extend.append jquery-1.8.2.js:5764
jQuery.fn.(anonymous function) jquery-1.8.2.js:6186
$.ajax.success jquery.mobile-1.2.0.js:3685
fire jquery-1.8.2.js:974
self.fireWith jquery-1.8.2.js:1082
done jquery-1.8.2.js:7788
callback

I'm assuming the error has something to do with the function being unnamed, any help will be greatly appreciated.

Answer 1

You are not loading jquery, but trying to use it. Add this to your head

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Answer 2

Have you included the Pusher code? Make sure by opening up the web inspector and trying to see if window.Pusher is not actually undefined. If it isn't defined, include Pusher and its dependencies to the head of your file . Let me know if that was your problem. It's hard to tell with what's given in the question.

Uncaught TypeError: undefined is not a function

Question

2 answers

solution1
6 ACCPTED 2012-11-04 08:34:33

solution2
2 2012-11-04 08:59:53

Uncaught TypeError: undefined is not a function

Question

2 answers

solution1 6 ACCPTED 2012-11-04 08:34:33

solution2 2 2012-11-04 08:59:53

solution1
6 ACCPTED 2012-11-04 08:34:33

solution2
2 2012-11-04 08:59:53