Update Cell in existing table?

[Petty_Crim]

I've solved a few problems now I'm stuck with this one. I have a table which lists points for each player which is pulled from a database, as I'm using AJAX its possible for these points to be increased via a form. As a result I need to update a particular cell with a new value.

 

I'm thinking of trying to give the <td> tag an id value but I don't know the code for updating a particular cell. I currently use the insert row thing to add a new row to this table. Is it much different from this?

 

cell_points = row.insertCell(-1);
cell_points.appendChild(document.createTextNode(points));

 

 

 

[phpQuestioner]

change the innerHTML of the cell to the updated value.

[Petty_Crim]

change the innerHTML of the cell to the updated value.

Can you give me a code example?

 

I'm using this atm:

document.getElementById('member').innerHTML='points scored is 10';

 

However if I try and make the ID dynamic ie set it to a variable it refuses to work:

var member_points=document.getElementById('member_name').value; //ie john
document.getElementById(member_points).innerHTML='points scored is 10';

 

My table is like this:

<table>
<tr><td>Member Name</td><td>Points scored</td></tr>
<tr><td>".$row_members['member_name']."</td><td id='$row_members[member_name]'>".$row_members['points']."</td></tr>
</table>

[phpQuestioner]

by the way you have your code set-up; I am not quit sure what your trying to do - try something like this and see if it is what you mean:

 

var member_points=document.getElementById('<?php echo "". $row_members[member_name] .""; ?>').value; //ie john
document.getElementById('<?php echo "". $row_members[member_name] .""; ?>').innerHTML=''+member_points+'';

<table>
<tr><td>Member Name</td><td>Points scored</td></tr>
<tr><td>".$row_members['member_name']."</td><td id='$row_members[member_name]'>".$row_members['points']."</td></tr>
</table>

[Petty_Crim]

Your method won't work because when I run the loop that outputs the table rows its done at a different stage and the javascript is only called when the form is submitted.

 

Basically on this page I have two tables:

Points table - lists the member name and the points they have - generated from a database.

Give points table - allows a person to give a member some more points via a form

 

When someone gives a member some more points I need to update the points table without refreshing the page, I'm using ajax to do this.

 

This line gets the chosen members name from the form:

var member_name=document.getElementById('member_name').value;

 

This along with the points they chose is then sent to the javascript where it is also added to via ajax to the database.

 

When it has been inserted into the db, the points table is then incorrect in regards to that members points so it needs to be updated.

The following code sticks it in the cell with the ID generated from the database earlier.

var points_scored=10;
document.getElementById(member_name).innerHTML='points_scored';

 

The row would look something like this if you viewed the page source:

<tr><td>John</td><td id='john'>10</td></tr>

 

The problem is though is this line refuses to work:

var member_name=document.getElementById('member_name').value;
document.getElementById(member_name).innerHTML='points_scored';

 

If I do this it works but this is not dynamic and I need it dynamic:

var abc='John';
document.getElementById(abc).innerHTML='points_scored';

 

For some reason it won't let me use this variable even though it outputs a name when I test it.

var member_name=document.getElementById('member_name').value;

[phpQuestioner]

if your get the updated variable with AJAX; you can add a parameter to your AJAX function; then add the parameters value to the innerHTML of the <td>.

 

for more help with your AJAX scripts; post your threads here:

 

http://www.phpfreaks.com/forums/index.php/board,51.0.html

[Petty_Crim]

I'm not sure what you mean but the value is already passed to javascript ie john is passed when it uses getElementById('member_name').value so I don't see any need to use ajax.

 

I can't seem to put that value in this though:

