Javascript function displaying "Uncaught Reference Error"

Question

This is a PHP code connecting itself to a MySQL database. The deal is, it displays a list of names stored in the database. What I need to do, is that when clicked upon, the names should display a Chat box of their own (same as in Facebook).

The problem here lies in the line marked with arrow. When clicked upon the particular name, it should call the function display_chat_box, but doesn't. It worked well until I hadn't added the studentid argument in it. I suspect the function chat_box_number() being sent as an argument in it, but it really isn't helping me out. It worked fine earlier, so why isn't it now? I opened up Developer Tools in Google Chrome to check the error, and it displays

**Uncaught ReferenceError : display_chat_box() is not defined**.

I cannot understand why? Can anybody else? And whatever the problem exists, could anybody please post a working solution to it so I can bring back the chat boxes to life.

<?php
$con = mysql_connect("localhost", "****", "******");
mysql_select_db("my_db", $con);
$result = mysql_query("SELECT * FROM online_students");
while ($row = mysql_fetch_array($result)) {
    $result2 = mysql_query("SELECT * FROM students WHERE email='$row[email]'");
    $row2 = mysql_fetch_array($result2);
    $name = $row2['firstname'] . " " . $row2['lastname'];
    $studentid = $row2['studentid'];
    echo "<li onclick='display_chat_box(chat_box_number(),\"" . $name . "\"," . $studentid . ")'>" . $name . "</li>";
}
mysql_close($con);
?>

<script src="jquery-1.9.1.min.js" type="text/javascript">
    var n = 0, chat_wid;
    function chat_box_number() {
        if (n == 2)
            n = 0;
        n++;
        return n;
    }

    function display_chat_box(j, name, studentid) {
        alert("hi");
        switch (j) {
            case 1: {

                document.getElementsByClassName("chat_box1")[0].style.display = "block";
                document.getElementById("chat_with1").innerHTML = name;
                break;
            }
            case 2: {
                document.getElementsByClassName("chat_box2")[0].style.display = "block";
                document.getElementById("chat_with2").innerHTML = name;
                break;
            }
            case 3: {
                document.getElementsByClassName("chat_box3")[0].style.display = "block";
                document.getElementById("chat_with3").innerHTML = name;
                break;
            }
        }
        chat_wid = studentid;
        update_chat();
    }
</script>

I think you need another <script> opening tag after your jquery include line, no? — showdev
– showdev, Commented Apr 16, 2013 at 18:29

LXSoft · Accepted Answer · 2013-04-16 18:39:54Z

1

The problem of undefined reference is because you missed the

<script>

tag place it after

<script src="jquery-1.9.1.min.js" type="text/javascript">.

Tip: Why you use jQuery lib if you select elements with your own method. I give you an simple example

instead

document.getElementsByClassName("chat_box1")[0].style.display="block";

use

$(".class")[n].css("display","block");

instead

document.getElementById("chat_with3").innerHTML=name;

use

$("#id").html(name);

answered Apr 16, 2013 at 18:39

LXSoft

5957 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kamal0808 Over a year ago

Actually the thing is, I have learnt JavaScript but hadn't gone through any Library. I started on Jquery a bit later, and thus resulted mixing up all the codes. I am on ther verge of changing all Javascript normal codes to Jquery. Thanks for your help anyway! :)

prodigitalson · Accepted Answer · 2013-04-16 18:39:59Z

1

You need:

<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
// your JS code
</script>

Als you code would be much better IMO if you were to use unobtrusive js, that is attach the click handlers programmatically on documentready instead of as an html attribute, so your li might look like:

echo "<li class=\"display-chat-box-action\" data-name=\"$name\" data-studentid=\"$studentid\">$name</li>";

And you might have this in your JS

$(function () {
   $('li.display-chat-box-action').on('click.chatBoxDisplay', function () {
        var $this = $(this),
            name = $this.attr('data-name'),
            studentid = $this.attr('data-studentid');

        display_chat_box(chat_box_number(), name, studentid);
   });
});

edited Apr 16, 2013 at 18:39

answered Apr 16, 2013 at 18:32

prodigitalson

60.6k10 gold badges106 silver badges118 bronze badges

Collectives™ on Stack Overflow

Javascript function displaying "Uncaught Reference Error"

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related