Ajax Action

<!-- Basic click: POSTs action=clearSession -->
<button type="button"
        data-wf-ajax-action="clearSession"
        data-wf-url="/api/action">
  <i class="icon trash"></i> Clear Session Log
</button>

<!-- Remove a parent element from the DOM on success -->
<div id="banner" class="wf-message wf-message-info">
  <div class="wf-message-body">Heads up!</div>
</div>
<button type="button"
        data-wf-ajax-action="dismissBanner"
        data-wf-url="/api/action"
        data-wf-parent="#banner"
        data-wf-complete="remove">
  Dismiss
</button>

<!-- Triggers on change — sends action + current value -->
<select
    data-wf-ajax-action="setStatus"
    data-wf-url="/api/action"
    data-wf-value-key="status"
    data-wf-params='{"id":42}'>
  <option value="draft">Draft</option>
  <option value="published">Published</option>
  <option value="archived">Archived</option>
</select>

<!-- wf-select uses the same change event underneath -->
<select data-wf-select
    data-wf-ajax-action="setSort"
    data-wf-url="/api/action"
    data-wf-value-key="sort">
  <option value="name">Name</option>
  <option value="date">Date</option>
</select>

<!-- Use selected option value as the action name -->
<select data-wf-ajax-action="placeholder"
        data-wf-action-from-value
        data-wf-url="/api/action">
  <option value="publish">Publish</option>
  <option value="archive">Archive</option>
</select>

// Valid code — toast + optional DOM update
{ "type": "positive", "message": "20% discount applied!" }

// Invalid code — toast only
{ "type": "negative", "message": "Invalid or expired promo code." }

// Valid + inject result HTML into data-wf-parent
{ "type": "positive", "message": "Code accepted.", "html": "<p>Discount: &minus;$12.00</p>" }

<div id="notification-1">
  <span>New comment on your post</span>

  <!-- Replace inner HTML with server-returned HTML -->
  <button type="button"
          data-wf-ajax-action="markRead"
          data-wf-url="/api/action"
          data-wf-params='{"id":1}'
          data-wf-parent="#notification-1"
          data-wf-complete="innerHTML">
    Mark read
  </button>

  <!-- Remove the parent element entirely -->
  <button type="button"
          data-wf-ajax-action="removeItem"
          data-wf-url="/api/action"
          data-wf-params='{"id":1}'
          data-wf-parent="#notification-1"
          data-wf-complete="remove">
    <i class="icon cancel"></i>
  </button>
</div>

<!-- data-wf-params: extra JSON merged into POST body -->
<button type="button"
        data-wf-ajax-action="sortItems"
        data-wf-url="/api/action"
        data-wf-params='{"ids":"3,1,4,1,5"}'>
  Save order
</button>

<!-- data-wf-children: update counter badge from response field -->
<button type="button"
        data-wf-ajax-action="toggleFavorite"
        data-wf-url="/api/action"
        data-wf-params='{"id":42}'
        data-wf-children='{"#fav-count":{"html":"html"}}'>
  <i class="icon heart"></i> Toggle Favourite
</button>
<span id="fav-count">—</span>

<!-- Server returns: { "type":"positive", "html": 37 } -->
<!-- → #fav-count innerHTML becomes "37" -->

<input type="search"
       data-wf-ajax-action="filterRows"
       data-wf-filter-target="#filterTable"
       data-wf-filter-item="tr"
       data-wf-filter-text-selector="[data-wf-filterable]"
       data-wf-filter-min-chars="2">

<table>
  <tbody id="filterTable">
    <tr>
      <td data-wf-filterable="Accordion">Accordion</td>
      <td>Data Display</td>
    </tr>
    <tr>
      <td data-wf-filterable="Buttons">Buttons</td>
      <td>Forms</td>
    </tr>
  </tbody>
</table>

<!-- Combine local filter + live search on the same input -->
<input type="search"
       data-wf-ajax-action="filterRows"
       data-wf-filter-target="#filterTable"
       data-wf-filter-min-chars="2"
       data-wf-live-url="/api/action"
       data-wf-live-action="liveSearch"
       data-wf-value-key="query">

// Pre-built HTML string (full control)
{ "type": "info", "html": "<ul class='wf-list'><li>Actions</li></ul>" }

// Results array — auto-wrapped in a wf-list
{ "type": "info", "results": ["Actions", "Archive", "Publish"] }

// Empty — hides the live panel
{ "type": "info", "html": "" }

<!-- No special attribute needed — the Content-Disposition header drives download -->
<button type="button"
        data-wf-ajax-action="exportCsv"
        data-wf-url="/api/action"
        data-wf-params='{"type":"users"}'>
  <i class="icon download"></i> Export Users CSV
</button>

case 'exportCsv':
    header('Content-Type: text/csv; charset=utf-8');
    header('Content-Disposition: attachment; filename="users-export.csv"');
    header('Cache-Control: no-cache, no-store, must-revalidate');

    $out = fopen('php://output', 'w');
    fputcsv($out, ['ID', 'Name', 'Email', 'Role', 'Status']);
    foreach ($users as $row) {
        fputcsv($out, $row);
    }
    fclose($out);
    exit; // do not echo JSON

import './wf-ajax-action.js'

// Cancel a request before it is sent
document.addEventListener('wf:ajax-action-before', e => {
  const { url, body, trigger } = e.detail
  if (!confirm('Are you sure?')) e.preventDefault()
})

// Inspect the server response
document.addEventListener('wf:ajax-action-success', e => {
  console.log('response', e.detail.data)
})

// Handle fetch / HTTP errors
document.addEventListener('wf:ajax-action-error', e => {
  console.error('error', e.detail.error)
})

// Update a "N results" counter after each filter pass
document.addEventListener('wf:ajax-action-filter', e => {
  const { visible, total, query } = e.detail
  document.getElementById('result-count').textContent =
    query ? `${visible} of ${total}` : total
})

// Act on live search results
document.addEventListener('wf:ajax-action-live', e => {
  const { query, data, panel } = e.detail
  console.log('live results for', query, data)
})