greenbergé
Reputation: 331
Flask Ajax Post - How to stop re-rendering of the template
I have a page that is initially served by flask. A drop down is populated by a list using a for loop. When the user click on one of the items in the drop down, an ajax post is made to Flask. Flask then returns the json and and jquery then inserts some html.
All of this works fine.
The problem: after the DOM is updated, for some reason, a GET request is made to Flask which then re-renders the template from scratch. I cannot figure out what if firing that GET...
The question: How do I stop this?
Here is my code:
app.py
@app.route('/orders', methods=['GET','POST'])
@login_required
def orders():
customers = get_active_cust()
if request.method == 'GET':
return render_template('orders.html', customers=customers)
elif request.method=='POST':
offers = get_sent_offers(int(request.values.get('party_id')))
return offers.to_json(orient='records', date_format='iso')
'offers' is a separate module that returns a pandas dataframe. This is convert to json format and sent to the client.
html:
<div class="container" style="padding-top: 40px">
<div class="row">
<!--left-->
<div class="col-md-2" id="leftCol">
<ul class="nav nav-stacked" id="sidebar">
<li class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select a Customer <span class="caret"></span></button>
<ul ID="customer" class="dropdown-menu">
{% for index,row in customers.iterrows() %}
<li><a href="" id="customer_select" value={{ row.party_id }}>{{ row.party_name }}</a></li>
{% endfor %}
</ul>
</li>
</ul>
</div>
<!--/left-->
<!--right-->
<div class="col-md-9">
<div id="offer_column"></div> <!--title insert point-->
<div class="row">
<div class="col-md-9">
<div id="each_offer"></div> <!-- panel insert point -->
<hr class="">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
<hr class="">
</div>
<!--/right-->
</div>
<!--/row-->
</div>
<!--/container-->
<div class="row"></div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#customer_select').click(function(){
var party_id = $(this).attr('value');
var past_offers;
$.post('/orders',{
party_id: party_id})
.done(function(response){
past_offers = JSON.parse(response);
$('<h3 id="sec0" class="">Sent Offers</h3>').insertBefore($('#offer_column'));
//get unique offer dates
var unique = {};
var distinct = [];
for( var i in past_offers ){
if( typeof(unique[past_offers[i].sent_date]) == "undefined"){
distinct.push(past_offers[i].sent_date);
}
unique[past_offers[i].sent_date] = 0;
};
//loop through dates and print out past offers into panels>tables
for (var d in distinct) {
var panel = '<div class="panel panel-default">' + '<div class="panel-heading">' +
'<h4 class="">' + new Date(distinct[d]) + '</h4>' +
'</div><div class="panel-body" div="">' +
'<table class="table table-bordered" style=""><tbody>' +
'<tr><th class="" contenteditable="false">Location</th>' +
'<th class="" contenteditable="false">Product</th>' +
'<th class="" contenteditable="false">Price</th>' +
'<th class="" contenteditable="false">Volume</th>' +
'</tr>';
//loop to add each product per distinct date
for (var i in past_offers) {
if (past_offers[i].sent_date == distinct[d]) {
panel = panel +
'<tr>' +
'<td class="" contenteditable="false">' + past_offers[i].station_name + '</td>' +
'<td class="" contenteditable="false">' + past_offers[i].product_name + '</td>' +
'<td class="" contenteditable="true">' + past_offers[i].target_offer_tax + '</td>' +
'<td class="" contenteditable="true">0</td>' +
'</tr>';
}
}
// add finishing touches
panel = panel +
'</tbody></table>' + '<div class="">' +
'<button class="btn btn-default">Submit</button>' +
'</div></div></div>';
$(panel).insertAfter($('#each_offer'));
}
});
});
});
</script>
Upvotes: 2
Views: 785
Answers (1)
greenbergé
Reputation: 331
Well...I figured it out. And it was so simple.
By adding:
return false;
After the .done function solved the issue. Apparently, this stops the browser from cycling back up to the link which is was apparently firing the 'GET'.
Full code update below:
<div class="container" style="padding-top: 40px">
<div class="row">
<!--left-->
<div class="col-md-2" id="leftCol">
<ul class="nav nav-stacked" id="sidebar">
<li class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select a Customer <span class="caret"></span></button>
<ul ID="customer" class="dropdown-menu">
{% for index,row in customers.iterrows() %}
<li><a href="" id="customer_select" value={{ row.party_id }}>{{ row.party_name }}</a></li>
{% endfor %}
</ul>
</li>
</ul>
</div>
<!--/left-->
<!--right-->
<div class="col-md-9">
<div id="offer_column"></div> <!--title insert point-->
<div class="row">
<div class="col-md-9">
<div id="each_offer"></div> <!-- panel insert point -->
<hr class="">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
<hr class="">
</div>
<!--/right-->
</div>
<!--/row-->
</div>
<!--/container-->
<div class="row"></div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#customer_select').click(function(){
var party_id = $(this).attr('value');
var past_offers;
$.post('/orders',{
party_id: party_id})
.done(function(response){
past_offers = JSON.parse(response);
$('<h3 id="sec0" class="">Sent Offers</h3>').insertBefore($('#offer_column'));
//get unique offer dates
var unique = {};
var distinct = [];
for( var i in past_offers ){
if( typeof(unique[past_offers[i].sent_date]) == "undefined"){
distinct.push(past_offers[i].sent_date);
}
unique[past_offers[i].sent_date] = 0;
};
//loop through dates and print out past offers into panels>tables
for (var d in distinct) {
var panel = '<div class="panel panel-default">' + '<div class="panel-heading">' +
'<h4 class="">' + new Date(distinct[d]) + '</h4>' +
'</div><div class="panel-body" div="">' +
'<table class="table table-bordered" style=""><tbody>' +
'<tr><th class="" contenteditable="false">Location</th>' +
'<th class="" contenteditable="false">Product</th>' +
'<th class="" contenteditable="false">Price</th>' +
'<th class="" contenteditable="false">Volume</th>' +
'</tr>';
//loop to add each product per distinct date
for (var i in past_offers) {
if (past_offers[i].sent_date == distinct[d]) {
panel = panel +
'<tr>' +
'<td class="" contenteditable="false">' + past_offers[i].station_name + '</td>' +
'<td class="" contenteditable="false">' + past_offers[i].product_name + '</td>' +
'<td class="" contenteditable="true">' + past_offers[i].target_offer_tax + '</td>' +
'<td class="" contenteditable="true">0</td>' +
'</tr>';
}
}
// add finishing touches
panel = panel +
'</tbody></table>' + '<div class="">' +
'<button class="btn btn-default">Submit</button>' +
'</div></div></div>';
$(panel).insertAfter($('#each_offer'));
}
});
return false; // <------ This solved the issue
});
});
</script>
Upvotes: 1
Related Questions
- How to use Flask's render_template from an ajax POST form submit
- Flask 'render_template' after client POST request
- flask render_template doesn't work on AJAX post
- How to make JS AJAX / FLASK render_template works WITHOUT jQuery
- Render template in Flask from ajax call
- Flask Ajax call getting refreshed after data received to web page
- Ajax POST to Flask not working after page refresh
- Render template after back-end receive JSON from front-end via Ajax in Flask
- Ajax POST returning render_template in Flask?
- Flask: render a page after jQuery ajax $.post call