https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • r
    and here its ref=table or ref='table' ?
  • g
    both are the same
  • g
    in html, quotes are optional if the value is one word
  • r
    okok
  • c
    Sorry to bother you again on that, but I can't find the answer for: Is there a JS event to know when hx-boost is "done" ?
  • r
    but then it does not work it post nothing ... @gorgeous-airport-54386
  • r
    when I click on a table line it doesn't post anything
  • g
    does it change anything when you remove 
    onclick="myFunction()"
    ?
  • r
    no it doesn't change anything
  • g
    i don't know what's happening then, maybe someone else can help
  • r
    I show you my code maybe I forgot something
    Copy code
    html
<table ref='table' id="myTable" class="table-1">
                      <thead>
                        <tr>
                          <th></th>
                          <th>N° de commande</th>
                          <th>Type de service</th>
                          <th>Prix</th>
                          <th>Statut</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr v-for="post in HubriseOrder" style="border-left: solid 5px; border-color:#248b21;" class="btnSelect tr-commande contenttableforpopup" v-bind:hx-post="'{{ request.path }}?id='+ post.id" hx-target=".modal-body" onclick="myFunction()">
                          <td data-label="">
                            <img class="icon-commande"
                                 v-bind:src="'{% get_static_prefix %}apc/images/' + post.pictureplatform">
                          </td>
                          <td data-label="N° de commande">[[post.id_order]]</td>
                          <td data-label="Type de service">[[post.service_type]]</td>
                          <td data-label="Prix">[[post.amount]]</td>
                        </tbody>
                      </table>
  • r
    and js 😅
    Copy code
    js

                vueApp = new Vue({
                  el: "#app",
                  delimiters: ["[[", "]]"],
                  data() {
                    return {
                      HubriseOrder: [],
                    };
                  },
                  watch: {
                    HubriseOrder(newOrder, oldOrder) {
                      htmx.process(this.$refs.table);
                    }
                  },
                });
                              
                                    var ws = new WebSocket("wss://95a8-2a01-e0a-2bd-f2b0-b1d9-3e81-cb8d-dc59.eu.ngrok.io/ws/");
                              
                                    ws.onopen = function (e) {
                                      ws.send(
                                        JSON.stringify({
                                          action: "list",
                                          request_id: new Date().getTime(),
                                        })
                                      );
                                    };
                              
                                    ws.onmessage = function (e) {
                                      allData = JSON.parse(e.data);
                                      if (allData.action === "list") {
                                        vueApp.$data.HubriseOrder = allData.data;
                                        vueApp.$forceUpdate();
                                      } else if (allData.action === "update") {
                                        vueApp.$data.HubriseOrder.push(allData.data);
                                      }
                                    };
  • t
    may want to make a thread to troubleshoot this particular issue
  • r
    I will try to find a solution
    c
    • 2
    • 2
  • r
    Thanks anyway @gorgeous-airport-54386
  • c
    I will try to find a solution
  • f
    How could I achieve this with HTMX ? Specifically concatenating the value of an input to the URL?
  • f
    Copy code
    document.querySelector('#room-name-submit').onclick = function(e) {
            var roomName = document.querySelector('#room-name-input').value;
            window.location.pathname = '/chat/' + roomName + '/';
        };
  • c
    vimdiesel your javascript is trying to dynamically set the path in the brower address bar based on the value of the input field
  • c
    htmx is mainly used for making server requests so what your script is trying to achieve is best done in javascript or hyperscript
  • g
    one option: have a server endpoint that accepts the room name as a query param and redirects to the room url
  • g
    hx-get="/chat/find-room-by-name"
    -> 
    /chat/find-room-by-name?room-name=myroom
    redirects to 
    /chat/myroom
  • f
    thanks
  • f
    I might be missing something obvious, but probably due to my lack of js knowledge, I assumed that I could simply return a custom event through an 
    HX-Trigger
    header and handle it in hyperscript, but that doesn't seem to be the case. When trying the following:
    Copy code
    html
<tr scope="row" _="on deletedContainer-11 then remove me" id="container-11">
              ...
            </tr>
    I'm getting the following error:
    Copy code
    "Expected commandList

on deletedContainer-11 then remove me
                        ^^
    Any ideas what the issue could be here? I couldn't find any example that covered this case.
  • m
    remove that "then"
  • m
    no leading "then"
  • m
    "then" is like a semi-colon in sane languages
  • m
  • f
    Oh, I added it out of desperation because I saw an example that had it, but without it, I'm getting:
    Copy code
    "
"Expected commandList

on deletedContainer-11 remove me
                   ^^
  • f
    What I did not see is an example using a custom event, so I'm wondering if I'm not actually meant to use custom events?
1...891892893...1146Latest