Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ReferenceError: function is not defined - JavaScript

I'm trying to create a Javascript chat, with Python on the backend. This is the code I'm using ...

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>UDP Chat</title>
  <!-- including JQuery just to simplify things -->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script type="javascript/text">
    var chat_room_id = undefined;
    var last_received = 0;

    /**
     * Initialize chat:
     * - Set the room id
     * - Generate the html elements (chat box, forms & inputs, etc)
     * - Sync with server
     * @param chat_room_id the id of the chatroom
     * @param html_el_id the id of the html element where the chat html should be placed
     * @return
     */
    function init_chat(chat_id, html_el_id) {
        chat_room_id = chat_id;
        layout_and_bind(html_el_id);
        sync_messages();
    }

    /**
     * Asks the server which was the last message sent to the room, and stores it's id.
     * This is used so that when joining the user does not request the full list of
     * messages, just the ones sent after he logged in.
     * @return
     */
    function sync_messages() {
        $.ajax({
            type: 'POST',
            data: {id:window.chat_room_id},
            url:'/chat/sync/',
            dataType: 'json',
            success: function (json) {
                last_received = json.last_message_id;
            }
        });

        setTimeout("get_messages()", 2000);
    }

    /**
     * Generate the Chat box's HTML and bind the ajax events
     * @param target_div_id the id of the html element where the chat will be placed
     */
    function layout_and_bind(html_el_id) {
            // layout stuff
            var html = '<div id="chat-messages-container">'+
            '<div id="chat-messages"> </div>'+
            '<div id="chat-last"> </div>'+
            '</div>'+
            '<form id="chat-form">'+
            '<input name="message" type="text" class="message" />'+
            '<input type="submit" value="Say"/>'+
            '</form>';

            $("#"+html_el_id).append(html);

            // event stuff
            $("#chat-form").submit( function () {
                var $inputs = $(this).children('input');
                var values = {};

                $inputs.each(function(i,el) {
                    values[el.name] = $(el).val();
                });
                values['chat_room_id'] = window.chat_room_id;

                $.ajax({
                    data: values,
                    dataType: 'json',
                    type: 'post',
                    url: '/chat/send/'
                });
                $('#chat-form .message').val('');
                return false;
        });
    };

    /**
     * Gets the list of messages from the server and appends the messages to the chatbox
     */
    function get_messages() {
        $.ajax({
            type: 'POST',
            data: {id:window.chat_room_id, offset: window.last_received},
            url:'/chat/receive/',
            dataType: 'json',
            success: function (json) {
                var scroll = false;

                // first check if we are at the bottom of the div, if we are, we shall scroll once the content is added
                var $containter = $("#chat-messages-container");
                if ($containter.scrollTop() == $containter.attr("scrollHeight") - $containter.height())
                    scroll = true;

                // add messages
                $.each(json, function(i,m){
                    if (m.type == 's')
                        $('#chat-messages').append('<div class="system">' + replace_emoticons(m.message) + '</div>');
                    else if (m.type == 'm')
                        $('#chat-messages').append('<div class="message"><div class="author">'+m.author+'</div>'+replace_emoticons(m.message) + '</div>');
                    else if (m.type == 'j')
                        $('#chat-messages').append('<div class="join">'+m.author+' has joined</div>');
                    else if (m.type == 'l')
                        $('#chat-messages').append('<div class="leave">'+m.author+' has left</div>');

                    last_received = m.id;
                })

                // scroll to bottom
                if (scroll)
                    $("#chat-messages-container").animate({ scrollTop: $("#chat-messages-container").attr("scrollHeight") }, 500);
            }
        });

        // wait for next
        setTimeout("get_messages()", 2000);
    }

    /**
     * Tells the chat app that we are joining
     */
    function chat_join() {
        $.ajax({
            async: false,
            type: 'POST',
            data: {chat_room_id:window.chat_room_id},
            url:'/chat/join/',
        });
    }

    /**
     * Tells the chat app that we are leaving
     */
    function chat_leave() {
        $.ajax({
            async: false,
            type: 'POST',
            data: {chat_room_id:window.chat_room_id},
            url:'/chat/leave/',
        });
    }

    // attach join and leave events
    $(window).load(function(){chat_join()});
    $(window).unload(function(){chat_leave()});

    // emoticons
    var emoticons = {
        '>:D' : 'emoticon_evilgrin.png',
        ':D' : 'emoticon_grin.png',
        '=D' : 'emoticon_happy.png',
        ':\\)' : 'emoticon_smile.png',
        ':O' : 'emoticon_surprised.png',
        ':P' : 'emoticon_tongue.png',
        ':\\(' : 'emoticon_unhappy.png',
        ':3' : 'emoticon_waii.png',
        ';\\)' : 'emoticon_wink.png',
        '\\(ball\\)' : 'sport_soccer.png'
    }

    /**
     * Regular expression maddness!!!
     * Replace the above strings for their img counterpart
     */
    function replace_emoticons(text) {
        $.each(emoticons, function(char, img) {
            re = new RegExp(char,'g');
            // replace the following at will
            text = text.replace(re, '<img src="/media/img/silk/'+img+'" />');
        });
        return text;
    }  
    </script>
</head>
<body>
  <div id="chat">
  </div>

  <script type="text/javascript">
    $(window).ready(function(){
       var chat_id = 1;
       init_chat({{ chat_id }}, "chat");
    })
  </script>
</body>
</html>

When I load the page in Firefox, I get:

ReferenceError: init_chat is not defined    
init_chat({{ chat_id }}, "chat");

However, the function init_chat is clearly defined. What am I doing wrong? I created a jsFiddle for the page.

like image 767
cybertextron Avatar asked Dec 09 '12 20:12

cybertextron


People also ask

What to do if function is not defined in JavaScript?

To clear a text input, assign blank string to 'value' attribute (not innerHTML attribute) document . getElementById("text"). value = ""; And don't call myfunction in JS tab If you use a <form> then an input with 'type' attribute "reset" will do the same thing.

What is a ReferenceError in JavaScript?

The ReferenceError object represents an error when a variable that doesn't exist (or hasn't yet been initialized) in the current scope is referenced. ReferenceError is a serializable object, so it can be cloned with structuredClone() or copied between Workers using postMessage() .

How do I fix uncaught ReferenceError is not defined?

The $ is not defined ReferenceError usually arises when jQuery is not loaded and JavaScript is not recognizing the $ symbol. To solve this error, first, use jQuery CDN link inside the head section or download the jQuery file and use the jQuery file link inside the head section.

How do you check function is defined or not in JavaScript?

Using the typeof Operator When we use the function name as the operand of the typeof variable, it returns the 'function' string, and we can check whether the function is defined. If function is not defined, typeof operator returns the 'undefined'.


1 Answers

This happens when you define the functions in the head part and call them, when the document is not yet initialized. Move the script part, where the initialization happens and try it out.

Since you are using jQuery, it would also be better, if you can initialize the variables and enclose the whole script under a function and call the function inside document's ready state, it would probably work.

$(document).ready(function(){
   var chat_id = 1;
   init_chat({{ chat_id }}, "chat");
   // Something wrong here. Is it really chat_id inside {{ }}?
});
like image 198
Praveen Kumar Purushothaman Avatar answered Oct 07 '22 15:10

Praveen Kumar Purushothaman