Why your hyperlink won’t work in the LS HTML client, part 2

Apparently, there is a part2 in my struggle with this ‘current user hyperlink’ that I inserted in my LightSwitch HTML client as a custom ‘control’

Image 068

At first sight, the link works perfectly: when you click it, the app shows a popup where you can edit your profile.  Because of the databinding, the hyperlink will automatically update its text when the user edits his/her name in that dialog.

At first sight…

Once I added multiple screens to my application, I noticed that the hyperlink databinding behaves correctly when I first open the screen, but after navigating to another screen and then back again, my custom control stopped working.  In fact, after navigating to another screen and then back again, half of my custom controls were behaving funny, the other half was just fine.  And by the time I noticed this subtlety, I had way too much custom controls on my screen to log it as a ‘known issue’ 😉

Image 069

I don’t remember ever running into problems with this before, but apparently there is a subtle difference in behavior between two different ways I interact with my custom ‘controls’.  Zooming in on the ‘offending’ code reveals the problem (when you know where to look, bugs are always easier to find):

var userViewer = $('<a id="userviewer" href="#" target="_self" >' + user.Name + '</a>');
//interaction 1
userViewer.on('click', function () {
contentItem.dataBind("value.Name", function () {
//interaction 2

view raw


hosted with ❤ by GitHub

I create the usercontrol via a JQuery selector, then save a ‘reference to the usercontrol’ in a variable.  In my first interaction, I use this variable directly.  For some reason, in my second interaction, I use a new JQuery selector to get a new ‘reference to the same usercontrol’.

This seems to work fine for the very first time, but breaks silently on subsequent rendering.

The first fix seems to be the obvious: use the variable instead of using a new JQuery selector.

A second fix that seems to work, is to start the JQuery selector using the parent element (passed as an argument to your _render or _postRender functions) as the context:

$("#userviewer", element);

If anyone can enlighten me as the technical reasoning behind this issue, I’d love to hear it 🙂  Until I understand, I think I’ll stick with this last approach because it seems to be the most stable one…


Keep rocking LS!



16 thoughts on “Why your hyperlink won’t work in the LS HTML client, part 2

  1. Pingback: Why your hyperlink won’t work the LS HTML client | Jan Van der Haegen's blog

  2. With javascript, due to my lack of better understanding, I always chalk it up to a ‘timing thing’. Curious though does this work:
    contentItem.dataBind(“value.Name”, function (newValue) {
    //interaction 2

  3. Hello Jan. I’m having the same issue. Everything renders fine on the first visit. Did you find out what was causing this behavior?

  4. Pingback: LightSwitch Community and Content Rollup – May 2014 - Visual Studio LightSwitch Team Blog - Site Home - MSDN Blogs

  5. Hi Jan, first of all, congratulations and good luck with App-stitch!

    Now, a cry for help:
    I ran into a similar issue (like many others), with a screen with no visual collection, and all custom controls that render JavaScript-based charts. The first time the screen is loaded, everything works perfectly fine. Navigating away and then coming back, no chart is rendered.

    My only JavaScript experience comes from learning LightSwitch. I don’t know if/how your workaround would fix my problem. Can you give me a hint? Basically, the “offending code” looks like this:

    myapp.myScreen.myCustomControl_render = function (element, contentItem) {
    //Create chart container

    contentItem.dataBind(“screen.YearFilter”, function (newValue) {

    if (newValue && newValue != -1) {
    contentItem.value = newValue;
    else if (newValue == -1) {
    contentItem.value = newValue;
    else {
    contentItem.value = -1;
    //Draw chart
    $(document).ready(function () {
    $.getJSON(“../api/myController/” + contentItem.value, function (data) {
    options.series[0].data = data;
    options.title.text = titleText;
    var chart = new Highcharts.Chart(options);

    big hug!

  6. Hi Jan, recently I have contacted Syncfusion Support for a similar issue with a JS Chart, and sent them a sample app. After a few days they’ve found that the chart container is created every time the navigation button is clicked. When navigating from the page with chart to start page the contents of chart screen will be hidden so clicking chart navigation button again will create a new container with same id as previous one. Now the page will have two chart containers one with chart (hidden) and an empty container. Chart will be drawn to the hidden container because it was added first. As a workaround solution, you can remové the existing container before adding a new one, using JQuery:

    //Remove existing Chart container from page

    var ChartContainer = document.getElementById(“Chart2”);

    if (ChartContainer)


    Hope this helps.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s