I have been trying and failing to add a line break to a DRY bootstrap modal.
Here is my hyperlink template code that sends the message to the modal show code:
Delete
Here is my jquery bootstrap modal code:
$(document).ready(function() {
//START: Delete code.
$('a[delete-confirm]').click(function(ev) {
var href = $(this).attr('href');
if (!$('#deleteConfirmModal').length) {
$('body').append('<div id="deleteConfirmModal" class="modal modal-confirm-max-width" role="dialog" aria-labelledby="deleteConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button><h4 class="modal-title" id="deleteConfirmLabel">{% trans "Delete" %} - {{ resume_details_trans }}</h4></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">{% trans "Cancel" %}</button> <a class="btn-u btn-u-red" id="deleteConfirmOK" onclick="showProgressAnimation();">{% trans "Delete" %}</a></div></div>');
}
$('#deleteConfirmModal').find('.modal-body').text($(this).attr('delete-confirm'));
$('#deleteConfirmOK').attr('href', href);
$('#deleteConfirmModal').modal({show:true});
return false;
});
//FINISH: Delete code.
});
Add this to the button to delete the record:
<a href="url"
delete-confirm="Your Message Here!!<br /><br /><span class='confirm_delete_warning_red_bold'>You can even add in css to highlight specific text - Are you sure?</span>"
>
Delete
</a>
And in your jquery code change the .text to .html. Text will render the text and .html will act as html and display the line breaks and css in the span tag.
$('#deleteConfirmModal').find('.modal-body').html($(this).attr('delete-confirm'));
This will work for your code. Just watch your use of ' and " (single & double talking marks). Don't mix them up.
Related
I'm using Vue (just started learning it) and Bootstrap to make a blog and I want a modal window (that shows the post's name/etc) to pop up when the user clicks on the comment button. However, right now the modal window only gets the post information from the latest blog post. This means that even if you click the 1st post, you would get the id information and post title of the latest one... Any suggestions or solutions? Thanks in advance!
It seems that the main problem with my code is that it makes n numbers of modals in vue if you have n posts. I have tried slots but the modals started displaying the first post instead of the last one. I wonder if all my modals are being displayed at once but I only the last one... Should I use an index instead?
Is there any way to make only one modal that gets and display the information of the post clicked?
Here's my code of the post component
Vue.component('posts', {
props: ['post', 'loggedUser'],
template: `
<div class='blog-post py-2'>
<h3> {{post.title}} </h3>
<h6> Posted by {{post.postedBy}} on {{formatCompat(post.createdAt)}} </h6>
<span class='comments'>
<i class='far fa-comment-dots ml-3' data-toggle="modal" data-target="#commentModal"></i>
{{post.comments.length}}
</span>
</div>
`
My modal component: (mostly from the bootstrap docs)
Vue.component('modal', {
props: ['post'],
template: `
<div>
<div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="commentModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="commentModalLabel">Comment on {{post.postedBy}}'s post! ({{post.title}})</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
`
})
Here, I'd like the {{posted.title}} and other information to reflect the post where the comment button is clicked, but it's showing the latest post.
Parent element:
const postComponent = new Vue({
el: '#posts',
data: {
posts: null
},
methods: { // mostly code unrelated to modal stuff
}
My pug file:
#posts
if user
posts(name=username, v-for='post in posts' v-bind:post='post' v-bind:key="post.id" v-on:like-post='like' logged-user=loggedUser v-on:comment-post='comment')
modal(v-for='post in posts' v-bind:post='post' v-bind:key="post.id")
You need to add a custom data property that reflects the selected post for the template to read.
data: {
...
selected: '',
...
}
Then, you need a method that will assign the selected property to whichever post is clicked.
methods: {
changeTitle(postId) {
const currentPost = posts.filter((post) => {
return post.id == postId;
});
this.selected = currentPost.id;
}
}
So now that you have a data property to represent the current selected title, and a method to change that property with a click, you need to assign the directive for the method to the post. So, add this to the html tag you want to trigger the method:
#click = "changeTitle(postId);"
This will trigger the method along with the post id from the post that called the method. The current title can now be rendered anywhere in the template that has access to the data, like this:
{{selected}}
I have a button like below:
<a href="{{ relatedEntry.url }}" data-target="http://go.redirectingat.com/?id=120996X1581244&url={{ affiliateLink|url_encode }}&sref={{ entry.url|url_encode }}" target="_blank" class="btn btn-voucher btn-lg btn-block popunder" onclick="$.popunder(this);">
Reveal Code & Visit<i class="material-icons">chevron_right</i>
</a>
But I'm trying to add a Google event tracking code as well within this button:
onclick="ga('send', 'event', 'Deal', 'Deal Click');"
I've added both, but this seems to break the popunder.
You can trigger 2 or more functions on a trigger, separated by semicolons.
Here is a quick prototype where a button click will call two separate functions:
<button onclick="a();b();">Double Action</button>
<div id="a"></div>
<div id="b"></div>
javascript functions:
function a(){
document.getElementById('a').innerHTML ='A';
}
function b(){
document.getElementById('b').innerHTML = 'B';
}
here is a working jsFiddle
The only catch is that the first function does not cause an action that prevents calling or processing of the next function(s). Like redirect url, or fatal exception.
I have two html pages. In the main page, when a link is clicked, the url behind the link should be opened in a small inline window. After searching a lot I found that I could use Innerhtml to load the url into a small div (I also tested iframe and ajax but they did not work in chrome). 1. Is it possible to call a function defined in main page, inside the innerhtml? 2. Inside the main page and innerhtml page I have the same tabs and objects of same name, and one of the tabs is called map. when a button is clicked in innerhtml, I want a point to be added in the map of main page not the map of innerhtml itself.
Here is a part of the code:
<script>
function load_home(url) {
document.getElementById("content").innerHTML = '<object type="text/html"
data = "' + url + '" > < /object>';
}
</script>
<ul class="list-group gn-resultview">
<li class="list-group-item" data-ng-repeat="md in searchResults.records" gn-displayextent-onhover="" gn-zoomto-onclick gn-fix-mdlinks="">
<div class="media-body">
<div draggable id="content"> </div>
<h4>
<input gn-selection-md type="checkbox" ng-model="md['geonet:info'].selected" ng-change="change()" />
<!-- Icon for types -->
<a ng-href="#/metadata/{{md.getUuid()}}" onclick="load_home(this.href);return false;" title="{{md.title || md.defaultTitle}}">
<i class="fa gn-icon-{{md.type[0]}}" title="{{md.type[0] | translate}}"/>
{{(md.title || md.defaultTitle) | characters:80}}</a>
</h4>
<p class="text-justify" dd-text-collapse dd-text-collapse-max-length="350" dd-text-collapse-text="{{md.abstract || md.defaultAbstract}}"></p>
<blockquote ng-if="md.getContacts().resource">{{::md.getContacts().resource}}</blockquote>
</div>
<div>
<gn-links-btn></gn-links-btn>
</div>
</li>
</ul>
In the innerhtml page you can call a function of main page such as "test()" like this:
parent.test()
So as an example:
In the innerhtml url:
<script>
function test1()
{
parent.test();
}
</script>
in the innehtml page:
<button type="button"
class="btn btn-default btn-sm btn-block"
data-ng-show="hasAction(mainType)"
onclick="test1()" >
I just starting in a project where we're using thymeleaf and I'm new to the technology.
It's a simple modal to confirm an object to be deleted. So they want me to add the name of the item we're deleting on the message instead of a generic message like: "Are you sure you want to delete?"
They want: "Are you you want to delete Item_Name?"
So I need to pass this name as parameter.
That's the code I have the display the modal:
<button id="btnDelete" value="delete" type="button" class="btn-link" data-toggle="modal" data-object-id="12345" data-object-name="NNN" th:attr="data-object-id=''+${assignment.assignmentId}+'', data-object-name='/nonInstructionalWorkload/deleteAssignment?asssignmentId='+${assignment.assignmentId}+'', data-target='#deleteAssignmentModal'">
And that's the code I have on the modal html:
<form role="form" th:action="#{/deleteAssignment}"
name="assignmentDeleteForm" id="assignmentDeleteForm" method="post">
<div class="modal-header">
<h4 class="modal-title" id="deleteWorkItemabel">Confirm Assignment Delete</h4>
</div>
<div class="modal-body">
<div class="form-group">
<p>Assignment will be deleted, are you sure you want to proceed?</p>
<input type="hidden" id="deleteId" name="deleteId" value="nnnn"/>
</div>
</div>
<div class="modal-footer">
<button type="submit" id="btnDelConfirm" class="btn btn-primary">
Yes
</button>
<button type="button" id="btnDelCancel" class="btn btn-default" data-dismiss="modal">
No
</button>
</div>
</form>
At this point is where I need to add more information on the confirmation message about the assignment item being deleted.
Already tried some approached to get the parameters but didn't work so I'm looking for more option.
Thank you!
Thymeleaf is just template engine that takes your templeate and generate static html out of it. So passing dynamic values to your modal is a javascript work (unless you generate separate modal for each item, but this would be silly).
Using thymeleaf you have to generate a data- attribute containing desired item's name inside the button which opens modal, and that's all. You've already did such thing within th:attr:
th:attr="data-object-id=''+${assignment.assignmentId}+'', data-object-name='/nonInstructionalWorkload/deleteAssignment?asssignmentId='+${assignment.assignmentId}+'', data-target='#deleteAssignmentModal'"
The code above will generate attributes data-object-id,data-object-name and data-target inside the button. I assume that data-object-name is the one you want to use (however it looks more like an URL).
Now you can customize your modal's content using javascript. I can see, that you are using bootstrap as your frontend library, so you should take a look at this example, to have an idea how to accomplish that.
Javascript code below should work fine for you:
$('#deleteAssignmentModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var objectName = button.data('object-name') // Extract info from data-object-name attribute
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-body p').text('Do you want to delete ' + objectName + '?')
})
The sample project on GitHub you can clone and test it. Full video under the readme.
https://github.com/ibrahimkarayel/todoBoot/blob/master/src/main/resources/templates/home.html
<div class="modal modal-delete" th:id="modal-delete+${task.id }">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×
</button>
<h3 id="delModalLabel">Delete Confirmation</h3>
</div>
<div class="modal-body">
<p class="error-text"><strong>Are you sure you want to
delete this task ?</strong></p>
</div>
<div class="modal-footer">
<button class="btn " data-dismiss="modal" aria-hidden="true">
Cancel
</button>
<a th:href="#{/task/delete/{id}(id=${task.id})}">
<span class="btn btn-danger" value="delete">Delete</span></a>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!--end delete modal-->
<script>
$('#modal-delete').on('show.bs.modal', function (e) {
$(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
$('#modal-deleteHiddenId').val($(this).find('.btn-ok').attr('href'));
});
</script>
I've looked for solutions online and it seems that there's something called the data-attribute that I can use to do what I want.
I have two different modal windows, each with its own content, and I want to link each of them to a specific button (or in my case, an image that the user will click on). I tried putting in the "data-attribute", but the second modal window (the one with the id, fujian), is not popping up when I click on the corresponding image.
Does anyone have any suggests or ideas as to why this isn't working and what I should do?
<!--The two image icons that user clicks on-->
<a href='#' onclick='overlay()'><img src="city1.png" alt="sichuan" class="city1"/></a>
<img src="city2.png" alt="sichuan" class="city2"/>
<div id="overlay">
<!--The two separate modal windows-->
<div class="modal">
<img src="sichuan.png" alt="sichuan popUp"/>
<a class="closing" href='#' onclick='overlay()'><img src="/Users/KarenLee/Desktop/exit.png"></img></a>
</div>
</div>
<div id="overlay">
<div class="modal" id="fujian">
<img src="fujian.png" alt="fujian popUp"/>
<a class="closing" href='#' onclick='overlay()'><img src="/Users/KarenLee/Desktop/exit.png"></img></a>
</div>
</div>
And here is my overlay() function if you need to see it:
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
id's must be unique through out the document and you have repeating id <div id="overlay">
You can achieve with single modal what you are trying to achieve with 2 modals with data-attributes
Missing key div elements in modal HTML and that's why with your code only modal-backdrop is showing, nothing else
as far you asked about data-attribute, the anchor <a></a> element has two custom data attributes: data-toggle and data-target.
The toggle tells Bootstrap what to do and the target tells Bootstrap which element is going to open.
So whenever <a></a> link like that is clicked, a modal with targeted id will appear.
let's suppose you have 2 images and wants to show in modal, opening modal with default bootstrap behaviour and also can pass the image to modal using data-attributes which in this case data-image and using bootstrap modal event listener, can show the image in modal when modal open (no need of 2 modals)
<a data-target="#fujian" data-toggle="modal" data-image="http://tympanus.net/Tutorials/CaptionHoverEffects/images/1.png" class="btn btn-primary">Image 1</a>
<a data-target="#fujian" data-toggle="modal" data-image="http://tympanus.net/Tutorials/CaptionHoverEffects/images/2.png" class="btn btn-warning">Image 2</a>
And Modal HTML will be
<div id="fujian" class="modal fade">
<div class="modal-dialog"> //Missing this Div
<div class="modal-content"> //Missing this Div
<div class="modal-body">
<img class="showimage" src="" /> //Image will be shown Here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
and bootstrap event listener
$(document).ready(function () { //Dom Ready
$('#fujian').on('show.bs.modal', function (e) { //Event listener
var image = $(e.relatedTarget).data('image'); //Fetch image url from modal trigger <a> link
$(".showimage").attr("src", image); //load image in modal
});
});
Fiddle