document.getElementById(# HERE #).innerHTML='points scored is 10';

[phpQuestioner]

I can't seem to put that value in this though:

document.getElementById(# HERE #).innerHTML='points scored is 10';

 

what are you wanting that value to be then? if you want to set the "id" with AJAX add a parameter to your AJAX function; otherwise, I already showed you how to get it with PHP.

 

you could also just add a parameter to you basic JavaScript function to set your id.

[Petty_Crim]

I can't seem to put that value in this though:

document.getElementById(# HERE #).innerHTML='points scored is 10';

 

what are you wanting that value to be then? if your get the value with AJAX add a parameter to your AJAX function; otherwise, I already showed you how to get it with PHP.

I want to put that value which comes from a form into a particular cell. Your method won't work because when the java script is only called when the form is submitted. I'll upload some screenshot so it makes more sense.

[emehrkay]

what is creating the ajax call if not a form post and what is returned?

[phpQuestioner]

I want to put that value which comes from a form into a particular cell. Your method won't work because when the java script is only called when the form is submitted. I'll upload some screenshot so it makes more sense.

 

you do not have to submit the form for javascript too get the value of a form element. there are several ways to update the value of JavaScript variable; without submitting the forms value. by the way; I did not call a submit or a onsubmit event any where in the code I provided you; that must be something you added in there.

[Petty_Crim]

I use a button not a submit button but its easier to say when form submitted.

 

Theres 5 steps with my script

1. User chooses their stuff from the form options and hits the button

2. Javascript function is then called and it uses getElementID to get the values from the form

3. This data is sent inputted into the database using an ajax function.

4. If succeessful a row is added to the previous submissions using javascript (no page refresh)

5. Also the points in the current members table is updated for the user. << This is where I'm stuck

 

When that current members table is executed it makes no javascript calls at all, theres only 1 javascript call its when the form is submitted.

 

Heres what it looks like:

[phpQuestioner]

ok - your "Add" button submits your form data to a AJAX script - right?

[Petty_Crim]

ok - your "Add" button submits your form data to a AJAX script - right?

Yes

 

This is the line I'm having trouble with. It is meant to update the points cell of the user that has just been given more points.

 

var member_name=document.getElementById('member_name').value;
document.getElementById(member_name).innerHTML='points_scored';

 

[phpQuestioner]

you should have responseText (in your AJAX script) set up to display the results of any variable you want to be displayed from your PHP page back to your HTML page as the innerHTML of your "Current Members" table; this is the easiest way to accomplish what your wanting to do.

[Petty_Crim]

you should have responseText (in your AJAX script) set up to display the results of any variable you want to be displayed from your PHP page back to your HTML page as the innerHTML of your "Current Members" table; this is the easiest way to accomplish what your wanting to do.

I don't think thats necessary because the js variable member_name already contains the ID, the only thing my php page does is insert data into the database.

 

In any case why won't those two lines work?

[emehrkay]

What are you returning with your ajax call? that is what is important. we can use that data and update the table

[phpQuestioner]

What are you returning with your ajax call? that is what is important. we can use that data and update the table

 

exactly - that is what I was trying to tell Petty_Crim about the responseText

[phpQuestioner]

ok - look - try this - I think it will work like you want it to; but you will have to make it dynamic with AJAX and PHP; that will be up to you.

 

<script language="javascript">

function updatepoints()
{
var member = document.getElementById('member_name').value;
var base = document.getElementById(member).innerHTML;
var amount = document.getElementById('points').value
var total = (base*1) + (amount*1);
document.getElementById(member).innerHTML=''+total+'';
}

</script>

</head>
<body>

<form>
Member: <select id="member_name">
<option selected>Select Member
<option value="Fred">Fred
<option value="John">John
</select><br><br>
Points: <input type="text" id="points">
<input type="button" value="Add" onclick="updatepoints()">
</form>

<br><br>

<table border=1>
<tr>
<td>
Member
</td>
<td>
Points
</td>
</tr>
<tr>
<td>
Fred
</td>
<td id="Fred">
1
</td>
</tr>
<tr>
<td>
John
</td>
<td id="John">
2
</td>
</tr>
</table>

[Petty_Crim]

What are you returning with your ajax call? that is what is important. we can use that data and update the table

ATM nothing

[phpQuestioner]

did the script I provided do what you wanted it to do?

[emehrkay]

What are you returning with your ajax call? that is what is important. we can use that data and update the table

ATM nothing

 

do you just want to increment the numbers in the table cells then? because if you arent returning any data from the ajax call, there is no need to mention ajax in this question.

 

i would suggest that you return the values from the db in your ajax call along with the uername so that you know which cells to update

[Petty_Crim]

did the script I provided do what you wanted it to do?

Na its not working.

I tried this and it does not want to work at all

var member = document.getElementById('member_name').value; //member_name ie john
var base = document.getElementById(member_name).value; // gets  cell and old points
var amount = document.getElementById('points').value; // gets points added
var total = (base*1) + (amount*1);
document.getElementById(member).innerHTML=total;

 

The following sort of works but is not dynamic and only outputs NaN

var base = document.getElementById('John').value; // gets  cell and old points
var amount = document.getElementById('points').value; // gets points added
var total = (base*1) + (amount*1);
document.getElementById('John').innerHTML=total;

 

The problem seems to be this when I try and put the value of the variable 'member' into the id field of the other variables it doesn't like it some silly reason.

 

<b>Have a look at this below cause its what I'm trying to point out.

The only difference between these two is the variables. Getting the value via getElementId  and setting it to a variable (member_name) will output fine but it refuses to work when used as follows:</b>

 

This works:

var member_name='John';
document.getElementById(member_name).innerHTML='points_scored';

 

This doesn't:

var member_name=document.getElementById('member_name_text_field').value;
document.getElementById(member_name).innerHTML='points_scored';

 

I tested outting in the php file the member name and then setting responseText to a variable and passing it in and that also failed like above ie I push the Add button whole script doesn't work it just does nothing.

[phpQuestioner]

Na its not working.

 

Oh, It works perfectly fine (you may be implementing it in the wrong way - because I tested it in FF & IE and it does work); I was just asking you if it was what you were wanting.

[Petty_Crim]

Na its not working.

 

Oh, It works perfectly fine (you may be implementing it in the wrong way - because I tested it in FF & IE and it does work); I was just asking you if it was what you were wanting.

In what way am I implementing it the wrong way?