hudx

Control multiple ajax calls and style changes via html attributes in a cli like manner.

hudx is heavily inspired by htmx and relies on the power of hypermedia. Htmx is awesome!!!

This small (200loc) package was created to add complex behaviour to a small widget for an existing website, which I was not able to achive easily with htmx.

Be warned: this is a toy project, not optimized for heavy interactions.

1. Insert response from the server:

hudx
hdx: 'event' 'method' 'url' 'target' 'position'

'event': click, load, focus, input,... full list
'method': GET
'url': any url responding with html
'target': this, css ID selector
'position': outerHTML, innerHTML, beforebegin, beforeend, afterbegin, afterend

1.1. Insert single element:

Presss the update button.

Update

1.2. Insert multiple elements:

Hover and presss the update button.

target 1

target 2

target 3

Update

2. Delete elements from the page:

Note that this action will only remove elements from the page wihtout posting anything to the server. If you want send data please read: Send. Required that the server responds with an empty body.

hudx
hdx: 'event' 'method' 'url' 'target' 'position'

'event': click, load, focus, input,... full list
'method': GET
'url': any url responding with empty body
'target': this, css ID selector
'position': outerHTML, innerHTML

2.1. Delete elements:

Presss the update button.

target 1

target 2

Update

3. Send data to the server and insert the response:

Data contains the name and value attributes of input tags within the form elements.

hudx
hdx: 'event' 'method' 'url' 'target' 'position' 'form element 1' 'form element 2' ...

'event': click, load, focus, input,... full list
'method': POST, PUT, DELETE,... full list
'url': any url responding with html or empty body
'target': this, css ID selector
'position': outerHTML, innerHTML, beforebegin, beforeend, afterbegin, afterend
'form element': css ID selector of a form element

3.1. Send single form:

Fill the form and presss the send button.

Full name: Email:

Contacts:

Send

3.2. Send multiple forms:

Fill the forms and presss the send button.

Name:

First name: Last name:

Contact:

Phone number: Email:

Send

4. Style callbacks for request/response:

hudx
hdx: 'event' 'method' 'url' 'target' 'position' 'form element 1' 'form element 2' ...

'event': click, load, focus, input,... full list
'method': GET, POST, PUT, DELETE,... full list
'url': any url responding with html or empty body
'target': this, css ID selector
'position': outerHTML, innerHTML, beforebegin, beforeend, afterbegin, afterend
'form element': css ID selector of a form element

hds-r: 'targets' 'action' 'classname 1' 'classname 2' ...
hds-s: 'targets' 'action' 'classname 1' 'classname 2' ...
hds-er: 'targets' 'action' 'classname 1' 'classname 2' ...
hds-ec: 'targets' 'action' 'classname 1' 'classname 2' ...

'targets': css selector
'action': add, remove, toggle
'classname': name of a class

4.1. Style elements on request initiated:

Presss the update button.

request initiated

request initiated

request initiated

request initiated 2

Update

4.2. Style elements on success received:

Presss the update button and wait for the slow response.

success received

success received

success received

success received 2

Update

4.3. Style elements on error received:

Presss the update button and wait for the slow response.

error received

error received

error received

error received 2

Update

4.4. Style elements on connection error:

Presss the update button.
Please note, the error here is simulated/faked, real connection error is not immediate.

error on connection

error on connection

error on connection

error on connection 2

Update

5. Style elements on DOM events:

hudx
hdsx: 'event' 'target' 'action' 'classname 1' 'classname 2' ...

'event': click, load, focus, input,... full list
'target': this, css selector
'action': add, remove, toggle
'classname': name of a class

5.1. Style elements:

Presss the toggle button.

hidden?

green on hover

hidden?

green box?

Toggle

6. More examples:

6.1. Lazy loading image:

Disable cache and refresh the page.
Image loading takes 2 seconds.

6.2. Edit customer data:

Press the edit button.

Name: John James
Email: johnjames@email.com

Edit

6.3. Modal example:

Press the open button.

Open