https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • r
    keyup[target.value.length > 2]
  • r
    or something like that
  • p
    Thanks, that works perfectly!
  • p
    The drawback I see now is that if you type something in the search box and then remove it again, there is no call to the backend (obviously), so the old search results remain in place.
  • m
    😅
  • m
    you could use an 
    ||
    with a backspace key filter as well
  • r
    made a demo of your template fragments essay in my new project (code named Pushup, not quite yet released) - https://pushup-htmx-template-fragments.fly.dev/demo (it works, click the button and watch the network requests in dev tools) we call template fragments "inline partials" in Pushup, but the concept is the same. you can see the source of the template markup here: https://pushup-htmx-template-fragments.fly.dev/view-source?route=/demo what's (possibly) interesting/different about template fragments in Pushup is they participate in the URL routing: if the page is at 
    /foo
    and it has an inline partial named 
    bar
    , then the contents of the partial independently, minus the surrounding page, can be requested at 
    /foo/bar
    . still early in the design phase, but roughly am happy with how they are evolving.
  • m
    Can you pr my essay with a link?
  • a
    I'm having trouble understanding HX-Trigger Response Headers
  • a
    Copy code
    <div hx-trigger="myEvent from:body" hx-get="/example"></div>
    When/How is this event triggered?
  • a
    Copy code
    html
  <input class="form-check-input" type="checkbox" name="checkbox" value="8" id="testtrigger" hx-trigger="myEvent">
  <label class="form-check-label" for="filteractivedecks"><small>test trigger</small> </label> 
  <div hx-trigger="myEvent from:body" hx-get="/example"></div>
  • a
    I tried something like this, but no good
  • m
    are you setting a response header 
    HX-Trigger
    ?
  • a
    well I'm trying to learn what that is
  • a
    I'm afraid this is one of those things where I don't know the basics, if you don't mind explaining what a response header is
  • a
    or I mean, how to use it here
  • a
    ok sorry, but real question now
  • a
    I have two hx-triggers but I care what order they work in
  • a
    I need the first one to resolve first because the second one includes values from the first one
  • a
    what's the best way to do this?
  • d
    Thanks! This seems a slight amount more branching logic serverside but seems best suited for experience. This Is your pager just included in #results then and not an oob update? That would make a good deal of sense
  • a
    I don't understand how to use 'after settle'
  • a
    I tried using hx-trigger queue:first/last but that didn't work either
  • a
    I put a delay of 500ms on the one I want to trigger last, and that does work
  • a
    I'm not sure why the queue first/last aren't working, that sounds like exactly what I need. They must not be in the same queue, even though they are triggering from the same event. I must be doing something wrong with that.
  • h
    Hello everyone... I'm a new htmx user. is it possible open modal, and use click-to-edit and after save then restore modal body with saved data?
  • h
    and this without close modal ?
  • r
    yes, it should absolutely be possible. Specifics depend on you implementation of modals, but generally you just need to return correct fragments from the server and set hx-target to your modal content element
  • h
    ok you know somewhere examples i open modal this
    Copy code
    <button
            hx-get="ajax/testi.php"
            hx-target="#modals-here"
            hx-trigger="click"
            class="btn btn-primary"
            _="on htmx:afterOnLoad wait 10ms then add .show to #modal then add .show to #modal-backdrop">Open Modal</button>
    Copy code
    <div id="modal-backdrop" class="modal-backdrop fade show" style="display:block;"></div>
<div id="modal" class="modal fade show" tabindex="-1" style="display:block;">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
            </div>
            <div class="modal-body">
                <p>Modal body text goes here.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeModal()">Close</button>
                <button type="button" class="btn btn-secondary" hx-get="ajax/testi.php">Save</button>
            </div>
        </div>
    </div>
</div>
    this save button open new modal.. can this something return only modal content current open modal
  • s
    @dry-pharmacist-51808 Yes, table + pager are together in the view template, no OOB swaps. The initial page AND htmx requests hit the same route and respond with the same view - header, main content area, footer, etc. It's the 
    hx-select
    and 
    hx-target
    that do the magic. I could add some other logic to be more selective to only render the table + pager, but it's slightly more effort for little gain in this instance.
    Copy code
    php
// ... (other page stuff like title)
//

$search = form_input([
    'type' => 'search',
    'class' => 'pure-input-rounded w-100 pure-input-light',
    'id' => 'search',
    'name' => 'search',
    'placeholder' => 'Search...',
    'hx-get' => current_url(),
    'hx-trigger' => 'keyup changed delay:75ms, search',
    'hx-target' => '#results',
    'hx-select' => '#results',
    'value' => esc($filter->search ?? ''),
]);
echo "<div class='pure-form mb-md'>{$search}</div>";

echo "<div id='results'>";
echo $table->render(true);
echo $pager->links();
echo "</div>";
1...819820821...1146Latest