Solving SignalR $.connection.HubName is null or undefined

July 5, 2017

I added support for SignalR to one of the ASP.Net MVC applications I develop, mainly following this Microsoft tutorial.

I was surprised by the fact that you cannot install the SignalR package from the NuGet GUI (in VS 2013 at least), but need to switch to the Package Manager Console and type

install-package Microsoft.AspNet.SignalR

It worked nevertheless.

I also copied the JS initialization code from there

 $(function () { 
    // Declare a proxy to reference the hub. 
    var chat = $.connection.chatHub;
    chatHub.client.broadcastMessage = function (name, message) { ... };
}

(adjusted, of course, to the hubs defined in my project), only to find that the JavaScript console in Chrome Developer Tools displays the error message

Uncaught TypeError: Cannot read property 'client' of undefined
 at HTMLDocument. (38024:10393)
 at fire (jquery-1.12.4.js:3232)
 at Object.fireWith [as resolveWith] (jquery-1.12.4.js:3362)
 at Function.ready (jquery-1.12.4.js:3582)
 at HTMLDocument.completed (jquery-1.12.4.js:3617)

The error is raised by the line

chatHub.client.broadcastMessage = function (name, message) {

with chatHub being undefined.

I stepped through the JavaScript code and found that the (automagically generated) JavaScript file

< script src="@Url.Content("~/signalr/hubs")" >< /script>

defines the hubs correctly, but somehow the hub definitions are lost when the

$(function() {

is being executed.

It turned out to be a question of JavaScript scopes, and I moved the client callback definition out of the jQuery $(function(){}) directly into the


Broken Windows

June 12, 2017

Dear Windows, why do you place a broken shortcut into your search results?

changepassword1

changepassword2

Title obviously inspired by Broken Windows. Brought to you by “broken Windows”.

But who are those “We” who never seem to be able to accomplish anything?


Debugging Ajax’ed JavaScript and jQuery val() calls

June 8, 2017

I develop a web application which displays data in a read-only form, and loads the edit form upon pressing a button

$(function () {
  $(".btnEdit").click(function () {
    $.ajax({
      url: '@Url.Action("Form", new { id = Model.ID })',
      type: 'post'
    });
  });
});

Now I needed to debug the JavaScript code loaded by the call to $.ajax(), but Chrome does not seem to display the loaded response in its tree of Sources.

An answer on SO provided me with the solution: Simply add the line

//# sourceURL=@Url.Action("Form", new { id = Model.ID })

inside a <script> block in the AJAX-loaded HTML. This will add the requested URL under the (no domain) node

chrome ajax js

Now that I have access to the source file, I needed to find all invocations of the jQuery val() function, since I was tracking down a wrong value in an <input>.

Again SO provided a solution, which I added to my code

(function($){
  var originalVal = $.fn.val;
  $.fn.val = function(){
    var selectorPath = $(this).parents().map(function () {return this.tagName;}).get().reverse().join("->");
    console.log("val( #" + $(this).attr("id") + " " + selectorPath + " , " + JSON.stringify(arguments) + ")");
    var result =originalVal.apply(this,arguments);
    return result;
  };
})(jQuery);

Now that the calls to val() were logged to the Console, it was easy to find where the wrong value was set.


Installing Terratec S7 on 64-bit Windows 8.1

May 24, 2017

I got myself a Terratec S7 because my existing Cynergy S2 card started to show problems, and the situation is not resolved yet, mainly because the S7 does not appear to control the dish as it should in the PC I want it to run.

To figure out where exactly the problem is, I took the S7 and tried to install everything on a separate laptop, not contaminated by previous installations of any TV software 😉

I got the latest drivers for Windows 8.1, and of course DVBViewer, which superseded Terratec Home Cinema, well-known from the S2 installation.

I installed the drivers, but did not immediately notice that the installation had failed. Only when DVBViewer presented an empty list of supported hardware, and after installing the drivers again, I realized the failure (there is no visual clue as to whether installation was successful or not, you actually have to *read* *text* 😉 ).

The output of the Windows Error Report (accessible from the error entry in the Event Log) listed an error code E0000247

Version=1
EventType=PnPDriverImportError
EventTime=131400033808805347
Consent=1
ReportIdentifier=b04db504-3f95-11e7-8257-441ca8536b2a
Response.type=4
Sig[0].Name=Architektur
Sig[0].Value=x64
Sig[1].Name=Win32-Fehler
Sig[1].Value=E0000247
Sig[2].Name=INF-Name
Sig[2].Value=terratec_s7.inf
Sig[3].Name=Treiberpakethash
Sig[3].Value=b47a89cb47c6613e055bc51ffc8935d320b543dd
DynamicSig[1].Name=Betriebsystemversion
DynamicSig[1].Value=6.3.9600.2.0.0.256.48
DynamicSig[2].Name=Gebietsschema-ID
DynamicSig[2].Value=3079
FriendlyEventName=Die Treibersoftware konnte nicht installiert werden.

which hints at a certificate validation error (hint, hint).

The Device Install Log at C:\Windows\Inf\setupapi.dev.log was also rather clear on the issue:

sig: {_VERIFY_FILE_SIGNATURE} 10:56:13.520
sig: Key = terratec_s7.inf
sig: FilePath = g:\terratec s7\terratec_s7_rev.4_driver_1.0.0828.0_xp_vista_7_8\terratec s7 rev.4\bda driver 1.0.0828.0\64bit\terratec_s7.inf
sig: Catalog = g:\terratec s7\terratec_s7_rev.4_driver_1.0.0828.0_xp_vista_7_8\terratec s7 rev.4\bda driver 1.0.0828.0\64bit\terratec_s7.cat
! sig: Verifying file against specific (valid) catalog failed! (0x800b0109)
! sig: Error 0x800b0109: A certificate chain processed, but terminated in a root certificate which is not trusted by the trust provider.
sig: {_VERIFY_FILE_SIGNATURE exit(0x800b0109)} 10:56:13.567
sig: {_VERIFY_FILE_SIGNATURE} 10:56:13.571
sig: Key = terratec_s7.inf
sig: FilePath = g:\terratec s7\terratec_s7_rev.4_driver_1.0.0828.0_xp_vista_7_8\terratec s7 rev.4\bda driver 1.0.0828.0\64bit\terratec_s7.inf
sig: Catalog = g:\terratec s7\terratec_s7_rev.4_driver_1.0.0828.0_xp_vista_7_8\terratec s7 rev.4\bda driver 1.0.0828.0\64bit\terratec_s7.cat
! sig: Verifying file against specific Authenticode(tm) catalog failed! (0x800b0101)
! sig: Error 0x800b0101: A required certificate is not within its validity period when verifying against the current system clock or the timestamp in the signed file.
sig: {_VERIFY_FILE_SIGNATURE exit(0x800b0101)} 10:56:13.598

Since 64-bit Windows requires device drivers to be signed, this seemed to be a show stopper. However, you can disable signature verification by typing (in admin mode)

bcdedit /set testsigning on

which fortunately worked on my laptop.

After reboot, I was able to install the drivers, and Windows even is so nice as to warn you if you install unsigned drivers

terratec signed driver

(There is probably an alternative method by extracting certificates from the installer’s .cat files, but I didn’t have to try, so I can’t tell.)

Starting up DVBViewer again, it immediately recognized the S7, and a range scan found several hundred channels fine. I switched to a couple of channels that I also had on my TV, but there was no picture.

Forum talk mentions this issue, along with LAV filters, which I had come across earlier clicking through the files of the Home Cinema download page. So I downloaded TERRATEC_Home_Cinema_Codec_Patch.exe from there, installed it, and finally got a TV on my laptop.

 


Adding Dropdown Arrow for Chosen Plugin in Multiselect Mode

April 2, 2017

I use the jQuery Chosen plugin in a web application, and recently got the request to display a dropdown arrow in multiselect mode.

I found an answer on SO regarding styling of the dropdown arrow, but that covered only singleselect mode. At least a starting point 😉

Within minutes, I had a CSS-only solution for this particular problem:

<style type="text/css">
.chosen-container-multi.chosen-container .chosen-choices::after {
    background: url(@Url.Content("~/Content/chosen-sprite.png")) no-repeat 3px 4px;
    width: 16px;
    height: 100%;
    content: " ";
    position: absolute;
    right: 0;
    background-color: lightgray;
}
</style>

(Note that this is an ASP.Net MVC application, and @Url.Content() computes the URL relative to application root.)

Only after I solved this, I found that there is a closed (and unresolved) issue on github from 2011, with comments up to 2016, but no solution to a valid feature request…


Emoticon Selection in ASP.Net MVC

March 30, 2017

I had to implement a good/bad/neutral selection UI in an ASP.Net MVC application.

This simple task turned out to be rather cumbersome, given different browsers implementing different things differently, and the MVC framework restricting access to generated markup.

I first thought about a DropDownList (i.e.) rendering a set of emoji, only to find

  • you cannot pass a C# emoji as SelectListItem.Text
new SelectListItem {Text = "\u1F60A" }
  • you cannot add the emoji HTML entity 😊 astext (at least not in Chrome)
  • you cannot add a @class parameter to SelectListItem
  • you cannot add a background-image:url() definition to an
  • you cannot add HTML tags inside an(

    )

However, I found code to overcome the limitations of SelectListItem, either by copying and extending code from the MS MVC framework, or by XML manipulation of the built-in HTML generator.

Maybe the dropdown list was just the wrong path to follow, so I searched for ways to style radiobuttons, and found this nice demo on codepen.

I modified the demo to fit my needs, and voilà, here’s my first codepen:

A radiobutton-based emoji selector

Update: Apparently, IE does not render an <img> inside a <label> clickable, unless you specify pointer-events: none.


Online Tools Collection

March 23, 2017

Encoding / Decoding

Base64 Decode and Encode – Encode text to base64, decode base64 to text

utf8-decoder – Decode bytes and characters to Unicode character names

HTML entity encoder/decoder – Translate text into HTML entities

Punycoder – Punycode (IDN) converter

Unicode code converter – Convert Unicode text to code point values (hex, UTF-8, etc.)

Images

Favicon Generator – Create favicons from image

ICO Convert – Convert image to .ico format

Palettes and Gradients

Ultimate CSS Gradient Generator – Gradient with 2 or more colors, generates CSS including support for older browsers

CSSmatic – Gradient generator

Paletton Color Scheme Designer – generate palette with up to 4 colors from base color

Parsing

.Net Regex Tester

Online Collaboration

EtherCalc – spreadsheet