<a target="_blank" rel="noopener noreferrer" href="https://private-user-images.githubu

Hi <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="

how the response looks like about alpine-ajax HOT 4 CLOSED

imacrayon commented on July 22, 2024

how the response looks like

from alpine-ajax.

Comments (4)

imacrayon commented on July 22, 2024

Hey, thanks for the question. The response must contain valid HTML and the two IDs that you're targeting.

So you could return the exact same HTML markup with a new comment and updated count like this:

<h2>Comments (<span id="comments_count">2</span>)</h2>
<ul id="comments">
  <li>Comment #1</li>
  <li>Comment #2</li>
</ul>
<h2 id="comment_form_title">Post a Comment</h2>
<form x-target="comments comments_count" method="post" action="/comment" aria-labelledby="comment_form_title">
  <input name="comment" required />
  <button>Submit</button>
</form>

or you could return only the elements you targeted:

<h2>Comments (<span id="comments_count">2</span>)</h2>
<ul id="comments">
  <li>Comment #1</li>
  <li>Comment #2</li>
</ul>

or you could return a complete HTML document:

<!DOCTYPE html>
<html>
  <head>
    <title>Post a comment</title>
  </head>
  <body>
    <h1>Post a comment</h1>
    <h2>Comments (<span id="comments_count">2</span>)</h2>
    <ul id="comments">
      <li>Comment #1</li>
      <li>Comment #2</li>
    </ul>
    <h2 id="comment_form_title">Post a Comment</h2>
    <form x-target="comments comments_count" method="post" action="/comment" aria-labelledby="comment_form_title">
      <input name="comment" required />
      <button>Submit</button>
    </form>
  </body>
</html>

All these options will work, the only thing that matters is that there is a id="comments" element and a id="comments_count" element in the response.

Let me know if that clears things up and I'll update the documentation with an example response.

from alpine-ajax.

ericxin1982 commented on July 22, 2024

Hi @imacrayon

I prefer this way, then the response txt would be both together right?
So x-target would separately place two elements in right target anchor, that is what I am cuious.

If the response txt is just for one element, and target is one location anchor, I do not have this question.
I am just curious about the detail whether need to split them, or if no, how it can place the right element from many elements to right anchor.

The tutorial just mentioned it has this multiple target feature.

Thanks for your help. Waiting for your instructions.

Eric Xin

from alpine-ajax.

imacrayon commented on July 22, 2024

how it can place the right element from many elements to right anchor.

All the elements have to exist on the page, before the request so that Alpine AJAX knows where to place them. So if you use x-target="comments comments_count" and your HTML looks like this (no comments_count element):

<h2>Comments (0)</h2>
<ul id="comments">
</ul>
<form x-target="comments comments_count">...</form>

You'll get an error in the console because id="comments_count" doesn't exist on the page.

Here's a CodePen of the comment form you can explore

from alpine-ajax.

ericxin1982 commented on July 22, 2024

Thanks so much, so the library would handle the ID anchor respectively, so I can render all elements with different ID, then rest of them the library would handle.

from alpine-ajax.

how the response looks like about alpine-ajax HOT 4 CLOSED

Comments (4)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent