Flask jinja2 update div content without refresh page

Question

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?

@ArunGhosh can you show me some example or technique? and suggest some js.library to handle this , thanks — Tyler
– Tyler, Commented Jul 14, 2016 at 16:41

simanacci · Accepted Answer · 2016-07-14 23:15:11Z

12

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>

answered Jul 14, 2016 at 23:15

simanacci

2,3723 gold badges29 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

GuySoft Over a year ago

Is there some rule of tumb when to use Flask-Sijax and when to use the jquery snippet?

simanacci Over a year ago

jquery is easier, compared to adding an extension.

Vaidøtas I. Over a year ago

this example does not work?

Collectives™ on Stack Overflow

Flask jinja2 update div content without refresh page

Flask view function

What I try

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Flask view function

What I try

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related