遍历表单以通过jQuery / AJAX将动态数据提交到Flask

Question

I'm trying to create a web app with flask that has rows of data obtained from API calls. Currently I have a column called 'Ticket Number' that contains a set of numbers. My desired functionality is for the user to click on a number and have a modal present more specific information (via a separate python API call). I'm using AJAX to send the data to my flask app to prevent a page refresh on click. The only problem is that no matter which button I click, it thinks I am clicking the first button listed and gives me the results for the first number. Below I've posted the Python, jQuery, and html. Any and all help is greatly appreciated, thanks for your time.

jQuery:

$().ready(function(){
    $('button').click(function() {
        $.ajax({
            url: '/ticket',
            data: $('form').serialize(),
            type: 'POST',
            success: function(response) {
                console.log(response);
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
});

Flask:

@app.route('/ticket', methods=['POST', 'GET'])
def ticket_drill():

    ticket_number = request.form['ticketNumber']

    header = {
        'authorization': "super_secret_key",
        'content-type': "application/json",
        'cache-control': "no-cache"
    }
    s = requests.get("https://my_site/v4_6_release/apis/3.0/service/tickets/" + 
    str(ticket_number), headers=header)
    ticket_details = json.loads(s.text)
    ticket_id = ticket_details['id']

    return json.dumps({'status':'OK','Ticket Number:':ticket_id});

HTML:

{% for ticket_number in service_board %}
            <tr>
                    <td>
                        <form class="form-signin" action="/serviceboard" method="post" role="form">
                            <button class="btn btn-lg btn-primary btn-block" type="button">{{ticket_number}}
                                <input type="hidden" name="ticketNumber" value="{{ticket_number}}" />
                            </button>
                        </form>
                    </td>    
    </tr>
{% endfor %}

Answer 1

I would give your button an id and call that with the jquery like so:

$().ready(function(){
$('button#ticketNumberButton').on('click',function() {
    var ticketNumberVar = $(this).parent().find(' form ').find('#ticketNumber');

    $.ajax({
        url: '/ticket',
        data: $('form').serialize(),
        type: 'POST',
        success: function(response) {
            console.log(response);
            obj = JSON.parse(response);
            ticketNumberVar.val(obj.Ticket_Number);
        },
        error: function(error) {
            console.log(error);
        }
    });
});

});

Maybe this is just me, but I would get rid of the space and ";" in your view as well.

return json.dumps({'status':'OK','Ticket_Number:':ticket_id})

HTML:

{% for ticket_number in service_board %}
        <tr>
                <td>
                    <form class="form-signin" action="/serviceboard" method="post" role="form">
                        <input type="hidden" id="ticketNumber" name="ticketNumber" value="{{ticket_number}}" />

                    </form>
                    <button id="ticketNumberButton" class="btn btn-lg btn-primary btn-block" type="button">{{ticket_number}}</button>

                </td>    
</tr>

{% endfor %}

Hopefully that helps, good luck!