How to feed data from django into a modal? - javascript

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.

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">×</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

Related

How to Create Multiple Modal Dynamically in a Single Page

I am doing a Django Blog Project and it fetch all Blogs from the Database and show Blog Title in User Profile only. I want to create Bootstrap Modal for each Blog that is shown in the profile. Whenever a User click on a Title, the Modal will appear with Details.
{% for blog in blogs.all %}
<div class="card mb-4 shadow-sm ">
<p class="card-text "><h2>{{ blog.title }}</h2></p>
<div class="card-body">
<div class="btn-group">
<!-- Open a Modal for the blog -->
<!-- Button To Implement the Modal-->
<button id = "modalToggle" type="button" class="btn btn-sm btn-outline-secondary" data-toggle="modal" data-target="#modal">View More</button>
<!-- Modal -->
<div class="modal fade" id="modal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">{{ blog.title }}</h4>
</div>
<div class="modal-body">
<p>{{ blog.body }}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here all Blogs are showing the Modal of the first one. I cannot create multiple modals for each Blog.
The id attribute of an html element should be unique and appear only on one element in the html document. The problem you're encountering is likely because you're creating an element with id="modal" for each blog. You can fix this with:
<button id = "modalToggle" type="button" class="btn btn-sm btn-outline-secondary"
data-toggle="modal" data-target="#modal-blog-{{blog.pk}}">View More</button>
<!-- Modal -->
<div class="modal fade" id="modal-blog-{{blog.pk}}" role="dialog">
By using a unique string for the id via including the blog pk the buttons should trigger their respective blog.

Why model form is not opening on anchor <a> tag?

I have a icon of plus + sign which is supposed to open a modal form on click
but here modal form is not opening.
<td>
<a data-target="#myModal" data-toggle="modal" href="#myModal">
<span class="glyphicon glyphicon-plus"></span></a>
</p>
</td>
Above code represent + sign and click on it.
Model Form code is below:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</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>
What's wrong with it. I am unable to find it. Any help would be appreciated
The bootstrap.js library needs to be included in order for data-toggle to work.

Create jquery modal by clicking on table cell

