ub3rman123 ub3rman123 - 4 months ago 6x
Javascript Question

Multiple Javascript calls on an Orchard field

I'm creating a module that allows users to see the status of a set of IP addresses by creating a custom field that holds the address (and validates it when it's first entered). On the Field view there's a glyphicon that changes based on the result of a ping attempt.

How it should look

However, I'm having difficulty in getting the Javascript for pinging the address and each individual field to pass arguments correctly. For some reason, only the address from the first field is passed to the Javascript, instead of using the addresses from each individual field.

How it looks when only one address gets passed

I've checked the page with Firebug and found that the onload arguments are collected and sent correctly, but the Javascript is only receiving the first field's contents. Since the Javascript uses the arguments to determine which DOM to change, only the first DOM is ever altered.

I've also confirmed that the values are passed incorrectly by making the spanIDHolder and addressHolder spans visible and having the Javascript alert with the contents of those two spans. The HTML displays the correct value, but the alert only shows the first.

Here's the code for the view:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
string ipaddress = Model.ContentField.Value;
string spanID = ipaddress + "span";
bool showPingResult = Model.ContentField.ShowPing;
if (!string.IsNullOrEmpty(ipaddress)) {
if (showPingResult) {
<span id="addressHolder" style="display:none">@ipaddress</span>
<span id="spanIDHolder" style="display:none">@spanID</span>
<span id="@spanID">
<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
<span class="text-field">@ipaddress</span>
<script src="http://code.jquery.com/jquery.min.js"></script>
var address = document.getElementById("addressHolder").innerText;
var id = document.getElementById("spanIDHolder").innerText;

function setPingResult() {
var elem = document.getElementById(id);
elem.innerHTML = '<div class="glyphicon glyphicon-ok-sign" aria-hidden="true"></div>';

$(document).ready(function () {


The Javascript is temporarily simplified until I can get the parameters passing correctly, so 'address' is unused.

Things I've tried so far:

  • Other methods of including the Javascript code such as inlining or including it in the HTML as discussed here

  • Doing the ping through a C# function and using if statements on the view to display the correct symbol

    • This works, but means that it runs the ping script before the page loads. If there's a way to call the C# function in the onload block (or equivalent), that would be a solution

  • Running the code through an onload call on the body and storing the Javascript in a separate file

  • Moving things around randomly hoping it decides to work

Let me know if I need to provide code from elsewhere in the project.

Edit: Some things I've found so far...

The block at the beginning which designates the variables is only executed once, no matter how many individual fields are on the page. I found this by replacing spanID with the output of a random number generator. All four fields received the same random number.

I've tried encasing the field in a part, but can't figure out how to get the variables to the part view instead of the field view. A viewmodel may be the key?

The variables can be passed to the Javascript section just by using @ in front of the needed variable name. This results in the last field's data being passed.



For some reason, the pass works correctly if I collect the variable in the document.ready block instead of directly in the JS function. Therefore, instead of

function setPingResult() {
    var elem = document.getElementById('@spanID');
    elem.innerHTML = '<div class="glyphicon glyphicon-ok-sign" aria-hidden="true"></div>';

$(document).ready(function () {

I use

function setPingResult(spanID) {
    var elem = document.getElementById(spanID);
    elem.innerHTML = '<div class="glyphicon glyphicon-ok-sign" aria-hidden="true"></div>';

$(document).ready(function () {

If someone could explain why this works, that would be lovely.