Click on tr to get value of td

verlager · April 7, 2024, 6:06am

I’m trying to click on <tbody> <tr>
and get the value of. <td class = 'hidden' id = game[X]> in that <tr>

games.ajax :
[
{"game":"1007","Date":"10/04/2008"},
{"game":"1002","Date":"12/14/2008"},
{"game":"1202","Date":"06/14/2010"}
]

<table id = "cccr">
<tr><td id = games.ajax:game[0] ></td></tr>
<tr><td id = games.ajax:game[1] ></td></tr>
<tr><td id = games.ajax:game[2] ></td></tr>
</table>

ALL I GET IS ALERT(undefned)

I want the alert (item) to be 1007 or 1002 or 1202.

<script>
$("#cccr").on("click", "tbody tr", function() 
{ item = $(this).attr('game'); alert (item);}
);
</script>

mabismad · April 7, 2024, 8:16am

The above isn’t an assignment statement. It’s an attribute key/value definition. To create markup with the list of values (1007, 1002, 1202, …) you would either need to dynamically produce the markup on the server with those values when the page is requested or dynamically produce the markup or assign the attribute values using javascript in the browser.

Where is this data coming from and what is the overall goal or usage for this? I suspect you should probably be using data attributes - https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

verlager · April 7, 2024, 8:43am

games.ajax

[ 

{ "game":"6989", "Date":"05/19/2022", "Event":"Superbet Rapid 2022", "ECO":"A58", "White":"Wojtaszek, Radoslaw", "W_elo":"2696", "Black":"Shevchenko, Kirill", "B_elo":"2644", "Result":"½-½" },

{ "game":"6988", "Date":"05/15/1990", "Event":"Russia Cup", "ECO":"A58", "White":"Polyakova, Natalia (WFM)", "W_elo":"2152", "Black":"Nikolayev, Igor (FM)", "B_elo":"2346", "Result":"½-½" }, 

{ "game":"6987", "Date":"03/14/1989", "Event":"Semi-Final of Russia Ch.", "ECO":"C78", "White":"Yandarbiev, Ruslan (FM)", "W_elo":"2360", "Black":"Nikolayev, Igor (FM)", "B_elo":"2325", "Result":"½-½" }

]

I want to extract the <td> “game” value and append it to a URL.
That URL contains a pgn (portable game notation).

