locked
SignalR Update Not Working in IE 11 RRS feed

  • Question

  • User1122355199 posted

    Hello everyone and thanks for the help in advance.  I'm developing a SignalR application that is working in Chrome and Firefox, but does not update correctly in IE 11.  Also, when and update is issued or the page on any client is refreshed, the screen goes blank for an instant then display.  In Chrome and Firefox, the display updates after the blank, while in IE, the display does not update.  Here is what the page looks like:

    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="/Content/DatagridGreen.css" />
        <script src="~/Scripts/jquery-1.10.2.js"></script>
        <script src="~/Scripts/jquery.signalR-2.3.0.js"></script>
        <!--Reference the autogenerated SignalR hub script. -->
        <script src="/signalr/hubs"></script>
        <script type="text/javascript">
            $(function () {
    
                // Declare a proxy to reference the hub.
                //var notifications = $.connection.notificationHub;
                var notifications = $.connection.callNotificationHub;
                //debugger;
                // Create a function that the hub can call to broadcast messages.
                notifications.client.recieveNotification = function (response) {
    
                    var $divInboundCalls = $('#divInboundCalls');
                    $divInboundCalls.empty();
    
                    var url = '/Chat/GetInboundCalls/';
    
                    $.get(url, function (response) {
    
                        $("#divInboundCalls").html(response);
                    });
                };
    
                // Start the connection.
                $.connection.hub.start().done(function () {
                    notifications.server.sendCallNotifications();
                    //alert("connection started");
                }).fail(function (e) {
                    alert(e);
                });
    
            });
        </script>
    </head>
    <body>
        <div>
    <div id="divInboundCalls">
            <table id="tblInboundCalls"></table>
    </div>
        </div>
    </body>
    </html>
    

    The code calls a partial view which seems to render fine in Firefox and Chrome, so I don't think it's really relevant, but will post if needed.  Any help would be appreciated.

    Tuesday, January 15, 2019 3:56 PM

Answers

  • User475983607 posted

    So after looking at the console data (as well as the network data), the IE 11 console html is different from the Firefox and Chrome html.

    Your response is not very helpful.  What's different about the HTML?  The service should return deterministic HTML regardless of the browser.  Is the HTML a standard 500 or 400 error? 

    I'm going through the console looking for any errors, but don't see any.  Not sure where to go from here.

    Have you reviewed the network trace? 

    Maybe IE is in compatibility mode?  Maybe IE is caching the GET?

    $.get(url, function (response) {
    	$("#divInboundCalls").html(response);
    }, cache: false);

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, January 15, 2019 6:53 PM

