Ajax response to target

[eydun]

Hello,

Is it possible to make an ajax-request with Naja, and display the result in a target-element on page? (like hx-target in htmx)

[jiripudil]

Hi, I'm afraid that's not possible, at least not in the way htmx does that. Naja is essentially a client to Nette Framework's ajax solution: it is hardwired to accept a JSON response, and replace snippets that are sent from the server – which is Nette's solution for what you're asking.

[eydun]

Thank you for the reply!

I looked a bit at the docs. As I understand this should be the method to use:

naja.makeRequest(method, url)
    .then((payload) => { /* process payload */ })
    .catch((error) => { /* handle error */ });

So if the is a GET-request, then it becomes:

naja.makeRequest('GET', '/contacts') //to fetch a list of contacts
    .then((payload) => { /* process payload */ })
    .catch((error) => { /* handle error */ });

Then as I understand, then the server (Nette) responds with a json_encoded-response.

How does Naja then handle the payload from the server, to update an element on the page?

[jiripudil]

Nette has a whole server-side thing for this, but the gist is that it sends a response like this:

{
  "snippets": {
    "snippet--id": "html content"
  }
}

Naja then finds the #snippet--id element and replaces (or appends/prepends) its content with what's in the payload.

[eydun]

Thanks, I got it working now! I thought I had to write some javascript-handler to make it work, but it works out of the box.

Naja seems to be Nette's hidden gem.