Updating Swup on external AJAX operations to the page

[ionurboz]

Updating Swup on external AJAX operations to the page

When we add new content to a page using an AJAX operation outside of Swup and add a parameter to the browser URL, we expect it to have a history. In this case, we could use "history.pushState({}, '', url);", but Swup will be out of the way (especially caches, etc.).

To do this within the Swup ecosystem, I wrote the following code:

Do you think what I'm doing and what I want to do is doing the right thing? I don't understand why it's not working!

  function setURLParam(value) {
    const url = new URL(location.href);
    url.searchParams.set('foo', value);
    // history.pushState({}, '', url);
    createHistoryRecord(url);
  }
  
  function clearURLParam() {
    const url = new URL(location.href);
    url.searchParams.delete('foo');
    // history.replaceState({}, '', url);
    createHistoryRecord(url);
  }
  

Swup ❤️

[daun]

Maybe you could elaborate a bit -- what behavior do you expect and what behavior do you actually see? In theory, your approach sounds ok, but as always it depends on the details.

[daun]

@ionurboz If you found a solution to a question, it'd be great if you can post the solution instead of closing the discussion. That way, others can find it in the future :)

[ionurboz]

I couldn't find it;

I further improved the behavior by adding a condition like "if (url.href !== location.href) {...}". However, because swup inherently expects an exact match between containers A and B, I abandoned the "history API" approach. Everything happens on the same page, so it's no longer necessary.