Any way to use jinja2 and flask form instead of ajax and jquery or both?

759 views Asked by At

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']
1

There are 1 answers

0
davidism On BEST ANSWER

No, there's not. Jinja is static and renders server side, before the client interacts with it. JavaScript is dynamic and client side.