Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flask Dynamic data update without reload page

i'm trying to create something like Google Suggest Tool (via suggest api http://suggestqueries.google.com/complete/search?output=toolbar&hl=ru&q=query )

I'm listening input changes, and send data go GET:

$("#search_form_input").keyup(function(){ var some_var = $(this).val();    $.ajax({       url: "",       type: "get", //send it through get method       data:{jsdata: some_var},       success: function(response) {        },       error: function(xhr) {         //Do Something to handle error       }     }); 

After that i'm handling this data and send it to Google API and got response in Python:

@app.route('/', methods=['GET', 'POST']) def start_page_data():     query_for_suggest = request.args.get('jsdata')      if query_for_suggest == None:         suggestions_list = ['',]         pass     else:         suggestions_list = []         r = requests.get('http://suggestqueries.google.com/complete/search?output=toolbar&hl=ru&q={}&gl=in'.format(query_for_suggest), 'lxml')         soup = BeautifulSoup(r.content)         suggestions = soup.find_all('suggestion')         for suggestion in suggestions:             suggestions_list.append(suggestion.attrs['data'])         print(suggestions_list)     return render_template('start_page.html', suggestions_list=suggestions_list) 

In Jinja trying to print it in HTML dynamically:

        <label id="value_lable">               {% for suggestion in suggestions_list %}                 {{ suggestion }}             {% endfor %}          </label> 

But variable in Jinja doesn't update dynamically and print empty list.

How to print suggestions from list dynamically in HTML?

like image 693
Konstantin Rusanov Avatar asked Dec 04 '16 20:12

Konstantin Rusanov


1 Answers

Working example:

app.py

from flask import Flask, render_template, request import requests from bs4 import BeautifulSoup   app = Flask(__name__)   @app.route('/') def index():     return render_template('index.html')   @app.route('/suggestions') def suggestions():     text = request.args.get('jsdata')      suggestions_list = []      if text:         r = requests.get('http://suggestqueries.google.com/complete/search?output=toolbar&hl=ru&q={}&gl=in'.format(text))          soup = BeautifulSoup(r.content, 'lxml')          suggestions = soup.find_all('suggestion')          for suggestion in suggestions:             suggestions_list.append(suggestion.attrs['data'])          #print(suggestions_list)      return render_template('suggestions.html', suggestions=suggestions_list)   if __name__ == '__main__':     app.run(debug=True) 

index.html

<!DOCTYPE html>  <html>  <head>     <title>Suggestions</title> </head>  <body>  Search: <input type="text" id="search_form_input"></input>  <div id="place_for_suggestions"></div>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  <script> $("#search_form_input").keyup(function(){     var text = $(this).val();      $.ajax({       url: "/suggestions",       type: "get",       data: {jsdata: text},       success: function(response) {         $("#place_for_suggestions").html(response);       },       error: function(xhr) {         //Do Something to handle error       }     }); }); </script>  </body>  </html> 

suggestions.html

<label id="value_lable">     {% for suggestion in suggestions %}         {{ suggestion }}<br>     {% endfor %} </label> 
like image 120
furas Avatar answered Sep 23 '22 00:09

furas