Hoe kun je beste Ajax calls toepassen vanuit je eigen maatwerk extensie?

[pjdevries]

Hoe bouw je een formulier waarbij je via een Ajax call data leest en schrijft naar de database zonder op de frontend je scherm te verversen?

[pjdevries]

Dit zijn meerdere vragen in één en om die te kunnen beantwoorden is meer informatie nodig:

• Wat is het doel van de AJAX call?
• Wat bedoel je precies met "via een Ajax call data leest en schrijft naar de database"? Is dat één call die beiden doet? Zo ja, hoe moet ik dat dan zien?
• Welke data wil je in de frontend verversen als gevolg van een AJAX call?
• Hoe wordt de AJAX call geïnitieerd? D.m.v. een knop? Wanneer de gebruiker een formulierveld muteert?

AJAX request

Initiëren van een AJAX request

• In reactie op een formlierveld event zoals bijvoorbeeld change.
• Als gevolg van een button click of iets soortgelijks.
• Interceptie van het formulier submit event.

Versturen van een AJAX request

• Native met Joomla.request (zie /media/system/js/core.js).
• Fetch API gebruiken.
• 3rd party library gebruiken, zoals bijvoorbeeld Axios.

Verwerking van een AJAX request op de server

• Legacy:
  • JSON controller.
  • Joomla Ajax Interface (com_ajax).
• Webservice API: Adding an API to a Joomla Component
  • Joomla Api Specification
  • Joomla Web Services API 101 - Tokens, Testing and a Taste Test
  • Playing with the Joomla Web Services (API)
  • part 1
  • part 2
  • part 3
  • (https://github.com/alexandreelise/Manual/blob/patch-1/docs/general-concept/webservices.md)

Verwerken van een AJAX response in de browser

Mogelijke hulpmiddelen:

• https://htmx.org/
• https://alpinejs.dev/
• https://github.com/vuejs/petite-vue
• https://svelte.dev/
• https://vuejs.org/
• https://react.dev/
• https://angular.io/
• and many more...

[roland-d]

Native met Joomla.request zie /media/system/js/core.js

[pjdevries]

Een mogelijke frontend edit deeloplossing in com_pim geïmplementeerd, gebruik makend van de Webservice API en Alpine.js.