intercooler-js icon indicating copy to clipboard operation
intercooler-js copied to clipboard

Allow for HTML swaps even on AJAX Errors

Open luxploit opened this issue 11 months ago • 0 comments

This was a crude implementation of the newer HTMX response targets extension but only for errors and it cannot distinguish the error codes like response targets can.

I wanted to seamlessly push the 404 html fragment into the main view however that would have required a duplicated bunch of nonsense using ic-on-error with jQuery like ic-on-error="$('#view').html(xhr.responseText) and I thought well rather then do that why not add another attribute to IC to tell it to push an html swap even if the ajax has entered a failed state, and this is that implementation.

I've tested this on IE (10 on Windows 8 and 11 via MS Edge) aswell as Firefox 22+, Opera 21+ and Chrome 31+ (I'm using IC.js to build a site that has to run on relatively ancient browsers from about 2014 onwards so I made sure it ran without a hitch)

Here's an example of how to use it (simplified snippet from the production app):

<div id="container" ic-swap-on-error="true">
  <header>
    <ul ic-target="main" ic-enhance="true">
      <li><a href="/">Home</a></li>
      <li><a href="/news">News</a></li>
    </ul>
  </header>
  <main></main>
</div>

One thing that could be improved is being able to set ic-swap-on-error on the target rather then the nearest element however it took quite a while to grasp how to even pull this off so that's a later problem.

luxploit avatar Mar 26 '25 09:03 luxploit