CODEWITHSUNDEEP
pythonflaskjinja2
Adam Roman
Adam Roman

Reputation: 97

How to render items in succession with Flask/Jinja2?

I'm trying to cycle through a list of variables on my application's front-end. The only caveat is I want the variables to cycle through a list showing one variable at a time. How can I achieve this? Is there some functionality in Jinja2 that allows you to do this?

  <div class="vert-al" align="center">
    {% for x in [1,2,3,4,5] %}
       <span class="badge badge-danger">{{x}} alligators in the pool!</span>
    {% end for %}
  </div>

As is, the snippet will render a line for each of the elements in the list. Instead, I would like to cycle through them in place. The CSS for vert-al looks like this:

  .vert-al{
  vertical-align:middle;
  margin-bottom: 1rem;
  margin-top: 1rem;
  }

Javascript that fades the variable in and out:

    setInterval(function(){
        $(".badge-danger").fadeOut(2100);
        $(".badge-danger").fadeIn(900);
    }, 3000);

I'm not sure whether to tackle this problem with python/jinja or more of a js/css route so any guidance would be super helpful!

Upvotes: 0

Views: 85

Answers (1)

ditch182
ditch182

Reputation: 318

Jinja is going to render your variables only once, when the page loads. If you want to cycle through them, you'll have to make sure that they're all there. Then you can show/hide them with JS.

Maybe something like this:

<div class="vert-al" align="center">
    {% for x in [1,2,3,4,5] %}
       <span class="badge badge-danger" id="gator-{{x}}" style="display:none">{{x}} alligators in the pool!</span>
    {% end for %}
</div>

Then:

for (var i = 0; i < num_gators; i++) {
 document.getElementById("gator-" + i).fadeIn(900);
}

Note: Not sure about that Javascript, but you get the idea.

Upvotes: 1

Related Questions