href and bootstrap modal - javascript

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.

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.

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')

use same class for data target modal in same page

im have a profile list page. inside the page it have modal with data-target .popupmessage. the problem is i will using the same class as much as the profile i have. how to make specific when client press the modal? because when i click the button modal to show the modal, all the modal got show up
<div class="col-xs-3">
<div class="profile thumbnail">
<img src="http://placehold.it/450x150">
<button class="btn btn-yellow peopleMessage" data-toggle="modal" data-target=".popUpMessage">
Message
</button>
<div class="modal fade popUpMessage" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="fa fa-times" aria-hidden="true"></span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-3">
<div class="profile thumbnail">
<img src="http://placehold.it/450x150">
<button class="btn btn-yellow peopleMessage" data-toggle="modal" data-target=".popUpMessage">
Message
</button>
<div class="modal fade popUpMessage" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="fa fa-times" aria-hidden="true"></span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
heres the example
http://www.bootply.com/95vPZK1rN8
i want to add a number at the end of .popUpMessage
so like a looping every .popUpMessage will be like this .popUpMessage1, .popUpMessage2, .popUpMessage3, .popUpMessage. but i kindly stuck.
heres the script
var start=1;
var max=9999;
for(start;start<=max;start++){
//i stuck on the condition
}
As far as I know, Bootstrap doesn't support multiple modals in this way. Every data-target property has to point out to a specific and unique modal. Else (and that's what your problem right now is), Bootstrap will simply show up all of them.
A simple approach could look like this, by just renaming your individual data-target and container class to popUpMessage(x, y, z).
That being said, you've also mentioned you're affraid of having too many classes. In this case, you may use some JavaScript magic and define your classes dynamically after loading up your page.
EDIT:
Since you are using Bootstrap, you can also make use of jQuery and it's .each() function. By doing so, you can iterate through every element (specified through your selector) and change it's attributes like data-target and class.
Take a look into this.

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.

Categories