英文:
How to change hx-get value dynamically?
问题
我有一个按钮，它打开一个位于some_template.html中的对话框：
<button @click="open = !open"
id="btn_id"
hx-get="/some_url/"
hx-trigger="click"
hx-swap="outerHTML">
</button>
然后，我有一个包含some_template.html的another_template.html。
在another_template.html中，我处理了按钮点击事件：
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('dialog', () => ({
handleButtonClick(id) {
console.log(id); // 打印预期的id
const button = document.getElementById('btn_id');
const url = `/some_url/${id}`;
button.setAttribute('hx-get', url);
console.log(button.attributes); // 打印更新后包含id的`hx-get`
button.click();
}
}));
});
</script>
对话框正确打开，这意味着button.click()正常工作。主要问题在于按钮中的hx-get没有被更新，也就是说，它没有与id相关联，仍然在没有id的情况下处理请求，使用最初在按钮中定义的内容：hx-get="/some_url/"。
英文:
I have a button which opens a dialog located in some_template.html:
<button @click="open = !open"
id="btn_id"
hx-get="/some_url/"
hx-trigger="click"
hx-swap="outerHTML">
</button>
Then I have another_template.html which includes some_template.html
In another_template.html I am handling a button click:
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('dialog', () => ({
handleButtonClick(id) {
console.log(id); // prints the expected id correctly
const button = document.getElementById('btn_id');
const url = `/some_url/${id}`;
button.setAttribute('hx-get', url);
console.log(button.attributes); // prints the updated `hx-get` with the id included
button.click();
}
}));
});
</script>
The dialog is opening correctly which means the button.click() is working properly.
The main problem is that the hx-get in the button is not being updated, i.e., there is no id associated with it, and it still processes the request without it, using what was initially defined in the button: hx-get="/some_url/".
答案1
得分: 0
问题是我在更改按钮属性后没有使用html.process()：
英文:
The problem is that I was not using html.process() after changing the button's attributes:
答案2
得分: 0
一旦一个节点被htmx处理过，hx-get属性会被内部存储起来，即使你在元素中修改它也不会有任何影响，正如你已经注意到的那样。
改变它的一种方式是使用htmx:configRequest事件。例如：
button.addEventListener('htmx:configRequest', (event) => {
event.detail.path = url;
});
你可以将监听器添加到窗口，并让它检查是否存在data-htmx-url属性，如果存在则使用它，否则保持路径不变。然后在你当前的代码中，在按钮上设置一个data-htmx-url属性，其中包含新的URL。
window.addEventListener('htmx:configRequest', (event) => {
if (event.srcElement.getAttribute('data-htmx-url')) {
event.detail.path = event.srcElement.getAttribute('data-htmx-url');
}
});
最后，你可以结合htmx:afterRequest事件，在请求完成时移除该属性。
window.addEventListener('htmx:afterRequest', (event) => {
event.detail.elt.removeAttribute('data-htmx-url');
});
英文:
Once a node has been processed by htmx, the hx-get attribute is stored internally and changing it in the element won't make a difference, as you've already noticed.
One way to change it is by using the htmx:configRequest event. For example:
button.addEventListener('htmx:configRequest', (event) => {
event.detail.path = url;
});
You can add the listener to the window and have it check for the presence of a data-htmx-url attribute and use that if present, otherwise leave the path untouched. Then in your current code set a data-htmx-url attribute on the button with the new url.
window.addEventListener('htmx:configRequest', (event) => {
if (event.srcElement.getAttribute('data-htmx-url)) {
event.detail.path = event.srcElement.getAttribute('data-htmx-url);
}
});
Finally, you could combine this with the htmx:afterRequest to remove the attribute when the request is done.
window.addEventListener('htmx:afterRequest', (event) => {
event.detail.elt.removeAttribute('data-htmx-url);
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论