[FIXED] Rendering Flask template show the HTM page twice

Issue

I have a flask route rendering a template (method1_result.html) containing a dataframe table. Clicking the table row will send the cell value to another flask route to render a new template (method2_result.html). This last operation is showing a new result relevant to the Cell Clicked but the new html page (method1_result.html) is displaying the result twice.

main.py
@app.route("/method1",methods=['POST', 'GET'])
def method1():
   
    '
    '
    return render_template('method1_result.html')

@app.route("/method2",methods=['POST', 'GET'])
def method2():
    if request.method == 'POST': 
     # get info here to render page!
        .
        .
        return render_template('method2_result.html',var1=var1)     

method1.html

{% block content %}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<br/>
        <h3 align="center" style="color:blue" style="font-family:verdana">Method1 Result</h3> 
<br/>

<div class="container-fluid">
<table id="table" class="table table-striped table-bordered" style="width: 100%">
    <thread>
        <tr>
            {% for header in table[0].keys() %}
            <th>{{header}}</th>
            {% endfor %}
        </tr>
    </thread>
    <tbody>
        {% for row in table %}
        
        <tr class='clickable-row'>
            <td>{{row['Field1']}}</td>
            <td>{{row['Field2']}}</td>
            <td>{{row['Field3']}}</td>
            <td>{{row['Field4']}}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>
</div>

<script>
highlight_row();
function highlight_row(var1='') {
    var table = document.getElementById('table');
    var cells = table.getElementsByTagName('td');

    for (var i = 0; i < cells.length; i++) {
        // Take each cell
        var cell = cells[i];
        // do something on onclick event for cell
        cell.onclick = function () {
            // Get the row id where the cell exists
            var rowId = this.parentNode.rowIndex;

            var rowsNotSelected = table.getElementsByTagName('tr');
            for (var row = 0; row < rowsNotSelected.length; row++) {
                rowsNotSelected[row].style.backgroundColor = "";
                rowsNotSelected[row].classList.remove('selected');
            }
            var rowSelected = table.getElementsByTagName('tr')[rowId];
            rowSelected.style.backgroundColor = "yellow";
            rowSelected.className += " selected";

            msg = 'The Failure Message : ' +   rowSelected.cells[6].innerHTML;
            var var1 = rowSelected.cells[3].innerHTML;
            
            $.ajax({
            url:"/method2",
            method:"POST",
            data:{var1:var1},
            success:function(data)
            { 
                $('tbody').html(data);
                $('tbody').append(data.htmlresponse);
            },
        })
           
        }
    }
}
</script>
{% endblock %}

method2.html

{% block content %}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<br/>
<h4 align="center" style="color:blue" style="font-family:verdana">Method2 result</h4><br/>
<br/>

<table id="table" class="table table-striped table-bordered table-hover" style="width: 100%">
    <thread>
        <tr>
            {% for header in table1[0].keys() %}
            <th>{{header}}</th>
            {% endfor %}
        </tr>
    </thread>
    <tbody>
        {% for row in table1 %}
        <tr>
            <td>{{row['Start']}}</td>
            <td>{{row['OperationID']}}</td>
            <td style="color:red">{{row['Failure Message1']}}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% endblock %}

Not sure what Am doing wrong ?

Solution

1. In your code, you are doing an asynchronous call (ajax). An asynchronous call does not reload a page. This means that user is still on method1_result.html when the result (i.e. method2_result.html) comes in.

2. Your code also says to simply append the entire method2_result.html to method1_result.html page. In fact, you do it twice because you have

    // First you append the entire response i.e. the entire method2 result
    $('tbody').html(data);
    // Then you try to do it a second time but just the 'htmlresponse' (not sure where you are getting this fro
    $('tbody').append(data.htmlresponse);

3. If you want to replace the entire page (method1_result) with the entire contents of method2_result, then you don't need an Ajax call. Replace that ajax call with code that creates a form, creates an input element with the values of the data that you want to pass to the server, and then submits the form. Since this is not an ajax call, it will load a new page which is method2.html

    var form = document.createElement("form");
    form.method = "POST";
    form.action = "/method2";   

    var elem = document.createElement("input"); 
    elem.name= var1;
    elem.value= var1;
    
    form.appendChild(elem1);  
    document.body.appendChild(form);

    form.submit();

4. If you don't want to replace the entire page (maybe you want to replace the body of the existing page with the new page), then you can't just do append which means to add to the existing content, unless you have first cleared the existing content. You have 2 options

Option 1

    $('tbody').empty() // Remove the current contents
    $('tbody').append(data); // Add the new contents

Option 2

    $('tbody').html(data)

Answered By - NoCommandLine