https://htmx.org logo
Powered by
# htmx-general
  • s
    I found a solution to the boostrap datepicker. But it is not nice. Ideas how to avoid the "manual" dispatching via 
    onchange="..."
    are welcome: https://stackoverflow.com/a/67686292/633961
  • u
  • m
    Is there a way to use the Bootstrap modal without using hyperscript and that custom js? https://htmx.org/examples/modal-bootstrap/
  • m
    by the way, the demo stops working after i close the modal (can't click in any link)
  • m
    the modal backdrop should get a display: none
  • g
    i'm gonna build conways' game of life via htmx. 😄
  • u
    Hi all. I have a question about scoping. How can you execute a function in 
    <script>
    that was fetched with htmx?
  • m
    @User ☝️
  • g
    Grrr
  • m
    script tags should be evaluated the normal way and functions defined at the top level should be available globally
  • m
    😑 thank you for ur service
  • u
    Thank you. Unfortunately they are not.
  • u
    I am on 1.1.0
  • m
    🤔
  • u
    Is this supported?
  • m
    that's a pretty old version of htmx, let me look at the release notes
  • u
    I was looking at it now. There is a commit on Dec changing 
    eval
    to 
    Function
    which found some relevant issues about the scope.
  • m
    ahhhh
  • u
    But the 1.1.0 release was on Jan 21
  • m
    lol, yeah
  • m
    that was the break... we pulled out eval because some people consider it unsafe
  • b
    Nope. No need to use a bunch of js or _hyperscript for Bootstrap modals. Here's an example chunk modified from https://github.com/jacklinke/django-htmx-todo-list/ edit: this example may not meet the intent of @User question, since it redirects to the new object detail page on form submit instead of just adding the new item to the currently displayed list.
  • m
    but 
    <script>
    tags should probably be eval'd no matter what
  • b
    Copy code
    html
<div class="col-3 text-right">
    <!-- Button to trigger modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#createModal">
        <i class="fas fa-plus"></i>
        Create Task List
    </button>

    <!-- Modal -->
    <div class="modal fade" id="createModal" tabindex="-1" aria-labelledby="createModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title" id="createModalLabel">Create Task List</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>

                <div class="modal-body">
                    <div id="tasker-list-form">
                        <form>
                            <div class="form-row mb-2">
                                <div class="col">
                                    {% crispy form %}
                                    <div class="invalid-feedback">
                                        {{ form.name.errors }}
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="col">
                                    <button class="btn btn-primary" hx-post="{% url 'tasklist-create' %}" hx-swap="outerHTML" hx-target="#tasker-list-form">Create</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</div>
  • b
    This example uses django forms, but if you don't use django or don't need a form, the concept is still the same.
  • g
    You could probably use Bootstraps own JS library to handle the “remove” animation. The trouble is in telling bootstrap that a new element has been added to the page. I didn’t see a simple way of doing that and thought it would just be easier to rewrite that one section from scratch.
  • g
    Sorry about the bug, though. It’s a simple fix 🥸
  • u
    I know the 
    <script>
    is eval'd because I added 
    console.log("This runs")
    and I can see it in the console
  • m
    yeah
  • b
    The example app I mentioned may not meet the intent of @User question, since it redirects to the new object detail page on form submit instead of just adding the new item to the currently displayed list.
1...275276277...1146Latest