What will be the best practice for doing AHAH in Phoenix?

AHAH means Asynchronous HTML over HTTP.
Replies with code examples will be much appreciated.
Thank you!

1 Like

Of the top two google hits for me, http://www.openjs.com/articles/ajax/ahah_asynchronous_html_over_http/ is a 7 year old article, and talks about how ajax returns XML, and http://microformats.org/wiki/rest/ahah references stuff from 2005, so maybe the approach is a little dated?

Conceptually though I think live view might be relevant, in that you just have the server push HTML. Can you elaborate about what you’re trying to actually accomplish though?

4 Likes

I was thinking about how to make something in a way that there are partial updates to the pages but the user’s browser isn’t forced to calculate the json into html markup. Ahah is actually easier for the browser than the Ajax and now when there are faster Internet connections, ahah is more relevant than ajax.
I think pjax also uses Ahah under the hood.
in Rails when you’re loading something into a div using pjax, you send only the partial for that div, not the whole web-page. How would you do that (in a pragmatic way) in Phoenix?

1 Like

Have you checked Phoenix LiveView? It renders on the server and is pretty efficient for partial updates.

I think it uses WebSockets though, not strictly HTTP? I haven’t used it myself.

1 Like

WebSockets is the default transport for LiveView, but you can configure it for longpolling (I haven’t tried)

And yes, either LiveView (https://dockyard.com/blog/2018/12/12/phoenix-liveview-interactive-real-time-apps-no-need-to-write-javascript ) or Drab (https://tg.pl/drab) are what you are looking for. Search elixirforums for LiveView or Drab for more info - there is plenty around, and some great samples

2 Likes

I have just dropped Pjax and everything almost worked perfectly. The only change I needed was to add this to the JS file:

import Pjax from 'pjax'
import LiveSocket from 'phoenix_live_view'

const pjax = new Pjax({
    cacheBust: true
})
const live = new LiveSocket('/live')
live.connect()

document.addEventListener('pjax:send', () => live.destroyAllViews())
document.addEventListener('pjax:complete', () => live.connect())

To make it work with Phoenix LiveSocket.

1 Like

Pretty much exactly the same way you’d do it in Rails; use put_layout(conn, false) in your controller’s render pipeline, render the partial, and use Javascript to handle the response correctly.

There’s even a phoenix_ujs NPM package that provides most of the features from Rails’ UJS, notably data-remote that automatically submits forms via AJAX.

1 Like