-1

I am trying to create a chat application on my ASP.NET solution between users. With SignalR installed to help with real-time chatting. However the button created using JavaScript is not firing and the browser is not prompting to enter username as it is suppose to.

Below is my code. Check out the design here

C# code-behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;

namespace Synergince
{
    // This is a class to handle the username and message entered by the  username
    public class ChatHub : Hub
    {
        public void Send(string name, string message)
        {
            // Call the broadcast method to update clients
            Clients.All.broadcastMessage(name, message);
        }
    }
}

Source Code - JavaScript

<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 -->
<script src="Scripts/jquery-1.4.1.min.js"></script>
<script src="Scripts/jquery.signalR-1.2.1.js"></script>
<script src="/signalr/hubs"></script>
<script type="text/javascript"">
    $(on('click',function () {
        var chat = $.connection.chatHub;
        chat.client.broadcastMessage = function (name, message) {
            var Name = $('<div />').text(name).html();
            var Msg = $('<div />').text(message).html();

            //add message to the page
            $('#discussion').append('<li><strong>' + encodedName + '</strong>:&nbsp;&nbsp;' + encodeMsg + '</li>');
        };

        //get username from user
        $('#displayname').val(prompt('Enter preferred alias:', ''));
        $('#message').focus();

        //start connection
        $.connection.hub.start().done(function () {
            $('#sendmessage').click(function () {

                //call send method on the hub
                chat.server.send($('#displayname').val(), $('#message').val());

                //clear textbox
                $('#message').val('').focus();
            });
        });
    });
</script>
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Kelvin Nkomo
  • 27
  • 1
  • 5

1 Answers1

-1

Try binding it specifically to that button and making sure that the document is ready before you bind your handler. If the document isn't ready your click handler won't ever become active.

    $( document ).ready(function() {
      $('#sendmessage').on('click', function() {
        console.log('test');
      });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="test" id="sendmessage"/>
Ben
  • 5,079
  • 2
  • 20
  • 26
  • $(.... is the same: https://stackoverflow.com/questions/3528509/document-readyfunction-vs-function – Stephu Oct 17 '17 at 07:53
  • Please help me with code to bind the function to the code. I'm relatively new to JavaScript. Your help would go a long way – Kelvin Nkomo Oct 17 '17 at 12:35
  • @KelvinNkomo Sorry, the code I posted was incorrect. Fixed the snippet. If there are still problems after that let me know what it's doing. – Ben Oct 17 '17 at 13:48
  • It's showing an error 404 for hubs and cannot read property 'client' of undefined. I ran debug on the browser and these are the errors it shows – Kelvin Nkomo Oct 17 '17 at 17:57
  • Those are problems far beyond the scope of this question. You should try some specific troubleshooting of those problem or start a new topic if you're stuck detailing the troubleshooting steps you've tried. – Ben Oct 17 '17 at 18:09
  • Okay. Thank you for your help – Kelvin Nkomo Oct 17 '17 at 18:39