CODEWITHSUNDEEP
javascriptpythondjango
ninjasloth22
ninjasloth22

Reputation: 5

How to feed data from django into a modal?

I'm trying to work out how to get data from django into a bootstrap modal. I'm quite new to django and i've only just started JS.

I have a django view that queries for a list of users via ldap for a list of attributes. For example: 

attributes = ['cn', 'givenName', 'displayName', 'sAMAccountName', 'userPrincipalName', 'mail', 'uidNumber', 'lastLogon']

def ad_users(request):
    users = get_ad_users('ou=TestUsers,dc=testdomain,dc=org', '(objectCategory=person)', attributes)
    return render(request, 'users.html', {'ad_users': users})

I then display it on a page using a table. Using a template for loop in django I loop over the elements to generate the table rows. E.g. (ignoring styling and attributes etc). 

{% for user in ad_users %}
to generate each <tr>
and each <td> references an item.
{{ user.displayName }} {{ user.mail }} etc.

However at the end of the row I want to put a "view" button that displays a pop up modal with all the user attriubtes for the user of that row (not just what is displayed in the table).

I really have no idea how to achieve this, any help would be appreciated.

Upvotes: 0

Views: 1504

Answers (1)

Nikos Vita Topiko
Nikos Vita Topiko

Reputation: 551

this goes for the modal in every tr:

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#{% user.id %}">Open Modal</button>

<div class="modal fade" id="{% user.id %}" role="dialog">
<div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

You can then put whatever you want inside the modal for each user

Upvotes: 1

Related Questions