All replies

  • User475983607 posted

    Generally if one browser does not work as expected, there is an issue with that browser.  It could be configuration or simply the browser does not implement the same as the others. This has been an issue since the beginning of web development.

    The first step is to do some basic debugging by placing console.log() statements through out the code.  This will allow you to see what's going on at that point in time.  

    <script type="text/javascript">
    	$(function () {
    
    		// Declare a proxy to reference the hub.
    		//var notifications = $.connection.notificationHub;
    		var notifications = $.connection.callNotificationHub;
    		//debugger;
    		// Create a function that the hub can call to broadcast messages.
    		notifications.client.recieveNotification = function (response) {
    			console.log("Notification");
    			console.log(response);
    			
    			var $divInboundCalls = $('#divInboundCalls');
    			$divInboundCalls.empty();
    			
    			console.log("Clear #divInboundCalls");
    			console.log($divInboundCalls);
    			
    			var url = '/Chat/GetInboundCalls/';
    
    			$.get(url, function (response) {
    				console.log("GET Response");
    				console.log(response);
    				$("#divInboundCalls").html(response);
    			});
    		};
    
    		// Start the connection.
    		$.connection.hub.start().done(function () {
    			notifications.server.sendCallNotifications();
    			//alert("connection started");
    		}).fail(function (e) {
    			alert(e);
    		});
    
    	});
    </script>

    Depending on the debugging results, you take that information and come up with the next troubleshooting steps.  I would take a closer look at the "response" variable as it is defined twice.  Maybe that causes an issue in IE 11 maybe not.  Simply take a few moments to dive a little deeper.

    Don't forget you have the browser's network trace too.  
     

    Tuesday, January 15, 2019 4:50 PM
  • User1122355199 posted

    Thanks for the response.  I changed the code a little to not repeat the response variable:

    @{
        Layout = null;
    }
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="/Content/DatagridGreen.css" />
        <script src="~/Scripts/jquery-1.10.2.js"></script>
        <script src="~/Scripts/jquery.signalR-2.3.0.js"></script>
        <!--Reference the autogenerated SignalR hub script. -->
        <script src="/signalr/hubs"></script>
        <script type="text/javascript">
            $(function () {
    
                // Declare a proxy to reference the hub.
                //var notifications = $.connection.notificationHub;
                var notifications = $.connection.callNotificationHub;
                //debugger;
                // Create a function that the hub can call to broadcast messages.
                notifications.client.recieveNotification = function (response) {
    
                       console.log("Notification");
                            console.log(response);
    
                    // Add the message to the page.
                    //alert(response);
                    //alert(response[0].ID);
    
                    //var $tblInboundCalls = $('#tblInboundCalls');
                    //$tblInboundCalls.empty();
                    var $divInboundCalls = $('#divInboundCalls');
                    $divInboundCalls.empty();
    
                        console.log("Clear #divInboundCalls");
                        console.log($divInboundCalls);
    
                    var url = '/Chat/GetInboundCalls/';
    
                    $.get(url, function (htmlresponse) {
    //alert(response);
                               console.log("GET Response");
                              console.log(htmlresponse);
    
                        $("#divInboundCalls").html(htmlresponse);
                    });
                };
    
                // Start the connection.
                $.connection.hub.start().done(function () {
                    //notifications.server.sendNotifications();
                    notifications.server.sendCallNotifications();
                    //alert("connection started");
                }).fail(function (e) {
                    alert(e);
                });
    
            });
        </script>
    </head>
    <body>
        <div>
    <div id="divInboundCalls">
            <table id="tblInboundCalls"></table>
    </div>
        </div>
    </body>
    </html>
    

    So after looking at the console data (as well as the network data), the IE 11 console html is different from the Firefox and Chrome html.  I'm going through the console looking for any errors, but don't see any.  Not sure where to go from here.

    Tuesday, January 15, 2019 6:34 PM
  • User475983607 posted

    So after looking at the console data (as well as the network data), the IE 11 console html is different from the Firefox and Chrome html.

    Your response is not very helpful.  What's different about the HTML?  The service should return deterministic HTML regardless of the browser.  Is the HTML a standard 500 or 400 error? 

    I'm going through the console looking for any errors, but don't see any.  Not sure where to go from here.

    Have you reviewed the network trace? 

    Maybe IE is in compatibility mode?  Maybe IE is caching the GET?

    $.get(url, function (response) {
    	$("#divInboundCalls").html(response);
    }, cache: false);

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, January 15, 2019 6:53 PM
  • User1122355199 posted

    Sorry for the confusion in the response:

    What's different about the HTML?  The service should return deterministic HTML regardless of the browser.  Is the HTML a standard 500 or 400 error? 

    The service returns valid HTML (no 400 or 500 error), however, the HTML written to the console was different.  So at your suggestion, I disabled caching and this seemed to fix the updating problem.  I am not sure why the data written to the console was not updated, however t he problem is fixed.  However, this is the first time I have tried rendering a partial view instead of sending data and had never had any problems with caching using that method.  Is rendering a partial view just a bad idea?

    Tuesday, January 15, 2019 7:51 PM
  • User475983607 posted

    HTTP GETs are cached and IE has always has an aggressive cache.

    Tuesday, January 15, 2019 8:33 PM
  • User1122355199 posted

    Looks like it.  But is there any difference between sending JSON data to the browser and assembling it as opposed to calling a partial view.  Seems to be different in my environment, but not sure why.

    Tuesday, January 15, 2019 8:49 PM
  • User475983607 posted

    Looks like it.  But is there any difference between sending JSON data to the browser and assembling it as opposed to calling a partial view.  Seems to be different in my environment, but not sure why.

    Partial views bind data on the server - the MVC frmework.  JSON received in the browser requires code to wrap the data in HTML.  This is where you find frameworks like React, Vue, Angular.

    Tuesday, January 15, 2019 11:41 PM
  • User1122355199 posted

    Obviously.  But if you think about it from the client side, it simply receives HTML and replaces one element.  So I don't see where it should make a difference.

    Wednesday, January 16, 2019 12:52 AM