javascript - How to get "hx-params" from htmx post request? - Stack Overflow

admin管理员组

文章数量:1026989

I have a JavaScript function that generates buttons for seats and each seat gets an hx-post, hx-trigger, and hx-params. In the params, the seat id (for example "0-0" or "12-5") is generated. I want to get the params in the POST request /select_seat and print it. My code returns "None"

JS:

const seat = document.createElement("button");
seat.innerHTML = `${(c + 1) + (r * 6)} - ${(ic + 1) + (ir * 8)}`;
seat.setAttribute("hx-params", `${(c + 1) + (r * 6)}-${(ic + 1) + (ir * 8)}`);
seat.setAttribute("hx-trigger", 'click');
seat.setAttribute("hx-post", '/select_seat');

Htmx:

<button hx-params="1-1" hx-trigger="click" hx-post="/select_seat" class="seat">1 - 1</button>

Flask:

@app.route('/select_seat', methods=['POST'])
def your_route():
    print(request.data)  # Print the raw data received
    
    htmx_data = request.json
    
    if htmx_data:
        hx_params = htmx_data.get('params', {}).get('hx-params', None)
        
        if hx_params:
            print(hx_params)
            return jsonify({'status': 'success'})
    
    return jsonify({'status': 'error'})

See the Flask code above.

I have a JavaScript function that generates buttons for seats and each seat gets an hx-post, hx-trigger, and hx-params. In the params, the seat id (for example "0-0" or "12-5") is generated. I want to get the params in the POST request /select_seat and print it. My code returns "None"

JS:

const seat = document.createElement("button");
seat.innerHTML = `${(c + 1) + (r * 6)} - ${(ic + 1) + (ir * 8)}`;
seat.setAttribute("hx-params", `${(c + 1) + (r * 6)}-${(ic + 1) + (ir * 8)}`);
seat.setAttribute("hx-trigger", 'click');
seat.setAttribute("hx-post", '/select_seat');

Htmx:

<button hx-params="1-1" hx-trigger="click" hx-post="/select_seat" class="seat">1 - 1</button>

Flask:

@app.route('/select_seat', methods=['POST'])
def your_route():
    print(request.data)  # Print the raw data received
    
    htmx_data = request.json
    
    if htmx_data:
        hx_params = htmx_data.get('params', {}).get('hx-params', None)
        
        if hx_params:
            print(hx_params)
            return jsonify({'status': 'success'})
    
    return jsonify({'status': 'error'})

See the Flask code above.

• javascript
• python
• flask
• htmx

Share Improve this question Follow edited Aug 10, 2023 at 14:02 Dmitriy Popov 2,36033 gold badges2727 silver badges3838 bronze badges asked Aug 10, 2023 at 13:26 Charlie InfiCharlie Infi 3111 silver badge44 bronze badges 2

• @MaikeruDev The exact code you provided, returned<button hx-params="seat=1-1" hx-trigger="click" hx-post="/select_seat" class="seat">{ "status": "error" } </button> – Charlie Infi Commented Aug 10, 2023 at 16:52
• I just found out, hx-get includes the name of the sending element and its value as a url parameter by default on hx-get. So if you change the button value before sending, it should let you get it in the url on the backend. Not sure how practical that is for you, but I made it work using a hidden button and a little vanilla javascript. A little hacky, but it works. – user1544428 Commented Jun 19, 2024 at 13:22

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

hx-params is not used to pass values, but to filter specific inputs to be sent, or not, with the request.

What you are looking for is hx-vals https://htmx/attributes/hx-vals/

Try this:

<button hx-vals='{"seat": "1-1"}' hx-trigger="click" hx-post="/select_seat" class="seat">1 - 1</button>

Then you can read the seat value in your post request.

I have a JavaScript function that generates buttons for seats and each seat gets an hx-post, hx-trigger, and hx-params. In the params, the seat id (for example "0-0" or "12-5") is generated. I want to get the params in the POST request /select_seat and print it. My code returns "None"

JS:

const seat = document.createElement("button");
seat.innerHTML = `${(c + 1) + (r * 6)} - ${(ic + 1) + (ir * 8)}`;
seat.setAttribute("hx-params", `${(c + 1) + (r * 6)}-${(ic + 1) + (ir * 8)}`);
seat.setAttribute("hx-trigger", 'click');
seat.setAttribute("hx-post", '/select_seat');

Htmx:

<button hx-params="1-1" hx-trigger="click" hx-post="/select_seat" class="seat">1 - 1</button>

Flask:

@app.route('/select_seat', methods=['POST'])
def your_route():
    print(request.data)  # Print the raw data received
    
    htmx_data = request.json
    
    if htmx_data:
        hx_params = htmx_data.get('params', {}).get('hx-params', None)
        
        if hx_params:
            print(hx_params)
            return jsonify({'status': 'success'})
    
    return jsonify({'status': 'error'})

See the Flask code above.

I have a JavaScript function that generates buttons for seats and each seat gets an hx-post, hx-trigger, and hx-params. In the params, the seat id (for example "0-0" or "12-5") is generated. I want to get the params in the POST request /select_seat and print it. My code returns "None"

JS:

const seat = document.createElement("button");
seat.innerHTML = `${(c + 1) + (r * 6)} - ${(ic + 1) + (ir * 8)}`;
seat.setAttribute("hx-params", `${(c + 1) + (r * 6)}-${(ic + 1) + (ir * 8)}`);
seat.setAttribute("hx-trigger", 'click');
seat.setAttribute("hx-post", '/select_seat');

Htmx:

<button hx-params="1-1" hx-trigger="click" hx-post="/select_seat" class="seat">1 - 1</button>

Flask:

@app.route('/select_seat', methods=['POST'])
def your_route():
    print(request.data)  # Print the raw data received
    
    htmx_data = request.json
    
    if htmx_data:
        hx_params = htmx_data.get('params', {}).get('hx-params', None)
        
        if hx_params:
            print(hx_params)
            return jsonify({'status': 'success'})
    
    return jsonify({'status': 'error'})

See the Flask code above.

• javascript
• python
• flask
• htmx

Share Improve this question Follow edited Aug 10, 2023 at 14:02 Dmitriy Popov 2,36033 gold badges2727 silver badges3838 bronze badges asked Aug 10, 2023 at 13:26 Charlie InfiCharlie Infi 3111 silver badge44 bronze badges 2

• @MaikeruDev The exact code you provided, returned<button hx-params="seat=1-1" hx-trigger="click" hx-post="/select_seat" class="seat">{ "status": "error" } </button> – Charlie Infi Commented Aug 10, 2023 at 16:52
• I just found out, hx-get includes the name of the sending element and its value as a url parameter by default on hx-get. So if you change the button value before sending, it should let you get it in the url on the backend. Not sure how practical that is for you, but I made it work using a hidden button and a little vanilla javascript. A little hacky, but it works. – user1544428 Commented Jun 19, 2024 at 13:22

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

hx-params is not used to pass values, but to filter specific inputs to be sent, or not, with the request.

What you are looking for is hx-vals https://htmx/attributes/hx-vals/

Try this:

<button hx-vals='{"seat": "1-1"}' hx-trigger="click" hx-post="/select_seat" class="seat">1 - 1</button>

Then you can read the seat value in your post request.

本文标签： javascriptHow to get quothxparamsquot from htmx post requestStack Overflow