I am beginner in jquery,
I have table which contains one column like no of employees (total no of employee in department) when user clicks on it it should display list of employees in jquery modal (like EmpA,EmpB,EmpC) when clicking on specific employee (EmpA) should display details of that EmpA .
You have a huge question. It is not just a question, it is an application. I can help you get started by showing you how you can (a) use a modal, (b) open/close the modal, and (c) stick stuff into the modal. After that, you must experiment / work with it before asking another question. Fair enough?
For the modal, you have three choices:
(1) You can write your own modal. Not very difficult, but if you are already using another system that includes modals, you should use that.
(2) You can use jQueryUI -- but this is not the same as jQuery. It is an enhancement/add-on to jQuery, the same as Bootstrap is. jQueryUI includes a modal dialog - but so does Bootstrap.
(3) Since you are already using Bootstrap, and since Bootstrap includes a cool modal system, you can -- and should -- use the Bootstrap modal system. It is quite easy.
Here is a link to how the Bootstrap modal system works.
In your case, you might wish to use the jQuery/javascript method of opening/closing the modal. This allows you to decide programmatically when to open the modal.
You also need to populate the modal with new data. Notice that the Bootstrap modal basically looks like this:
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div>This is the body of the modal. This is where your data goes (HTML table, values, etc).</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Notice the class called modal-body. If you inject new HTML code in there using the jQuery .html() method, you can change what is inside the modal dialog.
$('#mybutt').click(function(){
var newstuff = '\
<div id="newstuff">\
<img src="http://placekitten.com/400/150" /><br>\
<h1>This is an example</h1>\
<h3>Of some new stuff in the modal</h3>\
<button id="nutherbutt">Click me next</button>\
</div>\
';
$('.modal-body').html(newstuff);
});
$(document).on('click', '#nutherbutt', function(){
//You must use .on() to trap events for injected tags
alert('you clicked me');
$('#myModal').modal('hide');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- - - - - - Modal - - - - - - -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
<button id="mybutt">Click Me!</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Make sure all the libraries are included; jquery, bootstrap.css, bootstrap.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>
<!-- trigger modal -->
<td>
Total
</td>
<td>
4 emplyees
</td>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">List of emplyees</h4>
</div>
<div class="modal-body">
<ul>
<li>Emp 1</li>
<li>Emp 2</li>
<li>Emp 3</li>
<li>Emp 4</li>
</ul>
</div>
</div>
</div>
</div>

Meteor - template helpers argument (spacebars)

I need some thoughts about how to solve my problem. I have the following html template with a table. It shows 5 rows and at the end of each row (in the last td) there is a button which triggers a bootstrap modal (popup window).
I am using spacebars {{#each}} to loop through all the cursors, but the problem is with the modal. It only shows the data for the first row, for every row-record the same data.
This is because the ID for the modal is the same for every record (it is the first one, #subsPopup). I need somehow to pass it different ID for every row, like #subsPopup{{var}}. Any idea how could I do this?
<!-- subscribers table -->
<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Created</th>
<th>Modified</th>
<th>Mailing lists</th>
</tr>
</thead>
<tbody>
{{#each subsList}}
<tr>
<td>{{firstName}}</td>
<td>{{lastName}}</td>
<td>{{email}}</td>
<td>{{createdDate}}</td>
<td>{{modifiedDate}}</td>
<!-- Trigger the modal (popup window) with a button -->
<td>
<button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#subsPopup">Show</button>
<!-- Modal -->
<div id="subsPopup" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Mailing List for <b>{{firstName}} {{lastName}}</b> ({{email}})</h4>
</div>
<div class="modal-body">
<p>{{mailLists}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
</tr>
{{/each}}
</tbody>
</table>
Your subscriptions collection probably has the _id field, so you might try outputting {{_id}}
In case anyone else comes across this issue...
My method of solving this ... (not sure if this is the most elegant , but it did work for me )
Here is an example:
[Meteor Template File - "coolmodal.html" - containing a bootstrap modal component]
<template name="mymodal">
<!-- This button we can use to trigger the modal to display-->
<button class="btn btn-success btn-lg" type="button">
<div class="modal fade" id="mycoolmodal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">{{modalDetails}}</h4>
</div>
<div class="modal-body">
<p>Cool stuff I like to write here</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</template>
[Meteor Client JS file - "cool.js" - containing template helpers, etc]
Template.mymodal.events({
'click .img-thumbnail'(event, instance) {
event.preventDefault(); // Stops the page from attempting a reload.
Session.set('myInfoForModal', this.my_data_you_want);
$('#coolmodal').modal('show');
}
});
Template.registerHelper('modalDetails',function(input){
return Session.get("myInfoForModal");
});

href and bootstrap modal

I am trying to implement a modal functionality with an application and I am bit stuck.
use case: On an user's dashboard they are bunch of links for the various applications. When user tries to access those link, a modal with terms and condition should pops and when the user accepts the condition then a new windows should open depending on the application link user selected. These links are dynamic and generated on UI based on database.
Non modal implementation:
<div class="col-xs-12" nopadding>
<ul class="nopadding padded-side-20">
<c:forEach var="app" items="${appAndLink}">
<li>${app.key}</li>
</c:forEach>
</ul>
</div>
Modal Implementation:
<c:forEach var="app" items="${appAndLink}">
<li>${app.key}</li>
</c:forEach>
<div class="modal fade" id="myModalAccessApp" tabindex="-1" role="dialog" aria-labelledby="myModalAccessAppLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header nopadding padded-side-20 padded-tb-10">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalAccessAppLabel">
Systems Use Notification
</h4>
</div>
<div class="row">
<div class="col-lg-12 gray-divider"></div>
</div>
<div class="modal-body" id ="modalID">
<p> Terms and condition </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" onclick="openJSWindow('${app.value}', '${app.key}', true)" data-dismiss="modal">
I Accept
</button>
<button type="button" class="btn btn-success"
data-dismiss="modal">Cancel
</button>
</div><!-- /.modal-footer -->
</div>
</div>
</div> <!-- /.modal-Ends -->
</ul>
</div>
I am not able to pass the ${app.value}, ${app.key} value to the modal which I have created. Kindly let me know if this can be done with jQuery or AJAX. I have very limited knowledge on these.
Thank you for the help.

Categories