Flask JQuery toggle text dynamically

Question

I know how to toggle text depending on the div id, from this question here Show/Hide text using jquery. My question is if I don't know in advance how many items I have that I want to toggle? As it depends on user input, is there anyway to dynamically assign a toggle function using JQuery each time flask is called?

My template looks like:

<!DOCTYPE html>
<html>
  <head>
    <title>Flask Template Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <style type="text/css">
      .container {
        max-width: 10000px;
        padding-top: 100px;
      }
    </style>
  </head>
  <body>

    <div class="container">
    <table>
    <tr>
        <td><h2>Header 1</h2></td>
        <td><h2>Header 2</h2></td>
    </tr>
      {% for group in my_list %}
         {% for row in group %}
         <tr>
           <td>{{ row[0] }}</td>
           <td>{{ row[1] }}</td>
        </tr>
        {% endfor %}
      {% endfor %}
    </table>
    </div>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
  </body>
</html>

And my python/flask script looks like:

from flask import Flask, render_template
import pickle

app = Flask(__name__)


@app.route("/")
def template_test():
    data=pickle.load(open('results.p','rb'))
    newdata = zip(
    zip(*(x['titles'] for x in data.values())),
    zip(*(x['dates'] for x in data.values())))

    list_data=list(newdata)
    return render_template('index.html', my_string="Wheeeee!",   my_list=list_data)

if __name__ == '__main__':
    app.run(debug=True)

The results.p file can change, so the length of list_data changes . The idea is for each cell in the HTML table I want to add a show/hide option for the date. But individually for each cell.

Could you provide some sample code to better illustrate your use case? — Jomel Imperio
– Jomel Imperio, Commented May 11, 2015 at 9:11

Jomel Imperio · Accepted Answer · 2015-05-11 10:58:54Z

So the problem is to assign toggle handlers to a dynamic collection of elements (in this case table cells). This is one approach:

HTML:

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      // Get the table element by ID.
      $('#data-table')
      // Get all <a class="toggle"> elements inside the table.
      .find('a.toggle')
      // Set a click handler for each.
      .click(function(e) {
        // The details of this will depend on 
        // where your toggle trigger element is 
        // relative to the date element that you 
        // want to toggle.
        //
        // In this example, the date is in the <span />
        // immediately preceding the <a /> toggle.
        //
        // So we can get the <a /> itself by $(e.target),
        // then the date element to toggle using $.prev().
        var date = $(e.target).prev();
        date.toggle();
      });
    });
  </script>
  <title>Toggling table cells dynamically</title>
</head>

<body>
  <table id="data-table">
    <tr>
      <td><h2>Header 1</h2></td>
      <td><h2>Header 2</h2></td>
    </tr>
    <tr>
      <td>Title 1</td>
      <td><span>Date 1</span> <a class="toggle" href="#">toggle</a></td>
    </tr>
    <tr>
      <td>Title 2</td>
      <td><span>Date 2</span> <a class="toggle" href="#">toggle</a></td>
    </tr>
    <tr>
      <td>Title 3</td>
      <td><span>Date 3</span> <a class="toggle" href="#">toggle</a></td>
    </tr>
    [ ...more rows... ]
  </table>
</body>

</html>

Check it out here on JSBin to see it in action.

Collectives™ on Stack Overflow

Flask JQuery toggle text dynamically

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related