htmx #htmx-general

Join Discord

freezing-sugar-15438

01/20/2023, 8:57 PM

Thanks! 🙂

mysterious-toddler-20573

01/20/2023, 9:06 PM

https://codepen.io/1cg/pen/gOjoXEK?editors=1010

mysterious-toddler-20573

01/20/2023, 9:06 PM

needs some work (ctrl-click is caught by the browser, need to look into how to overcome that and the selection state isn't perfect) but that's the idea

freezing-sugar-15438

01/20/2023, 9:07 PM

75,000 thanks to you, kind and smart sir! 🙂 🙂

blue-toothbrush-6988

01/20/2023, 9:30 PM

Greetings, as last time @adventurous-ocean-93733 helped me i would like to ask another question 😄

Copy code

<input id="search" type="search"
                    name="search" class="form-control float-right" placeholder="Search"
                    hx-post="{% url 'stock:search' %}"
                    hx-trigger="keyup changed delay:500ms, search" 
                    hx-target="#search-results"
                    hx-include="[name='search']" 
                    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                    >

blue-toothbrush-6988

01/20/2023, 9:31 PM

Copy code

<div class="row">
                    <div class="col-sm">
                      {% for hwarehouse in warehouse %}
               
                  
                 
                      <div class="custom-control custom-checkbox">
                       <input class="custom-control-input" type="checkbox" id="customCheckbox{{ hwarehouse.id }}" value="option1" checked>
                       <label for="customCheckbox{{ hwarehouse.id }}" class="custom-control-label">{{ hwarehouse.name }}</label>
                     </div> 
                     {% if forloop.counter|divisibleby:5 %}
                     
                     </div>
                     <div class="col-sm">
                   {% endif %}

                     {% endfor %}
                    </div>
    
                  </div>

blue-toothbrush-6988

01/20/2023, 9:31 PM

What is the best way to send if the generated checkboxes are checked or not with hx-include?

blue-toothbrush-6988

01/20/2023, 9:31 PM

❤️ 😛

late-king-98305

01/20/2023, 9:48 PM

If you are inside a form,

hx-post

will include all

input

elements. They will be submitted with their

name

attribute. If they are checked, the server-side value will be the

value

attribute from the checkbox, or "on" if there is a checkbox without a value. If they are not checked, they will not be present at all. I'm not sure what you're using on the server side, but the name can be structured so that you can access the checkboxes as an array. For PHP, you'd end the name with "[]"; for ASP.NET, you'll have to provide an index ("[0]", "[1]", etc.) and filter out the nulls. If you're not inside a

form

(and don't want to be... LOL), I'm not sure

hx-include

takes a query selector. If it does, though, the syntax to get all

input

elements whose

id

attributes start with "customCheckbox" would be

input[id^=customCheckbox]

. I've never done that, so I don't know what it would look like server-side.

late-king-98305

01/20/2023, 9:49 PM

Here's the query selector reference - lots of fun stuff there! https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

blue-toothbrush-6988

01/20/2023, 9:54 PM

@late-king-98305 Thank you for pointers,will try the input but the css selector, ufff looks harder than i thought. Will take a look on both <3. I am using Django for backend.

late-king-98305

01/20/2023, 10:02 PM

FWIW, it does look like you use "[]" as a name suffix, then use

request.POST.getList()

to access them as an array. https://stackoverflow.com/questions/44628251/how-to-get-array-of-values-from-checkbox-form-django

late-king-98305

01/20/2023, 10:05 PM

The "just put it in a form" method works well too. The linked example is a Liquid template from one of my projects. It lists pages, and allows the user to delete them. The list itself is inside a form (line 9), where I render the anti-CSRF stuff, and I POST to a URL with the ID for the page to be deleted (lines 33-37); so, server-side, I get the CSRF token from the form and the ID from the URL. https://github.com/bit-badger/myWebLog/blob/v2.0-rc2/src/admin-theme/page-list.liquid

adventurous-ocean-93733

01/20/2023, 10:06 PM

If you're happy putting in a

<form>

then as @late-king-98305 said, this code would work:

Copy code

<input id="search" type="search"
  name="search" class="form-control float-right" placeholder="Search"
  hx-post="{% url 'stock:search' %}"
  hx-trigger="keyup changed delay:500ms, search" 
  hx-target="#search-results"
  hx-include="[name='search']" 
  hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
  >
  <div class="row">
    <div class="col-sm">
      {% for hwarehouse in warehouse %}
        <div class="custom-control custom-checkbox">
         <input class="custom-control-input" type="checkbox" name="yourCheckBox" id="customCheckbox{{ hwarehouse.id }}" value="option1" checked>
         <label for="customCheckbox{{ hwarehouse.id }}" class="custom-control-label">{{ hwarehouse.name }}</label>
       </div> 
       {% if forloop.counter|divisibleby:5 %}
           
           </div>
           <div class="col-sm">
       {% endif %}
     {% endfor %}
    </div>
  </div>

And the page you're submitting to can access all the checked options within the param

yourCheckBox

brave-dog-98297

01/20/2023, 10:07 PM

This is what I do, work well

blue-toothbrush-6988

01/20/2023, 10:09 PM

Thank you guyz ❤️

lemon-carpenter-66863

01/21/2023, 10:26 PM

Just a quick interjection here: I wonder why there isn't a Hyperview thread on this discord. Granted, it's not part of HTMX as such but it was inspired by it and as such could be very valuable here (as far as I know they don"/ have their own discord server, though do correct me if I'm wrong)

mysterious-toddler-20573

01/21/2023, 11:25 PM

@gray-oyster-51537 👆

flaky-energy-47039

01/21/2023, 11:42 PM

I have a block of html inserted by a non-htmx javascript code; the html includes buttons with htmx & hyperscript (will post it below). The html looks exaclty like the other code on the page. The other buttons work; however, the buttons inserted by non-htmx javascript do not fire htmx events and I see in dev tools that there are no js events attached to those buttons. *Is there any way to initialize the code so that events get attached to the buttons? * The button code:

Copy code

<button class="btn btn-sm btn-outline-success" 
    hx-get="http://localhost:8080/meetings/declare_partic/19/1" 
    _="on htmx:confirm(issueRequest)
    halt the event
    call Swal.fire({
        title: 'Registravimosi patvirtinimas', 
        text:'Norite registruotis 2023-01-27 d. renginiui?', 
        icon:'question', 
        showCancelButton:true
    })
    if result.isConfirmed issueRequest()" hx-target="#meeting_19" hx-swap="outerHTML swap:0.5s">
    <i class="bi bi-person-plus-fill"></i> Dalyvausiu
</button>

mysterious-toddler-20573

01/21/2023, 11:55 PM

Copy code

js
htmx.process()

the inserted html: https://htmx.org/api/#process

flaky-energy-47039

01/21/2023, 11:56 PM

found it a minute ago 🙂 Thanks anyway @mysterious-toddler-20573

flaky-energy-47039

01/22/2023, 8:16 AM

ha, it works half-way; it does process htmx, but does not process the hyperscript, so the _="..." code does not work (the event does not get halted to ask for confirmation). Cannot find a .process equivalent in hyperscript...

ripe-action-67367

01/22/2023, 8:22 AM

processNode

flaky-energy-47039

01/22/2023, 9:00 AM

Thanks! Strange that it is not documented on hyperscript website. Will try it out.

billions-easter-81130

01/22/2023, 7:18 PM

I have a question with regards to issue #379 being fixed (https://github.com/bigskysoftware/htmx/issues/379): Does "fixed" mean that

<script src="">

references are now properly loaded, but some weird stuff can still happen due to the loading/execution of external

.js

files happening aynchronously? Or should

60a6717

actually fix the issue entirely and external .js files should be loaded and executed in a synchronous fashion?

billions-easter-81130

01/22/2023, 7:24 PM

.js

files not being loaded and executed before moving on to parse the rest of the document (i.e. the browser effectively acting as if the

<script src="">

-tag contained

async

defer

if visiting a boosted link) would explain some problems I've not been able to fix for quite some time.

gray-morning-3453

01/23/2023, 6:27 AM

I am using this code to submit a form. And upon success I am setting HX-Trigger on server side and the headers are being recieved by the client perfectly. The problem is the second line of the code

mainModalClose()

which is using remove() to remove the modal from the DOM. If I dont do this, the event is handled as desired, but when the modal is removed the event is getting lost. The event handler is connected to the body element and works in other situation.

Copy code

function submitForm(){
            htmx.ajax('POST', '{% url "edit_event" %}', {target:'body', swap: 'beforeend', source: form});
            mainModalClose();
        }

I thought when the headers are received by the client the event would bubble upto the body but it seems if the modal element which is sending the POST is not present something else happens.

flaky-energy-47039

01/23/2023, 2:36 PM

When using boosted links and hx-push-url in htmx, is there a mechanism to update the contents of the tag? Since different pages do usually have different titles...

adventurous-ocean-93733

01/23/2023, 2:51 PM

When you use

hx-boost

it processes the

title

tag too

mysterious-toddler-20573

01/23/2023, 3:42 PM

yes, unfortunately there isn't a good way to stop rendering the way that normal scripts would. Sorry about that.