Trying to create a signal R chat application but gives an error saying $ is undefined

Question

1.00/5 (1 vote)

See more:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>SignalR Simple Chat</title>
    <style type="text/css">
        .container {
            background-color: #99CCFF;
            border: thick solid #808080;
            padding: 20px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <input type="text" id="message" />
        <input type="button" id="sendmessage" value="Send" />
        <input type="hidden" id="displayname" />
        <ul id="discussion"></ul>
    </div>
    <!--Script references. -->
    <!--Reference the jQuery library. -->
    <script src="Scripts/jquery-3.1.1.min.js"></script>
    <!--Reference the SignalR library. -->
    <script src="Scripts/jquery.signalR-2.2.1.min.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="signalr/hubs"></script>
    <!--Add script to update the page and send messages.-->
    <script type="text/javascript">
        $(function () {
            // Declare a proxy to reference the hub.
            var chat = $.connection.chatHub;
            // Create a function that the hub can call to broadcast messages.
            chat.client.broadcastMessage = function (name, message) {
                // Html encode display name and message.
                var encodedName = $('<div />').text(name).html();
                var encodedMsg = $('<div />').text(message).html();
                // Add the message to the page.
                $('#discussion').append('<li><strong>' + encodedName
                    + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</li>');
            };
            // Get the user name and store it to prepend to messages.
            $('#displayname').val(prompt('Enter your name:', ''));
            // Set initial focus to message input box.
            $('#message').focus();
            // Start the connection.
            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    // Call the Send method on the hub.
                    chat.server.send($('#displayname').val(), $('#message').val());
                    // Clear text box and reset focus for next comment.
                    $('#message').val('').focus();
                });
            });
        });
    </script>
</body>
</html>

What I have tried:

I'm not sure where I have to define it but one of the j query is referenced as jquery.signalR-2.2.1.min.js when the file is jquery.signalR-2.2.2.min.js I've tried to change it but it then says jQuery was not found. Please ensure jQuery is referenced before the SignalR client JavaScript file.

Posted 12-Apr-19 14:27pm

Sean2299

Updated 22-Apr-19 10:00am

Add a Solution

Comments

F-ES Sitecore 13-Apr-19 6:28am

Make sure the js files are loading correctly, use the network tab of the browser tools (f12) to look for the requests to the js files and make sure they are not 404 or some other error. Your page is using relative file references so will only find the files if they are in a Scripts folder at the same level the current page is on. It's better to use ResolveUrl or Url.Content to reference files depending on webforms or MVC.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

ZurdoDev · Answer 1 · 2019-04-22T10:00:00

Solution 1

F-ES is correct. You need to load jquery first. $ undefined means it can't find the jquery library. Or maybe you are loading too many jqueries. You'll have to troubleshoot, as F-ES listed, to find out what exactly is causing it if you think you are loading it in the right order.

Posted 22-Apr-19 10:00am

ZurdoDev