REST API with backend filtering - trigger fetch without page reload?

Questions
1

Is it possible to trigger a REST API refresh (with updated properties) without reloading the whole page?

I’m doing some filtering in my backend, using a request parameter.

(In the REST API in Divhunt, I’m getting the request param value from a property, which I’m setting on my page using a url query parameter.)

But when a user changes the filtering (in my example, clicking the next month button), that mean I have to reload the whole page with the new url query parameters.
Since this is a SPA, it would be more elegant if just the contents of the section showing the API results is updated.

history.pushState lets me update the displayed url in the browser, but it doesn’t trigger a new REST API request.

Any tips?

1 Like
2

Using ChatGPT, I think I found a way to refresh a REST API source and rerender the relevant section without reloading the whole page:

The tag ids in Divhunt are not permanent.
(Say an element has the class t723, next time the page is loaded it might be t762.)
Therefore, we need to give the element (section, div etc.) where the source is used a specific id or class.

When a user click a filter button or similar, we can refresh just that section with this process:

  1. Update the variables that are used as properties for the source (mdVars.ItemAdd({ id:‘query’, … }), etc.).
  2. Grab the target tag’s DOM node by a stable id/class.
  3. From that node’s classes, find the t Divhunt assigns.
  4. Clear its cached source result in cache.source (so that it will call the API when rerendered).
  5. Re-render that tag with tag.Fn(‘render.html’, …) and replace the old DOM.
  6. Run transform.Fn(‘run’, {mode:‘website’}) to restore animations/interactions.
Sample code 
// --- Update query values and URL (when user clicks a filter etc.) ---
// 1. Update Divhunt's internal query object (what $dh.query() reads)
mdVars.ItemAdd({
  id: 'query',
  value: { ...$dh.query(), date_from: "2025-09-01", date_to: "2025-10-01" }
});

// 2. Push new querystring into the URL bar without reload
history.pushState({}, '', location.pathname + '?' + new URLSearchParams($dh.query()).toString());


// --- Refresh the section bound to the source --- 
(function refreshById(domId){
  // 3. Get the wrapper/section element by its DOM id
  const el = document.getElementById(domId);
  if (!el) return; // bail if not found

  // 4. Extract the numeric Divhunt tag id from its class list (e.g. t743 → 743)
  const m = [...el.classList].map(c => /^t(\d+)$/.exec(c)).find(Boolean);
  if (!m) return;
  const id  = parseInt(m[1],10);

  // 5. Resolve the internal Divhunt tag object
  const tag = components?.tags?.ItemGet?.(id);
  if (!tag) return; // bail if Divhunt doesn’t know this tag

  // 6. Clear the cached source result for this tag
  const cache = components.GetTemp('cache.source', {}) || {};
  delete cache[id];                       // invalidate only this tag’s cache entry
  components.SetTemp('cache.source', cache);

  // 7. Ask Divhunt to render this tag fresh (will re-call its bound source)
  const $new = $(tag.Fn('render.html', { symbols: [] })).first();

  // 8. Preserve the original DOM id on the new root (Divhunt might not set it)
  if ($new.length && $new.attr('id') !== domId) $new.attr('id', domId);

  // 9. Swap old element with new one in the DOM
  $(el).replaceWith($new);

  // 10. Re-run Divhunt’s transform pass so animations/interactions re-initialize
  transform.Fn('run', { mode: 'website' });

  console.log(`#${domId} refreshed (tag ${id})`);
})('section-to-be-updated'); // ← call with the id of your wrapper/section
1 Like