$.connections can not read the hub of undefined (SignalR)

Question

I will try to send data to the server whit SignalR 2. But I get this error:

Uncaught TypeError: Cannot read property 'meldingenHub' of undefined

Here is the C# code on the server:

public class MeldingenHub : Hub
{
    public void Meld(string blogitem, string verdiendePunten)
    {
        Clients.All.BroadcastMessage(blogitem, verdiendePunten);
    }
}

Here I include all the file that is needed:

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.signalR-2.1.2.min.js"></script>
<script src="~/signalr/hubs"></script>

Here is the Client code that gives the error on the bold code.

var medlingenHub = $.connection.meldingenHub;

medlingenHub.client.broadcastMessage = function (blogitem, verdiendePunten) {
    $("#verdiendepunten").html(verdiendePunten);
};

$.connection.hub.start().done(function () {

    var json = {
        ID: parseInt(this.dataset.id),
        Type: this.dataset.type,
        GebruikerID: "@(Model.DeBlog.Gebruiker.Id)",
        Punten: parseInt(this.dataset.punten),
        GestemdeGebruikerID: "@(Model.AangemeldeGebruiker)"
    };

    $.ajax({
        url: "../api/Stem/Toevoegen?apiKey=@Model.ApiKey",
        type: "PUT",
        data: json,
        success: function (returnData) {

            if (returnData.Oke == false) {

                toonError(returnData)
            }
            else {

                plaatsKleuren(returnData);
                medlingenHub.server.meld(data.ID, data.Punten);
            }
        }
    });
});

Note by the code above: the code executes when I click on a button.

I've also added this line on the Startup.Auth.cs file:

public void ConfigureAuth(IAppBuilder app)
{
    app.MapSignalR();
    // other code
}

I follow a tutorial on asp.net. Can anyone help me?

Answer 1

I've found it. I was working with a wrong scope of the $.connection. Here is my complete code I've made:

var punten = document.getElementsByClassName("punten-do-ajax");
var aantal = punten.length;

var conn = $.connection;

for (var i = 0; i < aantal; i++) {

    punten[i].addEventListener("click", function () {

        @if (Model.DeBlog.StemmenToegelaten)
        {
            <text>
            votes(conn, this);
            </text>
        }
    });
}

function votes(conn, sender) {
    var medlingenHub = conn.meldingenHub;

    medlingenHub.client.broadcastMessage = function (blogitem, verdiendePunten) {
        $("#verdiendepunten").html(verdiendePunten);
    };

    conn.hub.start().done(function () {

        var json = {
            ID: parseInt(sender.dataset.id),
            Type: sender.dataset.type,
            GebruikerID: "@(Model.DeBlog.Gebruiker.Id)",
            Punten: parseInt(sender.dataset.punten),
            GestemdeGebruikerID: "@(Model.AangemeldeGebruiker)"
        };

        $.ajax({
            url: "../api/Stem/Toevoegen?apiKey=@Model.ApiKey",
            type: "PUT",
            data: json,
            success: function (returnData) {

                if (returnData.Oke == false) {

                    toonError(returnData)
                }
                else {

                    plaatsKleuren(returnData);
                    medlingenHub.server.meld(returnData.ID, returnData.Punten);
                }
            }
        });
    });
}