https://htmx.org logo
Powered by
# htmx-general
  • f
    Any tip on the simplest "heelo world" for htmx integration
  • f
    I will have to look at how I followed the instrcutions for pulling those files in the first place
  • f
    But, in my defense, I have a broken leg, and when I started all this htmx integration, I was on some good pills!
  • g
    Yes. Make a page with a link (labeled "hello world" if you must) that has an hx-get="/other page" that will load the next page when you click the link.
  • g
    Well done! The best I've got is to fire up VS Code after my third glass of wine. I like your setup much better.
  • f
    1 week+ in now, so I do't get the same pills! So no more excuses
  • f
    But for sure the content of teh new files is very different, problem being I would not recognise javascript if it run me over in the street
  • f
    So I definately had the wrong content, and assuming it was a page i saved as, rather than raw file content
  • f
    and I now see my "every 10s" route getting tickled, so I have somethign to play with, thanks!
  • f
    correction, call being made, but route not found, but sure that will be a typo, I have trees to shake
  • g
    Awesome!
  • f
    and just like that my jinja_partials table replace is working with polling.
  • f
    Now this is not the desired end state, but I hae a little more discovery to do first.
  • f
    The main page refresh is gone now, and it looks smooth, I have to try a few more things first though
  • f
    Beofre working out why this is "not good enough"
  • f
    as well as adding to a more complex underlying table when you drill down
  • f
    before I get into "but what I really want"
  • f
    anyway, thanks all, I have at least another days worth to fumble through, and I appreciate any support at this time of year!
  • f
    OK, question for tomorrow. Now I have my table updating happily with background polling, I now have to worry about other buttons on the page that would lead to a full page refresh, now I just want them to do a thing on the server side, and allow a normal scheduled page update to deal with showing things have changed.
  • f
    So I no longer want my button press to return a redirect to the existing page. What is the correct way to implement this more formal behaviour, do I need to turn the button itself into some form of htmx element, or other.
  • f
    actually that sounds quite reasonable, return a table partial, and have the button comsume that response into the table id.
  • f
    I will have to see if there are examples of this...
  • f
    anyway, got that half working, will spin down for tonight, have a good one out there
  • p
    Anybody has an idea how I can implement review system with htmx? I mean where the user click on the numbers of stars they want to give a product then the index of the star would be send to the backend for processing. I don't know how to start
  • s
    Maybe this will get you started:
  • s
    Copy code
    <span id="contact_stars">
    <i 
        {% if contact.stars == 1 or contact.stars == 2 or contact.stars == 3 %}style="color:#ffd000;" class="fas fa-star"{% else %} class="far fa-star"{% endif %}
        hx-post="{% url 'add_stars' contact.pk 1 %}"
        hx-target="#contact_stars"
        hx-swap="innerHTML"
        hx-trigger="click">
    </i>
    <i 
        {% if contact.stars == 2 or contact.stars == 3 %}style="color:#ffd000;" class="fas fa-star"{% else %} class="far fa-star"{% endif %}
        hx-post="{% url 'add_stars' contact.pk 2 %}"
        hx-target="#contact_stars"
        hx-swap="innerHTML"
        hx-trigger="click">
    </i>    
    <i 
        {% if contact.stars == 3 %}style="color:#ffd000;" class="fas fa-star"{% else %} class="far fa-star"{% endif %}
        hx-post="{% url 'add_stars' contact.pk 3 %}"
        hx-target="#contact_stars"
        hx-swap="innerHTML"
        hx-trigger="click">
    </i>
</span>
  • u
    You got the code working as I posted it? With the double quotes? I'm using the LiveServer extension within VSCode and I don't receive any server-side escaping.
  • u
    From what I understand the docs say the payload will be text by default. If we want JSON which this request is, then we have to add: with method:"GET" as json I can return the payload as text, but when I mark it as json...no go Can you test the following:
  • u
    Copy code
    <button _='on click fetch https://swapi.dev/api/planets/1/ with method:"GET" as json then put it into #planet.innerHTML'>
    Get First Star Wars Planet
    </button>

    </br></br>
    <div id="planet"></div>
    </br></br>
  • m
    yep, one sec
1...496497498...1146Latest