Update table row with async fetch using alpinejs

Question

Each table row has a cell with some "expensive" data loaded on demand; before it is loaded, it shows "?". When that row's button is clicked, the cell is populated.

<table>
  <tbody>

    <!-- rows 1..10  -->

    <tr x-data="{ foo: '?' }">
      <td><span x-text="foo"></span></td>
      <!-- ... -->
      <td><button onclick="foo = await fetchFoo('row-11')">Load</button></td>
    </tr>

    <!-- rows 12... -->

  </tbody>
</table>

<script>
  async function fetchFoo(rowId) {
    let url      = `https://www.example.com/foo/${rowId}`;
    let response = await fetch(url);
    let result   = await response.text();
    return result;
  }
</script>

How do I pass the fetched data from the button to the cell?

UPDATE

Here's a demo showing it doesn't work; I tried various syntaxes:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" defer></script>

<table>
  <tbody>
    <tr x-data="{ foo: '?' }">
      <td>Hello</td>
      <td><span x-text="foo"></span></td>
      <td><button onclick="foo = await fetchFoo('row-1')">Load</button></td>
    </tr>
    <tr x-data="{ foo: '?' }">
      <td>World</td>
      <td><span x-text="foo"></span></td>
      <td><button onclick="async () => { foo = await fetchFoo('row-2') }">Load</button></td>
    </tr>
    <tr x-data="{ foo: '?' }">
      <td>Hi</td>
      <td><span x-text="foo"></span></td>
      <td><button onclick="fetchFoo('row-3')">Load</button></td>
    </tr>
    <!-- rows 4+... -->
  </tbody>
</table>

<script>
  async function fetchFoo(rowIndex) {
    return new Promise(resolve => setTimeout(() => resolve(rowIndex), 1000));
  }
</script>

@TUPKAP It does nothing. I added a demo to the question to demonstrate the problem. — lonix
– lonix, Commented Jan 20 at 3:03

hello-there · Accepted Answer · 2025-01-20 16:18:46Z

2

You must change the onclick to x-on:click:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" defer></script>

<table>
  <tbody>
    <tr x-data="{ foo1: '?' }">
      <td>Hello</td>
      <td><span x-text="foo1"></span></td>
      <td><button x-on:click="foo1 = await fetchFoo('row-1')">Load</button></td>
    </tr>
    <!-- rows 4+... -->
  </tbody>
</table>

<script>
  async function fetchFoo(rowIndex) {
    return new Promise(resolve => setTimeout(() => resolve(rowIndex), 1000));
  }
</script>

UPDATE:

by using "onclick" you're using basic js directives, you must use x-on:click to use alpine's directives.

edited Jan 20 at 16:18

answered Jan 20 at 14:49

hello-there

6611 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

lonix Jan 20 at 15:49

Thanks, that worked for me! I removed the await (which I used as I saw it in the docs), but also changed onclick to x-on:click. Any idea why that's necessary?

hello-there Jan 20 at 16:16

You can keep the await (even though does not make any difference), with onclick you're using simple js directive but with x-on:click you're using alpine.js that has visibility over x-data (simple js does not). I should have focused on that on my answer, I'll update it

lonix Jan 21 at 1:30

Thanks. On rereading the docs I found the issue - I was missing an "@". One can use x-on:click or @click.

Collectives™ on Stack Overflow

Update table row with async fetch using alpinejs

UPDATE

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related