send data from flask to html with 2 forms

Question

I have flask sending data to html. Now, first time it does that its by render_template('page1.html', data=data) which populates the main table. Now when i click on any row of main table, i want to call flask again by url_for(entrypoint) and then again i will do render_template('page1.html', data=data2) for the 2nd table. But how to differentiate between them? i mean how will html know which data is coming for whom? please advice. I am novice in javascript and html. I am planning to keep the main table and secondary table under different forms. please advice if thats good decision or not.

Inside my html(page1.html), I have written

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
    function getId(element) {
    var row_index=element.rowIndex;

    $.ajax({
            url: '/get_details',
            data: document.getElementById("table1").rows[row_index].cells[5].innerHTML),
            type: 'POST',
            success: function(response){
                console.log(response);
            },
            error: function(error){
                console.log(error);
            }
         });

This is the code in html for table1 and table2(table2 not done yet)

<section id="boxes" style="margin-top:-5%; margin-bottom:0%; position:absolute; z-index:1;">
        <div class="box" style="margin-left:30px; margin-top:20px; z-index:1;">
            <table id="table1">
                <tr>
                    <th>NO</th>
                    <th> SUBJECT NAME</th>
                    <th>ASSIGNED TO</th>
                    <th>CREATED</th>
                    <th>DISEASES</th>
                    <th>SUBJECT ID</th>
                    <th>STATUS</th>
                </tr>

                {% for row in data %}
                <tr onclick="getId(this)">
                    <td> {{ row[0] }}</td>
                    <td> {{ row[1] }}</td>
                    <td> {{ row[2] }}</td>
                    <td> {{ row[3] }}</td>
                    <td> {{ row[4] }}</td>
                    <td> {{ row[5] }}</td>
                    <td> {{ row[6] }}</td>
                  </tr>
                {% endfor %}
            </table>
        </div>
        <div class="box-two">
        </div>

Inside my app.py here is the flask code for the entry point:

@app.route('/get_details', methods=['POST'])
def get_details_user(patientid):
    print(patientid)

This is the code for the entrypoint for the records which populates table1 as of now:

@app.route('/records')
@login_required
def records():
    if current_user.priviledge:
        data = get_records_by_userid(None)
    else:
        data = get_records_by_userid(current_user.id)
    list_data = []
    for row in data:
        list_data.append([])
        for col, val in row.items():
            list_data[-1].append(val)
    return render_template('records.html', data=list_data)

I don't see this in my flask code being triggered. Something wrong in my ajax code?? Also, how do I get the data from flask to this same html file for the second table?

Thanks a lot, Sudip

Answer 1

Update: The error was coming due to ajax function syntax. Went with extra ')' in data in ajax...oops, thats bad

Answer 2

Add this to the JAvascript code:

$.ajax(function() {
    headers = {'X-CSRFToken' : $('#csrf_token').val() },
    ...
});

This is the token the allows AJac to be validated