Dynamically changing cell values with Javascript / Ajax

N

nicosk

Hi all,
i have a table in a website, and using javascript and AJAX i want to
ALTER some cell values. Eg.
my table is:

+-----------------------------------------------------------------------------
+
| Product | Quantity Sold | In Stock |
+-----------------------------------------------------------------------------
+
| Water | 12 |
48 |
| Orange juice | 5 | 55
|
+-----------------------------------------------------------------------------
+

<table id="stockControl">
<tr id="header">
<td>Product</td>
<td>Quantity Sold</td>
<td>In Stock</td>
</tr>
<tr id="tr1">
<td>Water</td>
<td>12</td>
<td>48</td>
</tr>
<tr id="tr2">
<td>orange Juice</td>
<td>5</td>
<td>55</td>
</tr>
</table>

i want to change the values of some cells through an AJAX request

What i did so far is:
(This is what my AJAX request returns)
<script language="Javascript">
var tRow = document.getElementById("tr1'");
var cells = tRow.getElementsByTagName("td");
cells[1].innerHTML = "13";
tRow.style.background="#44556e";
</script>

My script even though is visible in my source code, it doesn't seem to
execute.

Any ideas?
 
T

Thomas 'PointedEars' Lahn

nicosk said:
i have a table in a website, and using javascript and AJAX i want to
^ ^
ALTER some cell values.

(The pronoun is spelled with a capital letter.)
Eg. my table is:

+-----------------------------------------------------------------------------
+
| Product | Quantity Sold | In Stock |
+-----------------------------------------------------------------------------
+
| Water | 12 |
48 |
| Orange juice | 5 | 55
|
+-----------------------------------------------------------------------------
+

ASCII art only works with a fixed-width font, and it should not exceed 72
characters per line (except maybe in ASCII-art newsgroups).
<table id="stockControl">
<tr id="header">
<td>Product</td>
<td>Quantity Sold</td>
<td>In Stock</td>
</tr>

If this is the table header, it should be within a `thead' element.
<tr id="tr1">
<td>Water</td>
<td>12</td>
<td>48</td>
</tr>
<tr id="tr2">
<td>orange Juice</td>
<td>5</td>
<td>55</td>
</tr>

If this is the table body, it should be within a `tbody' element.

Those table sections allow you to reduce the number of necessary IDs,
because they are made available through the `tHead' and `tBodies'
properties of table objects, respectively.
</table>

i want to change the values of some cells through an AJAX request ^
What i did so far is: ^
(This is what my AJAX request returns)
<script language="Javascript">

<script type="text/javascript">

(Est. 24 December 1999.)
var tRow = document.getElementById("tr1'");

There is an extra apostroph which doesn't belong there.
var cells = tRow.getElementsByTagName("td");

Had you tested `tRow', feature-tested tRow.getElementsByTagName(...) before
use, or looked into the error console in the first place, you would have known.
cells[1].innerHTML = "13";

Avoid `innerHTML' (especially with tables); use `nodeValue' instead (given a
text value). And forget about using getElementsByTagName("td") here, a
table-row object has a `cells' NodeList property already.

tRow.style.background="#44556e";

Avoid such colors that are not Web-safe because they are also not accessible
(the nearest Web-safe value would be #369). Don't set the `background'
property unless you want to use the defaults for all the combined property
values; use the `backgroundColor' property instead and don't forget to set
the text color (`color' property) as well.
</script>

My script even though is visible in my source code, it doesn't seem to
execute.

Including scripts afterwards does not always make them execute. And since
your script is strongly related to the document, you should not be using it
this way to begin with. The server should respond only with the new value,
not a script, and it should be left to the client on how to insert and style
that new value.
Any ideas?

Yes, HTH.


PointedEars
 
N

nicosk

I found a solution to my problem...
^ (i spelled it with capital letter)
^ (oops I forgot this one)
^ (yeaaahh getting it right)

function setAndExecute(divId, innerHTML)
{
var div = document.getElementById(divId);
div.innerHTML = innerHTML;
var x = div.getElementsByTagName("script");
for(var i=0;i<x.length;i++)
{
eval(x.text);
}
}

Last time I checked this was a javascript NG. Not a grammar or
spelling one!
 
T

Thomas 'PointedEars' Lahn

nicosk said:
I found a solution to my problem...
^ (i spelled it with capital letter)
^ (oops I forgot this one)
^ (yeaaahh getting it right)

function setAndExecute(divId, innerHTML)
{
var div = document.getElementById(divId);
div.innerHTML = innerHTML;
var x = div.getElementsByTagName("script");
for(var i=0;i<x.length;i++)
{
eval(x.text);
}
}

Last time I checked this was a javascript NG. Not a grammar or
spelling one!


You are a fool, and I have been a fool wasting my time with you.


PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top