Flask jinja2 update div content without refresh page
You can use Flask-Sijax which helps you add Sijax support to your Flask app. Sijax is a python/jquery library that makes AJAX easy to use on your web applications. Alternatively you could do this:
<script>
$(document).ready( function() {
$('#next').click(function() {
$.ajax("{{ url_for('yourroute') }}").done(function (reply) {
$('#container').html(reply);
});
});
});
</script>
<input type="button" id="next" value="Next" />
<div id="container"></div>
Tyler
Day : Office code ninja Night: Home code ninja Free Time: Work on personal python based project
Updated on July 15, 2020Comments
-
Tyler almost 4 years
Need achieve some features like [http://webonise.co.uk/][1] when click on contact,resume,resources link will update (location URL&div content) but without refresh the page.
Flask view function
@app.route('/') def index(): flash('Welcome') return render_template('index.html')
Under index.html is extends base.html
{% block content %} {{super()}} <section class="content"> <a href="#"><i class="mdi-event"></i>Event</a> <a href="#"><i class="mdi-contact"></i>Contact</a> <div class="board"> {# dynamic template #} {# without using {{% include 'event.html' %}} #} </div> </section> {%- endblock %}
How can i dynamic rendar event.html / contact.html content when different link is click and rendar under {# dynamic template #} without refresh the page ?
<!--event.html--> <ul class="list"> <li> <h3>123</h3> <p>abc</p> </li> </ul>
What I try
import jinja2 Environment but still no idea how to achieve this
env = Environment(autoescape=True, loader=FileSystemLoader(os.path.join(os.path.dirname(__file__), 'templates'))) @app.route('/') def index(): board = env.get_template('event.html') flash('Welcome Home Tyler') return render_template('index.html', board=board)
Is there really need ajax technique get/post method to achieve all this?
-
Arun Ghosh almost 8 yearsYou need JavaScript for this.
-
Tyler almost 8 years@ArunGhosh can you show me some example or technique? and suggest some js.library to handle this , thanks
-
Arun Ghosh almost 8 yearsYou can jQuery library for this purpose.
-
-
GuySoft over 5 yearsIs there some rule of tumb when to use Flask-Sijax and when to use the jquery snippet?
-
simanacci over 5 yearsjquery is easier, compared to adding an extension.
-
Vaidøtas I. about 2 yearsthis example does not work?