Skip to content

Conversation

luxploit
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant