I am trying to print the contents of a Bootstrap Modal. This works well in Chrome, but in IE, when the modal prints the entire page contents overlap. I have tried a few solutions found Here, but I can't get any of them to work for me.
Here is my HTML for my modal:
<div ng-cloak>
<div id="stack4" class="modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;">
<div class="modal-dialog modal-responsive">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><span ng-bind="title"></span></h4>
</div>
<div class="modal-body">
#Html.Partial("_PrintSSQ")
</div>
<div class="modal-footer">
<span class="pull-left"><button type="button" class="btn btn-primary" data-dismiss="modal">Close</button></span><span class="pull-right"><button type="button" class="btn btn-primary" ng-click="savePdf()">Prepare Print View</button></span>
</div>
</div>
</div>
</div>
</div>
Depending on the user's selection via checkbox it inserts which partial view to print using the following:
<div id="saveToPdf">
<div ng-repeat="ps in print.sections" >
<div ng-if="ps.QuestionSectionID == 1">
<div><h4>{{ps.vchSectionName}}</h4></div>
#Html.Partial("_PrintCompanyProfile")
<br />
</div>
<div ng-if="ps.QuestionSectionID == 2">
<div><h4>{{ps.vchSectionName}}</h4></div>
#Html.Partial("_PrintCompanyServices")
<br />
</div>
<div ng-if="ps.QuestionSectionID == 3">
<div><h4>{{ps.vchSectionName}}</h4></div>
#Html.Partial("_PrintInformationRelease")
<br />
</div>
</div>
</div>
Here is my CSS:
#media print {
body {
visibility:hidden;
}
#printSection, #printSection {
visibility:visible;
}
#printSection {
position:absolute;
left:0;
top:0;
}
}
Here is my Angular Controller js:
$scope.savePdf = function () {
printElement(document.getElementById('saveToPdf'));
window.print();
};
function printElement(elem, append, delimiter) {
var domClone = elem.cloneNode(true);
var $printSection = document.getElementById("printSection");
if (!$printSection) {
var $printSection = document.createElement("div");
$printSection.id = "printSection";
document.body.appendChild($printSection);
}
if (append !== true) {
$printSection.innerHTML = "";
}
else if (append === true) {
if (typeof (delimiter) === "string") {
$printSection.innerHTML += delimiter;
}
else if (typeof (delimiter) === "object") {
$printSection.appendChlid(delimiter);
}
}
$printSection.appendChild(domClone);
}
The modal displays like this:
but it prints like this:
This is critical as most of our users use IE. Any assistance is greatly appreciated!!!!
I was able to get this to work by adding:
<style type="text/css" media="print">
.lb1 {
display: none;
}
</style>
Then putting everything that I didn't want to show in a div using the lb1 class.
Related
I am new to JavaScript and I'm working on a project with openlayers and geoserver and I need to add features to a layer. I succeeded to draw a feature but for saving it I need to enter its attributes which I implemented in a bootstrap modal but when I finish drawing the modal doesn't show I get just a transparent page and it stays like that.
Here it is my html code :
<!-- Attribute Update Modal -->
<div class="modal " id="attributeUpdateModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLabel">Attributes</h3>
<button class="btn-close btn-light" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="attribute-body">
<div id="attributeContainer"></div>
</div>
<div class="modal-footer">
<div class="col-md-12 text-center">
<button id="btnSave" type="button" class="btn btn-success">
Save
</button>
<button id="btnCancel" type="button" class="btn btn-warning">
Cancel
</button>
</div>
</div>
</div>
</div>
</div>
Here it is my JavaScript code :
drawInteraction.on("drawend", function (e) {
var feature = e.feature;
feature.set("geometry", feature.getGeometry());
modifiedFeatureList.push(feature);
var featureProperties = editGeoJSON
.getSource()
.getFeatures()[0]
.getProperties();
document.getElementById("attributeContainer").innerHTML = "";
for (var key in featureProperties) {
if (featureProperties.hasOwnProperty(key)) {
if (key != "geometry") {
if (key != "id") {
var div = document.createElement("div");
div.className = "mb-3";
var lbl = document.createElement("label");
lbl.className = "form-label";
lbl.innerHTML = key;
var inputBox = document.createElement("input");
inputBox.className = "form-control";
inputBox.id = key;
inputBox.value = "";
div.appendChild(lbl);
div.appendChild(inputBox);
document.getElementById("attributeContainer").appendChild(div);
}
}
}
}
$("#attributeUpdateModal").modal('show');
});
Does anyone have an idea about this issue?
I'm creating a website using flask, HTML, CSS, and Javascript. I would like to add a function that shows a hidden div when selecting a specific option(In this case, if users select '2' the hidden div is shown). However, this function doesn't work.
The first-page userssee
if select 1, show nothing
if select 3, show a hidden div. But it doesn't work
Please help it :( Thank you!
<style>
.hidden{
display: none;
}
.show{
display: block;
}
</style>
<div class="modal fade" id="modalupdate{{data.id}}" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-bs-dismiss="modal">×</button>
<h4 class="modal-title">Update Information</h4>
</div>
<div class="modal-body">
<form action="{{ url_for('update_ticket') }}" method="POST" id="update_form">
<select id="location">
<option value="val1">1</option>
<option value="val2">2</option>
</select>
<div class="hidden" id="val22">hello</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#modalupdate{{data.id}}').on('hide.bs.modal', function() {
$(this).find('#update_form').trigger('reset');
$(this).find('#val22').trigger('reset');
});
$('select#location').on('change', function() {
if ($(this).val() == "val2") {
$("div#val22").removeClass("hidden");
$("div#val22").addClass("show")
} else {
$("div#val22").removeClass("show");
$("div#val22").addClass("hidden")
}
});
});
</script>
I am not a jQuery person, but it seems there is a lot of syntactical error in the code. It's the same with your "onChange" event and "Queryselector".
I have done the minimal changes in the syntax and get the result you want, you can definitely correct the rest of the code according to the standard that jQuery follows. -
here the corrected code [the onChange event for select#location querySelector]-
<script>
$(document).ready(function() {
let data = {
id: 2
};
$(`#modalupdate${data.id}`).on('hide.bs.modal', function() {
$(this).find('#update_form').trigger('reset');
});
$('select#location').on('change', function() {
if ($(this).val() == "val2") {
$("div#val22").show();
} else {
$("div#val22").hide();
}
});
});
</script>
Hope it helps.
again, probably a terrible title - but what I'm trying to do is to make a simple search feature on my website. You click a nav button, which updates the search bar, whi in turn triggers an onchange event to update the current appended list.
function update() {
var list = $("#comic__modern-list");
list.empty();
$.each(Object.keys(comics), function() {
var currentObject = comics[this];
var filter = comics[this].type;
var publisher = comics[this].publisher;
if (search == "") {
if(filter == "modern") {
list.append(`
<div class="comic__box">
<div class="comic__image-box">
<img src="${currentObject['data-item-image']}" alt="${currentObject['data-item-description']}" class="img-fluid">
<div class="comic__desc-wrap">
<div class="comic__desc">${currentObject['data-item-description']}, issue #${currentObject['issue']} (${currentObject['year']})</div>
</div>
</div>
<div style="text-align:center; margin-top: 1rem">
<button
class="btn btn-warning snipcart-add-item comic__button"
data-item-id="${currentObject['data-item-id']}"
data-item-price="${currentObject['data-item-price']}"
data-item-url="${currentObject['data-item-url']}"
data-item-description="${currentObject['data-item-description']}"
data-item-image="${currentObject['data-item-image']}"
data-item-name="${currentObject['data-item-name']}">
<div class="comic__desc-desk">£${currentObject['data-item-price']}<br>Add to cart</div><div class="comic__desc-mob">BUY <br> ${currentObject['data-item-description']}, Issue: ${currentObject['issue']} (${currentObject['year']})</div>
</button>
</div>
</div>
`)
}
} else if (search == publisher) {
list.append(`
<div class="comic__box">
<div class="comic__image-box">
<img src="${currentObject['data-item-image']}" alt="${currentObject['data-item-description']}" class="img-fluid">
<div class="comic__desc-wrap">
<div class="comic__desc">${currentObject['data-item-description']}, issue #${currentObject['issue']} (${currentObject['year']})</div>
</div>
</div>
<div style="text-align:center; margin-top: 1rem">
<button
class="btn btn-warning snipcart-add-item comic__button"
data-item-id="${currentObject['data-item-id']}"
data-item-price="${currentObject['data-item-price']}"
data-item-url="${currentObject['data-item-url']}"
data-item-description="${currentObject['data-item-description']}"
data-item-image="${currentObject['data-item-image']}"
data-item-name="${currentObject['data-item-name']}">
<div class="comic__desc-desk">£${currentObject['data-item-price']}<br>Add to cart</div><div class="comic__desc-mob">BUY <br> ${currentObject['data-item-description']}, Issue: ${currentObject['issue']} (${currentObject['year']})</div>
</button>
</div>
</div>
`)
}
});
}
The current list is generated by this, which works fine:
$.each(Object.keys(comics), function() {
var currentObject = comics[this];
var currentObject2 = comics[this].type;
console.log(currentObject2);
if (search == "") {
if(currentObject2 == "modern") {
var list = $("#comic__modern-list");
list.append(`
<div class="comic__box">
<div class="comic__image-box">
<img src="${currentObject['data-item-image']}" alt="${currentObject['data-item-description']}" class="img-fluid">
<div class="comic__desc-wrap">
<div class="comic__desc">${currentObject['data-item-description']}, issue #${currentObject['issue']} (${currentObject['year']})</div>
</div>
</div>
<div style="text-align:center; margin-top: 1rem">
<button
class="btn btn-warning snipcart-add-item comic__button"
data-item-id="${currentObject['data-item-id']}"
data-item-price="${currentObject['data-item-price']}"
data-item-url="${currentObject['data-item-url']}"
data-item-description="${currentObject['data-item-description']}"
data-item-image="${currentObject['data-item-image']}"
data-item-name="${currentObject['data-item-name']}">
<div class="comic__desc-desk">£${currentObject['data-item-price']}<br>Add to cart</div><div class="comic__desc-mob">BUY <br> ${currentObject['data-item-description']}, Issue: ${currentObject['issue']} (${currentObject['year']})</div>
</button>
</div>
</div>
`)
}
}
});
From what I can gather, this has to do with the keyword "this" no longer meaning what it did when it was outside of the function, so I'm assuming the fix will be to do with bind(), but I can't make heads nor tails of it.
p.s, if there's an easier/simpler way to set up a search system, please enlighten me!
I have a problem with javascript show/hide content from div. When I click on the first button I got content from that but when I click on the second I need to hide content from first and show content from second div. My code for this is:
<script type="text/javascript">
function showHideDiv(ele) {
var srcElement = document.getElementById(ele);
if (srcElement != null) {
if (srcElement.style.display == "block") {
srcElement.style.display = 'none';
}
else {
srcElement.style.display = 'block';
}
return false;
}
}
function showHideDiv1(ele) {
var srcElement = document.getElementById(ele);
if (srcElement != null) {
if (srcElement.style.display == "block") {
srcElement.style.display = 'none';
}
else {
srcElement.style.display = 'block';
}
return false;
}
}
</script>
HTML:
<div class="listsearch-header fl-wrap">
<h3>
<a class="button-one" onClick="showHideDiv('divMsg')" title="Relevant Title" href="#">Places</a>
<a class="button-two" onClick="showHideDiv1('divMsg1')" title="Relevant Title" href="#">Events</a>
</h3>
<div id="divMsg" style=" display:none">
<b>Places</b>
</div>
<div id="divMsg1" style="display:none">
<b>Events</b>
</div>
</div>
How to solve this when clicking on second button to hide content from the first button. Thanks, all
You could do with toggle the class based on clicked element
function showHideDiv(ele) {
var srcElement = document.getElementById(ele);
document.querySelectorAll('.box').forEach(a => a.classList.add('hide'))
if (srcElement != null) {
srcElement.classList.toggle('hide')
}
}
.hide {
display: none;
}
<div class="listsearch-header fl-wrap">
<h3>
<a class="button-one" onClick="showHideDiv('divMsg')" title="Relevant Title" href="#">Places</a>
<a class="button-two" onClick="showHideDiv('divMsg1')" title="Relevant Title" href="#">Events</a>
</h3>
<div id="divMsg" class="box hide">
<b>Places</b>
</div>
<div id="divMsg1" class="box hide">
<b>Events</b>
</div>
</div>
You could use a generic function which takes the actual elements to be shown or hidden as input parameters.
function showHideDiv(show, hide) {
document.getElementById(show).style.display = "block";
document.getElementById(hide).style.display = "none";
}
<div class="listsearch-header fl-wrap">
<h3>
<a class="button-one" onClick="showHideDiv('divMsg','divMsg1')" title="Relevant Title" href="#">Places</a>
<a class="button-two" onClick="showHideDiv('divMsg1','divMsg')" title="Relevant Title" href="#">Events</a>
</h3>
<div id="divMsg" style=" display:none">
<b>Places</b>
</div>
<div id="divMsg1" style="display:none">
<b>Events</b>
</div>
</div>
I have got an issue where my modal only displays the first image. What I am trying to do is that i want to display a dynamic gallery. Every "post" can have 0-* images and based on how many images there are in the database for this post thats how many will appear. I came across this issue and have found others having similar issues but not exactly the same.
This code is basically a partial view where the post is generated. The Modal is displayd correct amount of times but only displays the first picture.
Thanks so much in advance
<ul class="imageRow">
#foreach (var item in Model)
{
<div class="col-lg-3 col-md-4 col-xs-6">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-target="#image-gallery">
<img class=" img-responsive" id=" imageresource" src="data:image/jpeg;base64,#item">
</a>
</div>
<div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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="image-gallery-title"></h4>
</div>
<div class="modal-body">
<img class=" img-responsive" id=" imageresource" src="data:image/jpeg;base64,#item">
</div>
<div class="modal-footer">
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="show-previous-image">Previous</button>
</div>
<div class="col-md-2">
<button type="button" id="show-next-image" class="btn btn-default">Next</button>
</div>
</div>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script>
$(document.body).on('hidden.bs.modal', function () {
$('#image-gallery').removeData('bs.modal');
});
$(document).ready(function () {
loadGallery(true, 'a.thumbnail');
//This function disables buttons when needed
function disableButtons(counter_max, counter_current) {
$('#show-previous-image, #show-next-image').show();
if (counter_max == counter_current) {
$('#show-next-image').hide();
} else if (counter_current == 1) {
$('#show-previous-image').hide();
}
}
function loadGallery(setIDs, setClickAttr) {
var current_image,
selector,
counter = 0;
$('#show-next-image, #show-previous-image').click(function () {
if ($(this).attr('id') == 'show-previous-image') {
current_image--;
} else {
current_image++;
}
selector = $('[data-image-id="' + current_image + '"]');
updateGallery(selector);
});
function updateGallery(selector) {
var $sel = selector;
current_image = $sel.data('image-id');
$('#image-gallery-caption').text($sel.data('caption'));
$('#image-gallery-title').text($sel.data('title'));
$('#image-gallery-image').attr('src', $sel.data('image'));
disableButtons(counter, $sel.data('image-id'));
}
if (setIDs == true) {
$('[data-image-id]').each(function () {
counter++;
$(this).attr('data-image-id', counter);
});
}
$(setClickAttr).on('click', function () {
updateGallery($(this));
});
}
});
</script>
}
You are using the same ID (id="image-gallery") for all of your modals. HTML element IDs are supposed to be unique! You need to generate different IDs for each of your modals.