runApp() link works in IE, not in Chrome or Firefox

[scaiferw]

I have a lab management webapp that lists servers on my network. With a click in IE I can open a terminal services session to that server. The code works in IE, but not in chrome or firefox. Can anyone suggest how I can make this work in Chrome (Firefox would be nice too, but Chrome is more important.)

<span style="color:blue;cursor:hand;" onClick="runApp('mstsc /v 10.1.2.3'); return false;" title="Click to open Terminal Services session">HOSTNAME</span> 

[SymetriX]

I've had bad luck trying to insert strings of JavaScript into my HTML as well. I would suggest using a pattern called "unobtrusive" JavaScript where you instead attach the events to the elements in JS code and leave the HTML clean.

Ex:

document.getElementById("mySpan").onclick = function() { runApp(); };

<span id="mySpan"></span>

[scaiferw]

Interesting. So I'd create a script with a document.getElementById() line for each server in the list (there could be 100 in the list) then create the span with the unique id in the list for each server?

[SymetriX]

Ah, so now we're getting a bit more complicated!

Okay, so firstly there are libraries like jQuery in which you can select multiple HTML elements and apply the same behaviors to them with minimal code.

So for example, the following elements:

<span class="server">Server 1</span>
<span class="server">Server 2</span>
<span class="server">Server 3</span>

Can be selected as such:

$(".server")

With this selection we can then apply a click event to all elements with the class "server":

$(".server").click(function () {
runApp();
});

Now here comes the fun part. We nee to pass unique parameters for each element. There are many ways to extract information from an HTML element but the best is to use what's called a data attribute. So for example we can re-write our span tags like so:

<span class="server" data-server="123">Server 1</span>
<span class="server" data-server="456">Server 2</span>
<span class="server" data-server="789">Server 3</span>

And modify our click handler as follows:

$(".server").click(function () {
runApp($(this).data("server"));
});

Now we're selecting all elements with class "server", applying a click function to each of them, and calling a function runApp() which passes in the data-server attribute on each tag.

Download jquery and play around with a solution like this and I think you'll be happier than the solution where you have to mix JavaScript and HTML code together. Much more readable.

[scaiferw]

Excellent. Thanks, I'll play with that.