How to Create Multiple Modal Dynamically in a Single Page - javascript

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.

Related

I am trying to make seperate edit and delete on my CRM model but could not figure out how to bind those buttons with my field

I am trying to make separate edit and delete on my CRM model but could not figure out how to bind those buttons with my field although I have created the API for this in angular I need a bit help.
Thanks in advance
below is a bootstrap code of the edit and delete buttons
<div id="delete_department" class="modal custom-modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content modal-md">
<div class="modal-header">
<h4 class="modal-title">Delete Department</h4>
</div>
<div class="modal-body card-box">
<p>Are you sure want to delete this?</p>
<div class="m-t-20 text-left">
Close
<button type="submit" class="btn btn-danger" >Delete</button>
</div>
</div>
</div>
</div>
</div>
<div id="edit_department" class="modal custom-modal fade" role="dialog">
<div class="modal-dialog">
<button type="button" class="close" data-dismiss="modal" (click)="edit(list)">×</button>
<div class="modal-content modal-md">
<div class="modal-header">
<h4 class="modal-title">Edit Department</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label>Department Name <span class="text-danger">*</span></label>
<input class="form-control" value="IT Management" type="text">
</div>
<div class="m-t-20 text-center">
<button class="btn btn-primary btn-lg" (click)="edit(list)">Save Changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
1: declare a property in your component eg: department,which store the current operate department object on edit button clicked
2: bind the property of department to edit dialog template
3: remove role="dialog" from your dialog template(beacuse you need to do something before dialog open,you must open dialog by yourself)
4: in your edit dialog button click function, you set property 'department' value to store current operate department,and append this code $('#edit_department').modal('show')

How to display different content on a modal based on data-binding attribute? (knockout.js + bootstrap modal)

What I want to do is, I want to display a modal when I click the "Preview Application" link based on the data-binding of the link.
For example,
<a href="#" data-toggle="modal" data-target="#previewApplicantModal" data-bind="attr: { 'data-applicationKey': application.applicationKey }">
Preview Application
</a>
When I do this, it binds to the corresponding applicationKey. So, I want to use this information to display the corresponding candidateLocation on the modal based on the applicationKey.
How can I do this?
To rephrase my question,
How can I make the modal read the applicationKey and display the candidateLocation that is inside the same "application" object as that applicationKey?
The code for my empty modal currently looks like this:
<div id="previewApplicantModal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Applicant Preview</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<span>Applicant Responses</span>
</div>
<div class="col-md-6">
<div>
</div>
</div>
</div>
<div class="row small-margin-top" style="text-align:center">
Read Full Profile
</div>
</div>
</div>
</div>

multi bootstrap modal in one page issue

I have several card in a page, I rendered all of them with a loop, I want when user clicked on each one , related modal show to user, I implement that with following snippet
{% for i,item in node.field_what_you_will_build %}
<div class="prj-box " data-dismiss="modal" data-toggle="modal" data-target="#projectcard-{{ i }}">
<div id="projectcard-{{ i }}" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header nopadding">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="login-head">
<img src="/{{ directory }}/images/logo-b.png" />
</div>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
<div class="lbl"> {{ 'Project'|t }}</div>
<div class="title">{{ item.first }}</div>
<div class="desc">{{ item.second }}
</div>
<div class="badge">{{ i+1}}</div>
<div class="shadow-wrapper">
</div>
</div>
{% endfor %}
when I click on cards modal getting show correctly but when click close modal disappear but background getting dark, when I inspect my markup I saw
<div class="modal-backdrop fade in"></div>
<div class="modal-backdrop fade in"></div>
<div class="modal-backdrop fade in"></div>
added to end of body.where is the problem? is my solution is correct to implement multi bootstrap modal on a page? if not what is the true solution?
it seems when I click on close some <div class="modal-backdrop fade in"></div> add to my markup
I found the solution for this issue, the problem occur because Modal markup was inside the element cause modal triggered on click, I mean the the problem is
<div class="prj-box " data-dismiss="modal" data-toggle="modal" data-target="#projectcard-{{ i }}">
<div id="projectcard-{{ i }}" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header nopadding">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="login-head">
<img src="/{{ directory }}/images/logo-b.png" />
</div>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
</div>
**So solution is **
<div class="prj-box " data-dismiss="modal" data-toggle="modal" data-target="#projectcard-{{ i }}">
</div>
<div id="projectcard-{{ i }}" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header nopadding">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="login-head">
<img src="/{{ directory }}/images/logo-b.png" />
</div>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
I mean Don't Put Modal Content inside the element cause modal triggered

bootstrap dialog get closed on click on area inside it

I'm trying to use bootstrap material and my problem is that dialog get colsed immediately after I click inside it. I'd like to be able to close it but only on close button or clicking outside. But not indiside!
<div class="container-fluid">
<section id="landing">
<button id="video-button" class="btn btn-success btn-raised" data-toggle="modal" data-target="#video-dialog">
Quick tour
</button>
</section>
<section id="about">
</section>
<!-- video dialog -->
<div id="video-dialog" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Dialog</h4>
</div>
<div class="modal-body">
<p>body. when I click here the dialog get closed.</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">Dismiss</button>
</div>
</div>
</div>
</div>
</div>
UPDATE
The problem is in div.modal-backdrop because it's before the modal's content and actually covers my dialog.

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