CODEWITHSUNDEEP
javascriptjqueryasp.net-mvcsignalr
xkcd
xkcd

Reputation: 2590

SignalR client function not being called before page refresh

I have an asp.net mvc view that contains a few parts that are loading dynamically using the following code:

$('#div1').load('controller1/action1', function() {
    alert('Load was performed.');
});

$('#div2').load('controller1/action2', function() {
    alert('Load was performed.');
});

All of the views loaded will use signalr connection. I can't start the connection multiple times as below:

$.connection.hub.start().pipe(test).done(function () {
    //....
});

I get error: 

*SignalR: Connection has not been fully initialized. Use .start().done() or .start().fail() to run logic after the connection has started.*

Because of that I store the return value of start method in a global variable:

<script type="text/javascript">
    window.connection = $.connection.hub.start();
</script>

And I'm using it as below:

$(document).ready(function () {

var initialMarketWatchData = null;
var marketWatchTicker = $.connection.marketWatch;

function initMarketWatch() {
    return marketWatchTicker.server.getAllMarketWatchData().done(function (data) {
        data.forEach(function (item) {
            item.ask = item.ask.toFixed(5);
            item.bid = item.bid.toFixed(5);
        });
        initialMarketWatchData = data;
        $("#marketWatchGrid").data("kendoGrid").dataSource.data(data);
    });
}

marketWatchTicker.client.updateMarketWatchData =
    function (marketWatchData) {
        try {
            if (viewModelOrder.selectedInstrument == marketWatchData.symbol) {
                viewModelOrder.updatePrice(marketWatchData.ask.toFixed(5), marketWatchData.bid.toFixed(5));
            }

            var tr = $("#marketWatchGrid").find("tr:contains('" + marketWatchData.symbol + "')");
            var bg = '';
            if (marketWatchData.direction == 1) {
                bg = '154,240,117';
            }
            else {
                bg = '255,148,148';
            }

            tr.find("td:nth-child(2)").html(marketWatchData.ask.toFixed(5));
            tr.find("td:nth-child(3)").html(marketWatchData.bid.toFixed(5));

            var current = tr.css('backgroundColor');
            tr.animate({ backgroundColor: 'rgb(' + bg + ')' }, 150)
                .animate({ backgroundColor: current }, 150)
        } catch (e) {
            console.log("exception: " + e.message);
        }
    }

window.connection.pipe(initMarketWatch).done(function () {
    viewModelHomeIndex.setInstruments(initialMarketWatchData);
});

});

function selectSymbol(symbol) {
    var tr = $("#marketWatchGrid").find("tr:contains('" + symbol + "')");
    var ask = tr.find("td:nth-child(2)").html();
    var bid = tr.find("td:nth-child(3)").html();
    viewModelOrder.selectSymbol(symbol, ask, bid);
}

But in that case my client functions are not being called for the first time my view loaded. And I'm not getting any errors. After I hit F5 everything works fine.

How can I fix the problem?

Upvotes: 1

Views: 3135

Answers (1)

xkcd
xkcd

Reputation: 2590

I came across that answer for an another question: https://stackoverflow.com/a/15074002/104969 It solved my problem.

Upvotes: 1

Related Questions