CODEWITHSUNDEEP
flaskhtmx
atahualpa
atahualpa

Reputation: 23

Can htmx open another page and trigger an hx-swap into an hx-target on that page?

This is my first question so please tell me if I'm doing anything wrong:

Using htmx, how can I open another page and trigger an htmx swap into a target on that page?

I have a page "resources.html"

That page has an hx-target, a tbody,

#display-a-or-b

"A" is loaded automatically into the tbody because the hx-trigger for "A" is load, click.

<button 
    hx-get="/data-for-a"
    hx-target="#display-a-or-b" 
    hx-trigger="load, click" 
    hx-swap="innerHTML">
        Filling this with A
</button>

    <tbody id="display-a-or-b">
    </tbody>

Ihere is a second button to load "B"

<button 
    hx-get="/data-for-b"
    hx-target="#display-a-or-b" 
    hx-trigger="click" 
    hx-swap="innerHTML">
        Filling this with B
</button>

This is a flask app.

Here's the problem: I have a second page "newsletters.html"

I want to have a link on that page, that takes the user to the page "resources.html" but which fills the tbody "display-a-or-b" with "data-for-b"

However, the defaut fill is with "data-for-a" because the trigger for that is load, click.

Is it possible in htmx to open "resources.html" from a link on "newsletters.html" and at the same time fill the hx-target at "resources.html#display-a-or-b" with "data-for-b" rather than the default load of "data-for-a"?

Thanks very much.

The closest I could come up with as an htmx newbie is this:

Button on newsletter.html

<button 
    hx-get="/data-for-b"
    hx-target="resources.html#display-a-or-b" 
    hx-trigger="click" 
    hx-swap="innerHTML">
        Filling this with B
</button>

There is no response to my click.

I understand that there is such a thing as HX-Redirect, but how can I do a redirect to a new page and a swap to that page also?

The examples I have read have to do with code and response headers, that do not seem to be relevant.

Upvotes: 0

Views: 1617

Answers (2)

atahualpa
atahualpa

Reputation: 23

Thanks to @Gio, here's how I did it, using jinja to swap hx-trigger buttons on a form. In effect, overriding the default form loading.

On the page newsletter.html, following his example ...

<a href="{{ url_for('resources') }}?data_asked=load_b">Return to B</a>

Then in the code, with the two buttons getting different tx-trigger values depending on the query string ...

@app.route('/resources')
def resources():
    data_asked = request.args.get('data_asked')
    if data_asked == "load_b":
        who_loads1 = "click"            # hx-trigger for button for A
        who_loads2 = "load, click"      # hx-trigger for button for B, switching the default to load
    else:
        who_loads1 = "load, click"      # button for A, the default is to load
        who_loads2 = "click"            # button for B
                
  return render_template("/resources.html",
                           who_loads1=who_loads1,
                           who_loads2=who_loads2)

Then on the page resources.html

<button 
    hx-get="/data-for-a"
    hx-target="#display-a-or-b" 
    hx-trigger="{{ who_loads1 }}" 
    hx-swap="innerHTML">
        Filling this with A
</button>

<button 
    hx-get="/data-for-b"
    hx-target="#display-a-or-b" 
    hx-trigger="{{ who_loads2 }}" 
    hx-swap="innerHTML">
        Filling this with B
</button>

Upvotes: 0

Gio
Gio

Reputation: 104

If you are using Flask, an easy way to do this would be to use jinja to help.

<!-- resources.html -->
<button 
hx-get="/{{ link }}"
hx-target="#display" 
hx-trigger="click" 
hx-swap="innerHTML">
    # button text
</button>

and then in your views you can load the page based on the parameter:

# resources route
@app.route('/')
def index():
    data_asked = request.args.get('data_asked', 'a')
    if data_asked== 'b':
        link = 'data_for_b'
    else:
        link = 'data_for_a'
    return render_template('resources.html', link=link)

when you call it by default with no arguments, it will load the hx-get tag as /data_for_a. If you want to call it as /data_for_b, you simply pass a GET parameter in you newsletter page when calling the route (?data=b).

There are more than one way to implement this, but the logic remains. Let me know if this response was helpful and if it worked well for you!

Upvotes: 2

Related Questions