Issue accessing ID of a bootstrap table using just `tableTarget.id`

1

Greetings,

I have a bootstrap table with an id defined on it.

<table id='tickets-datatable' data-id='tickets-datatable'>
    ---
    ---
</table>

This table is defined as the table target element.

Inside my controller, when I try to access the ID of this table,

I can access this just fine using the Data API that stimulus provides

tableTarget.dataset.id = 'tickets-datatable'

But, what doesn’t make sense to me is tableTarget.id = '' shouldn’t this also be returning the id of the table since I already defined the id on table?

Please let me know if you need more information. Appreciate the help!

2

Is this a typo, or did you mean to use colons instead of equals? If it isn’t a typo, that’s probably your problem. :smiley:

<table id='tickets-datatable' data-id='tickets-datatable'>
3

Hey Tim,
Nah, I might have just typed it wrong in this post. It looks right in the code though. I don’t think the typo is causing it.

Thanks for looking at it though!

4

Hey @prakash03!

Would you mind including more code and markup? It’s really difficult to debug exactly what the problem may be without the code. I can see some issues, but I don’t know if that’s because that’s how your code is or you left things out for brevity.

A few examples:
No target is defined on the table. The table should look like:

<table id='tickets-datatable' data-target='tickets.table' data-id='tickets-datatable'>

That’s assuming the controller name is TicketsController.

Also, data-id and tableTarget.dataset.id aren’t, in fact, using Stimulus’ data maps, they’re simply using HTML’s data API. Using Stimulus data maps, you’d end up with:

<table id='tickets-datatables' data-target='tickets.table' data-tickets-id="datable">

and accessed in JS as:

tableTarget.data.get('id')

Lastly, tableTarget.id = '' would return an empty string (''), not the ID of the table, as you’re setting the ID to ''. To retrieve the ID, you’d use something like let id = tableTarget.id.

Any or all of these could just be mistyped in your post, or could be contributing to the troubles you’re having. It’s hard to say without more concrete code and markup.