I am wondering if there is a better way to do this.
Right now I have jquery parsing over and selecting the active div of each row and sending via ajax the flask route. I was wondering if there was a way to do the same thing via jinja2 with a form.
Here is the working example. The 'slick-active' div is dependent on what the user slides over to select.
<row>
<div class="text-center">
<div class="slider single-item">
{% for item in row1 %}
<div><h3>{{ item }}</h3></div>
{% endfor %}
</div>
</div>
</row>
<row>
<div class="text-center">
<div class="slider single-item">
{% for item in row2 %}
<div><h3>{{ item }}</h3></div>
{% endfor %}
</div>
</div>
</row>
$(document).ready(function(){
$('.your-class').slick();
});
$('.single-item').slick({
arrows: true
});
$('#submit').on('click', function(e){
e.preventDefault(); // preventing default click action
var data = {results: $('div.slick-active').text()};
$.ajax({
url: '/testing',
contentType: 'application/json',
type: 'post',
dataType : 'text',
data: JSON.stringify(data),
success: function (data) {
console.log(data);
window.location = data;
// ajax success callback
}, error: function (response) {
alert('ajax failed');
// ajax error callback
},
});
});
Here is the python flask
@app.route('/', methods=['post','get'])
def index():
return render_template('index.html', row1=row1, row2=row2)
@app.route('/testing', methods=['GET', 'POST'])
def testing():
r = request.get_json()
return r['results']
No, there's not. Jinja is static and renders server side, before the client interacts with it. JavaScript is dynamic and client side.