CODEWITHSUNDEEP
pythonhtmlflaskjinja2
Abhiram Natarajan
Abhiram Natarajan

Reputation: 161

How do I use modal to render data dynamically with Python Flask and HTML

I have looked online and found that I can use macros to render different content to my modal. Yet there is something missing in my code that prevents it from getting updated and I'm not sure of what exactly.

@app.route("/candidates")
def candidate_fun():
  mapping={
    "001":"Bangalore",
    "002":"Delhi",
    "003":"Chennai",
    "004": "Mumbai",
    "005":"Kolkata",
    "006":"Hyderabad"
  }
  myclient=pymongo.MongoClient(uri)
  mydb = myclient["codefundo"]
  mycol=mydb['cand_reg']
  result=[]
  for x in mycol.find():
    obj=NewsSearch()
    # import pdb; pdb.set_trace()
    t=dict(x)
    t['a'],t['b'],t['c']=obj.news_candidate(search_term=str(x["First Name"].lower()+" "+x["Last Name"].lower()+ " election"))
    # t['News']=str(a+".  "+b+". "+c)
    result.append(t)
    # result.append({'News':obj.news_candidate(search_term=str(result["First Name"]+" "+result["Last Name"]+" election"))})
  return flask.render_template("candidate.html",result=result,mapping=mapping)

While the python code isn't of significance, I have provided it to show that I am passing a list result of type dict.

HTML Jinja

<!--MODAL PART-->
{% macro render_modal(a,b,c) -%}
div class="modal-body">
  <p>{{a}}</p>
  <p>{{b}}</p>
   <p>{{c}}</p>
</div>    
 {%- endmacro%}

<!-- Jinja to make a call -->
{% for key in result %}
<div class="col-6">
 <button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModalLong">Info</button>
                                    {{render_modal(key['a'],key['b'],key['c'])}}
     <!-- Just to test if the value sent is received {{key['a']}} -->
 </div>
{% endfor %}

It returns the same data over the modal box for all entries being passed. I want for it to show me the specific values - key[a], key[b], key[c] for every new key in the iteration.

Upvotes: 1

Views: 1567

Answers (1)

amyxst
amyxst

Reputation: 36

Similar question here: Passing a row ID in a table to a modal in flask (python)

You need to set an id on your modal and refer to that specific id in your button to identify a specific modal. In order for each modal to render different inputs, you need to set different ids for each button-modal group.

In your case, add a unique identifier for each key object in addition to your data entries, e.g.

# in the routes
t['id'] = # unique id identifying the modal
t['a'] = ...
t['b'] = ...
# etc.

Then in the for-loop that calls the modal macro, include the unique id in some way on the data-target attribute of your button:

{% for key in result %}
<div class="col-6">
  <button type="button" data-target="#exampleModalLong{{ key.id }}" class="btn btn-info" data-toggle="modal">
    Info
  </button>

  {{ render_modal(key) }}

</div>
{% endfor %}

Use the exact same name you used for data-target for the id of your modal div:

{% macro render_modal(key) -%}
<div class="modal-body" id="exampleModalLong{{ key.id }}">
  <p>{{ key.a }}</p>
  <p>{{ key.b }}</p>
  <p>{{ key.c }}</p>
</div>    
{%- endmacro%}

Note that this will inject a lot of HTML into your code if you have a lot of entries in your for-loop. As mentioned in the Stack Overflow post linked at the top, you can consider defining just one modal, and use AJAX to change the modal content.

Upvotes: 2

Related Questions