Updating a span within a datatable

BoltBait

One of my columns in a datatable contains a span:

<td><span id="row-@i-sample" name="row-@i-sample">@Model[i].Sample</span></td>

I would like to change the text of that sample when a user clicks a checkbox on that same row.

<td><input type="checkbox" checked=@Model[i].Normalize name="row-@i-normalize" id="row-@i-normalize" onchange="updateSample('@i','@Model[i].Value','@Model[i].RatioValue');" /></td>

I have the following code:

<script type="text/javascript">
    function updateSample(rowid, Value, Ratio)
    {
        var sample = Value;
        if ($("input[id=row-"+rowid+"-normalize]").is(':checked'))
        {
            sample = Ratio;
        }
        $("#id=row-" + rowid + "-sample").innerHTML = sample;
    }
</script>

The span never updates. It only shows the initial value that was there when the table was rendered.

Placing alerts inside of the updateSample function shows that the proper sample text is being calculated. (This sample code is simplified way down for just this question. The function is very complex and includes several checkboxes and other inputs on the same row.)

If my javascript is off, please teach me. I'm new to jQuery. Thanks!

Any ideas?

jLinux

row-@i-sample - Im assuming this is using a template parser of some type?

Show the HTML output of the form within the DOM, just so I know what the browser sees exactly

And why are you using

if ($("input[id=row-"+rowid+"-normalize]").is(':checked'))

?

Since its the ID attribute, you can just..

if ($("#row-"+rowid+"-normalize").is(':checked'))

BoltBait

<td><input name="row-5-normalize" id="row-5-normalize" onchange="updateSample('5','45','GB','45','45 GB','450');" type="checkbox" checked="checked"></td>
<td><span id="row-5-sample" name="row-5-sample">45 GB</span></td>

Based on the states of the various checkboxes, one of the values (2-6) will be put into the span. The first value is the row number.

EDIT:

In the javascript, this returns "undefined":

alert($("#row-"+rowid+"-sample").innerHTML);

...but, the span does exist. I can see it in IE using F12.

jLinux

Do you get any errors in the console when you click the checkbox?

And btw, this actually has nothing to do with DataTables does it?..

BoltBait

I thought it was a problem because of the edit I made to my previous message.

But, you were right. The problem was in my javascript. Sorry, I'm new to jQuery.

The function should have included:

$("#row-" + rowid + "-sample").html(sample);

That fixed it. This thread can now be deleted.

jLinux

I was wondering why you were using innerHTML.. I figured maybe you knew something I didnt, lol