Example: $("#cccr").on("click", "tbody tr", function() { 
window.location.href = 'basic.php?game='+$(this).attr('game');

sample: basic.php?game=6989

(That will load basic.php + ‘6989.pgn’)

m_hutley · April 7, 2024, 10:09am

well for starters, there is no attribute ‘game’ in these elements.
second, the attribute you seem to be hunting is the id attribute of the td, not of the tr.
third, unless whatever you’re stuffing this through is injecting quotation marks, your ID attribute is malformed.

IF this is the only td that will be in the row, retarget the event:

to actually look at the td:
$("#cccr").on("click", "tbody tr td"
and then pull the id attribute.
$(this).attr("id")

mabismad · April 7, 2024, 12:48pm

Just output the markup for a link when the page is requested. No extra code is needed.

verlager · April 7, 2024, 3:54pm

[quote=“m_hutley, post:4, topic:443849”]
IF this is the only td that will be in the row, retarget the event:

There are 2500+ JSON records, each with eight (8) id fields (not one), like this:

assets/games.ajax: (sample record)
[
{ “game”:“6989”, “Date”:“05/19/2022”, “Event”:“Superbet Rapid 2022”, “ECO”:“A58”, “White”:“Wojtaszek, Radoslaw”, “W_elo”:“2696”, “Black”:“Shevchenko, Kirill”, “B_elo”:“2644”, “Result”:“½-½” },
]

MY TABLE CONFIG FOR GRID.JS:

<script>
 
 new gridjs.Grid({
 columns: [
 { id: 'game', name: 'Name', hidden: true}, 
 { id: 'Date', name: 'Date'}, 
 { id: 'Event', name: 'Event'}, 
 { id: 'White', name: 'White'}, 
 { id: 'W_elo', name: 'W_elo'}, 
 { id: 'Black', name: 'Black'}, 
 { id: 'B_elo', name: 'B_elo'}, 
 { id: 'Result', name: 'Result'}
 ],

 data: <?php include('assets/games.ajax');?>

}).render(document.getElementById("cccr"));

</script>

I am populating the table with the JSON array of objects above with https://gridjs.io/

I need to get the value of “game” which, in this single record is “6989”.

THIS WILL NOT WORK!
to actually look at the td:
$("#cccr").on("click", "tbody tr td"
and then pull the id attribute.
$(this).attr("id")

DO YOU HAVE ANY SUGGESTIONS?

m_hutley · April 7, 2024, 4:01pm

mab’s point is accurate. You could just tell it to output an <a> tag around the game pre-filled with the correct value.

Lacking that, show us the actual output, and we can advise you further.

verlager · April 7, 2024, 4:23pm

I guess it’s time to shut the website down. However, I will wait until tomorrow in case someone figures out how to get the “game” value.

Thank you for your efforts. I am 74 and cognitively challenged due to covid-19.

mabismad · April 7, 2024, 5:10pm

I played with this now that you provided some context.

Using hidden:true prevents the rendering of this column and there’s no game element to get the value of.

At this time I don’t have a solution to give you.

You can however see what data is available by console logging either this or $(this) inside the on click handling.

mabismad · April 7, 2024, 8:14pm

Okay, got it.

Gridjs has their own on click row (and cell) event handlers. In their examples, they have this for the rowClick event: grid.on('rowClick', (...args) => console.log('row: ' + JSON.stringify(args), args)); to console log the argument data.

At: args[1]._cells[0].data is the value for the zeroth cell (which can be hidden like you coded it).

<script>
// add 'const grid =' to the following to hold the instance of the gridjs grid
const grid = new gridjs.Grid({
 columns: [
 { id: 'game', name: 'Name', hidden: true},
 { id: 'Date', name: 'Date'}, 
 { id: 'Event', name: 'Event'}, 
 { id: 'White', name: 'White'}, 
 { id: 'W_elo', name: 'W_elo'}, 
 { id: 'Black', name: 'Black'}, 
 { id: 'B_elo', name: 'B_elo'}, 
 { id: 'Result', name: 'Result'}
 ],

 data: <?php include('assets/games.ajax');?>

}).render(document.getElementById("cccr"));

/*
rowClick args data -
row: [
0 {"isTrusted":true},
1 {"_id":"98c51aa2-4f8f-49f2-9e87-45b9f29bfbef",
	"_cells":[
		0 {"_id":"dc33d3e9-1e6f-497c-a637-edde77df97f6","data":"6989"},
		{"_id":"f2c3f20d-83f3-4a3d-81c1-9d74947f5d6b","data":"05/19/2022"},
		{"_id":"c107300d-3556-4133-8b53-9bd93cc51db7","data":"Superbet Rapid 2022"},
		{"_id":"fe8ed6ec-2c38-4af5-bd32-65fc5de5c085","data":"Wojtaszek, Radoslaw"},
		{"_id":"3c9cff8d-f643-4e39-b6f1-eac063a60a71","data":"2696"},
		{"_id":"da128ef5-602d-42e2-9f31-a529644ebb27","data":"Shevchenko, Kirill"},
		{"_id":"e45d54d1-5463-4d6d-8dae-9306b61a7af4","data":"2644"},
		{"_id":"71681361-0016-4ee2-80b6-c28090f53e9a","data":"½-½"}]}]
 (2) [PointerEvent, n]
*/

// gridjs example
//grid.on('rowClick', (...args) => console.log('row: ' + JSON.stringify(args), args));

// examine the desired value
//grid.on('rowClick', (...args) => console.log( args[1]._cells[0].data ));

// with the location href
grid.on('rowClick', (...args) => window.location.href = 'basic.php?game='+args[1]._cells[0].data);
</script>

verlager · April 8, 2024, 6:23am


 columns: [
 { id: 'game', name: 'Name', hidden: true}, 
 { id: 'Date', name: 'Date'}, 
 { id: 'Event', name: 'Event'}, 
 { id: 'White', name: 'White'}, 
 { id: 'W_elo', name: 'Rtng'}, 
 { id: 'Black', name: 'Black'}, 
 { id: 'B_elo', name: 'Rtng'}, 
 { id: 'Result', name: 'Result'}
 ],

and now.. now I'm supposed  to insert commented out code:

/*
rowClick args data -
row: [
0 {"isTrusted":true},
1 {"_id":"98c51aa2-4f8f-49f2-9e87-45b9f29bfbef",
	"_cells":[
		0 {"_id":"dc33d3e9-1e6f-497c-a637-edde77df97f6","data":"6989"},
		{"_id":"f2c3f20d-83f3-4a3d-81c1-9d74947f5d6b","data":"05/19/2022"},
		{"_id":"c107300d-3556-4133-8b53-9bd93cc51db7","data":"Superbet Rapid 2022"},
		{"_id":"fe8ed6ec-2c38-4af5-bd32-65fc5de5c085","data":"Wojtaszek, Radoslaw"},
		{"_id":"3c9cff8d-f643-4e39-b6f1-eac063a60a71","data":"2696"},
		{"_id":"da128ef5-602d-42e2-9f31-a529644ebb27","data":"Shevchenko, Kirill"},
		{"_id":"e45d54d1-5463-4d6d-8dae-9306b61a7af4","data":"2644"},
		{"_id":"71681361-0016-4ee2-80b6-c28090f53e9a","data":"½-½"}]}]
 (2) [PointerEvent, n]
*/

**What is the point of that? I don't understand. **

This (naturally) doesn't work:

grid.on('rowClick', (...args) => window.location.href = 'basic.php?game='+args[1]._cells[0].data);

*Can you please correct the commented code ? Thank you so much!*

m_hutley · April 8, 2024, 7:49am

Mab’s code would work as is. Personally, I prefer declaring my variables directly.

grid.on('rowClick', (x,row) => window.location.href = "basic.php?game="+row._cells[0].data;

This code works. Note that I have manually inserted the data for testing purposes, as I dont have your json.

verlager · April 8, 2024, 8:55am

Absolutely correct! One more little problem…

I call table as follows:

http://localhost/cccr/examineGRID.php?player=capp

And I am expecting magic to insert “capp” in the search box.
The “capp” search filter string is supposed to
retrieve / filter “White” || “Black” with “capp”.

 columns: [
 { id: 'game', name: 'Name', hidden: true}, 
 { id: 'Date', name: 'Date'}, 
 { id: 'Event', name: 'Event'}, 
 { id: 'White', name: 'White'}, 
 { id: 'W_elo', name: 'Rtng'}, 
 { id: 'Black', name: 'Black'}, 
 { id: 'B_elo', name: 'Rtng'}, 
 { id: 'Result', name: 'Result'}
 ],

The docs at https://gridjs.io/docs/examples/search

specify ONE filter, and I need two simultaneous filters. One to search for “capp”
in the White field and another to match ‘capp’ in the Black field.

I do not see how that can be done.

How can I do this?

verlager · April 8, 2024, 9:07am

See how
https://communitychessclub.com/examineGRID.php?player=parry

Shows all the records.
But I just want to display tuples in which White or Black
contain the “parry” player string.

m_hutley · April 8, 2024, 1:10pm

according to the documentation…

search accepts an object that defines search parameters. Specifically, it provides a way to initiate the search with a keyword.

from what i can see on your site, the search will default to searching all visible fields of the table. So now we just need to get the value out of the URL…

const urldata = new URLSearchParams(window.location.search);

....
//Down in your Grid invocation...
...
search: { keyword: urldata.get('player') ?? "" },
data: ...
//The ?? "" bit is "if there was no player specified, use an empty string
//rather than making an error by trying to put undefined there".

verlager · April 8, 2024, 6:17pm

<script>
player = "<?php echo ($_GET['player']); ?>"; 

const urldata = new URLSearchParams(window.location.search);

const grid = new gridjs.Grid({
    
 columns: [
 { id: 'game', name: 'Name', hidden: true}, 
 { id: 'Date', name: 'Date'}, 
 { id: 'Event', name: 'Event'}, 
 { id: 'White', name: 'White'}, 
 { id: 'W_elo', name: 'Rtng'}, 
 { id: 'Black', name: 'Black'}, 
 { id: 'B_elo', name: 'Rtng'}, 
 { id: 'Result', name: 'Result'}
 ],

Is this correct?

search: { keyword: urldata.get('player') ?? "" },

  data: [
    [{ White: keyword],
    [{ Black: keyword]
  ],

m_hutley · April 8, 2024, 7:27pm

no leave the data as it was. I was trying to indicate to you where to insert the search bit If you want to limit the search to just White/Black fields, you’d need to add a selector to it…
(untested)

search: { 
   keyword: urldata.get('player') ?? "", 
   selector: (cell,  rI, cellIndex ) => { if(cellIndex == 3 || cellIndex == 5) { return cell; } }
}

(selector expects a function: input of three parameters (cell, rowIndex, cellIndex) and should yield the value to be matched against for that cell; in our case, we return the cell value if cellIndex is 3 or 5, and nothing otherwise.)

If this suddenly makes it start searching completely incorrectly, try making it 2 and 4. I’m not sure if the selector is counting the hidden field or not…

verlager · April 8, 2024, 7:39pm

But that does not work! Just displays ALL RECORDS!
[https://communitychessclub.com/examineGRID.php?player=golyak](https://communitychessclub.com/examineGRID.php?player=golyak)

<script>
player = "<?php echo ($_GET['player']); ?>"; 

const urldata = new URLSearchParams(window.location.search);

const grid = new gridjs.Grid({
    
 columns: [
 { id: 'game', name: 'Name', hidden: true}, 
 { id: 'Date', name: 'Date'}, 
 { id: 'Event', name: 'Event'}, 
 { id: 'White', name: 'White'}, 
 { id: 'W_elo', name: 'Rtng'}, 
 { id: 'Black', name: 'Black'}, 
 { id: 'B_elo', name: 'Rtng'}, 
 { id: 'Result', name: 'Result'}
 ],
 
search: { 
   keyword: urldata.get('player') ?? "", 
   selector: (cell,  rI, cellIndex ) => { if(cellIndex == 3 || cellIndex == 5) { return cell; } }
},

m_hutley · April 8, 2024, 8:06pm

Okay, a couple of streamlines.

I didnt notice you were bouncing this through PHP. We can simplify a bit.

player = "<?php echo ($_GET['player']); ?>"; 

const urldata = new URLSearchParams(window.location.search);

pull those two out…

   keyword: urldata.get('player') ?? "",

replace that with:

   keyword: "<?= $_GET['player'] ?>",

Notes here:

<?= is shorthand for <?php echo
We dont need to use javascript’s URLSearchParams, because we can just use the value straight from PHP as a string.

Cool. smarten up the code a bit.

#2: Your page doesnt have an end to the <head> tag. Might want to close that somewhere.
#3: You’ve got an extra “search” in your grid declaration. Look down a few lines from where you made that edit:

                       sort: true,
                        search: true, <-- remove that one.
                        fixedHeader: true,

verlager · April 8, 2024, 8:57pm

OK. Let's validate the page with W3C and check if the missing </head> and <body> tags are flagged.

W3C page vadidation

BTW, if you load [[https://communitychessclub.com/examineGRID.php?player=parry] and ^click the up-arrow in the lower right corner, the page will be auto-validated at W3C.

We can also view the page source and see if a ^f </head> or ^f </body> are found.

and the game page html source code

What do you see? The page validates with no </head> or <body>.
How could that be? Frankly, I am amazed.