Displaying the content of a modal window

I am working on a modal that needs to print only the content within it, nothing else. Here is the setup for the button inside the modal:

This should not be printed...
    <button id="btnPrint">Print (this btn should not be printed!)</button>

    <hr />

    <div id="printThis">
        This should BE printed!
    </div>

    <div id="printThisToo">
        This should BE printed, too!
    </div>

There is some text next to the button which should not appear when previewing the print view.

Below is the JavaScript code I wrote to specify the content to be printed:

document.getElementById("btnPrint").onclick = function() {
    printElement(document.getElementById("printThis"));
    printElement(document.getElementById("printThisToo"), true, "<hr />");
    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);
}

Finally, here is the CSS I implemented:

@media screen {
  #printSection {
      display: none;
  }
}

@media print {

    body {
        font-family: 'Open Sans', sans-serif;
        font-size: 12px;
        font-weight: 500;
        color: #101010;
        background: #f6f5fa;
        visibility:hidden;
    }
  #printSection, #printSection {
    visibility:visible;
  }
  #printSection {
    position:absolute;
    left:0;
    top:0;
  }

}

Upon clicking the button in the modal, no action occurs and there are no errors in the console. I'm unsure of what the issue might be and would appreciate any assistance.


UPDATED CODE:

(HTML)

    <div>
        This should not be printed...
        <button ng-click="printPreview()">Print (this btn should not be printed!)</button>
    </div>

    <hr />

    <div id="printThis">
        This should BE printed!
    </div>

(JS)

var app = angular.module('dmdesktop');

app.controller('PrintViewCtrl', rollUpCtrl);
rollUpCtrl.$inject = ['$scope', '$rootScope', '$http', '$uibModal','headersvc','locFiltersvc']
function rollUpCtrl($scope, $rootScope, $http, $uibModal, headersvc, locFiltersvc) {

    $scope.printPreview = function() {
        printElement(document.getElementById("printThis"));
    }

    function printElement(elem) {
        alert ("printing!");
        var domClone = elem.cloneNode(true);

        var $printSection = document.getElementById("printSection");

        if (!$printSection) {
            var $printSection = document.createElement("div");
            $printSection.id = "printSection";
            document.body.appendChild($printSection);
        }

        $printSection.innerHTML = "";
        $printSection.appendChild(domClone);
        window.print();
    }
}

(CSS)

same as before

Answer №1

By incorporating the revised code and placing window.print within an evalAsync function, you can now successfully print the content housed within a modal.

 $scope.$evalAsync(function () {
            window.print();
        });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Images are not being shown on the desktop carousel display

I am encountering an issue with my carousel. When I attempt to decrease the height of the carousel, the entire image is not being displayed properly (on desktop), although it works fine on mobile devices. My goal is for the carousel not to take up the ent ...

Harvesting data from an HTML document using BeautifulSoup and Python

I am currently working on extracting text from an HTML file. The HTML file has the following structure: <li class="toclevel-1 tocsection-1"> <a href="#Baden-Württemberg"><span class="tocnumber">1</span> <span class= ...

Top method for centering a flexible SVG vertically once the page width becomes too narrow

Currently, I have two SVG images displayed side by side on a webpage. One SVG needs to maintain a fixed size while the other should scale as needed, and I have achieved this functionality. However, I am facing an issue where I want the two SVGs to align v ...

The AJAX success function is operational, yet the file does not execute

As a newcomer to StackOverflow and web development, I am pressed for time with this assignment, so please bear with me if I struggle with understanding web development terminologies. My current challenge involves calling another php file through ajax in my ...

Jquery scripts seem to have a hit-or-miss success rate

Recently, I added a couple of Jquery scripts in my header to handle the fading in of a specific CSS class and scrolling down another one. Both of these classes are initially set to display: none in CSS, with Jquery responsible for making them visible. Here ...

How can I ensure my card div is responsive in Bootstrap?

My current section consists of only 6 cards, with 3 cards in a row of 2. When the screen size reduces (to mobile phone size), I want each card to be on its own row, displaying one by one as the user scrolls. Although it functions as desired when I resize ...

Tips for coloring just the letters and excluding the Bengali Kar symbol

The Bengali language consists of 40 consonants, including ক, খ, গ, ঘ, ঙ, চ, ছ, জ, ঝ, ঞ, and more. Additionally, there are 10 vowels in the form of Kars, such as া, ি, ী, ু, ূ, ৃ, ে, ৈ, ো, and ৌ. My goal is to highli ...

Input Fields Will Not Resize Correctly in Some Browsers

When resizing a browser, the input fields do not resize properly and end up overlapping each other in the middle, causing distortion before the media script adjusts everything to 100%. The width of the text area set to 100% does not align with the forms. F ...

The ng-selected attribute is nonfunctional, however, it can modify an option to be selected by using selected="selected" when paired with

When I check my HTML code, I notice that even though the value of one of the <option> elements changes to `selected="selected"`, it is not actually selected when viewed. Below is the relevant section of my code: <select chosen class="form-contro ...

Using regular expressions to extract information from HTML code with the JSoup library

I am working on extracting values from a web page source file using HTML rules that I currently have: e=d.select("li[id=result_48]"); e=d.select("div[id=result_48]"); Here are the relevant HTML tags: <li id="result_48" data-asin="0781774047" class="s ...

Tips on managing PDF files from a Web API in AngularJS

I have implemented a Web API post method for generating a PDF: [HttpPost] [Route("api/pdf")] public HttpResponseMessage Post(CustomType type) { StreamContent pdfContent = PdfGenerator.GeneratePdf(); HttpResponseMessage response = new HttpResponse ...

Retrieve information from a cell containing HTML formatting

Is there a way for me to save a specific text from a cell in Google Sheets into a variable, and then use it to send an email with the text formatted within an HTML table? For example: Cell in Google Sheets: "Lorem ipsum dolor sit amet. Ut tenetur a ...

The behavior of -webkit-border-radius differs from that of -moz-border-radius

My website is displaying differently on Safari compared to Firefox. I want the CSS to make it look consistent across both browsers. I understand that I could use two div boxes - one for the outline and one for the image. However, I prefer how Firefox only ...

I am experiencing difficulties with the PHP login form on MAMP as it is not loading properly, displaying only a

Having trouble with php not loading when I open my browser. Here is my database info: MySQL To manage the MySQL Database, you can use phpMyAdmin. If you need to connect to the MySQL Server from your own scripts, use these connection parameters: Host ...

Enhance your Django application

Having recently completed Django's tutorial, I am eager to take my skills to the next level by building an advanced web app with a database. I am wondering if it is necessary to also incorporate a client-side framework like angular.js or backbone when ...

What is the best way to integrate a CSS designed flag in my website's top navigation bar?

My goal is to make my website multilingual, allowing users to switch between languages using flags in a dropdown menu. Initially, I tried creating the flag images solely with CSS for better resizing ability but faced difficulties. So, I resorted to using s ...

Is AngularJS known for its ability to bind variables across different components effortlessly

In the beginning of my Angular controller, I use Promises to download JSON data and then store it in variables: app.controller('mainController', ['$scope', '$http', '$q', function($scope, $http, $q) { var req1 = $ ...

What is the best way to close all other accordion tabs when selecting one?

A simple HTML code was created with the full pen accessible here. <div class="center"> <div class="menu"> <div class="item"> <button class="accordionBtn"><i class=&q ...

Validating the Color Coding of Backgrounds in a Table using Selenium WebDriver and Java

Can Xpath or another method be used to validate the Color Coded Background inside a Table for a specific Value? The background color in question is rgb(96,192,96). There are 5 different links on the page, each with the same background color. It is necessar ...

What is the best way to populate a dropdown menu by matching keys from an array within an ng-repeat

My JSON structure looks like this: 101 : "List": [ { "Name": "Pink" }, { "Name": "Black" } ] 102 : "List": [ { "Name": "Red" }, { "Name": "Yellow" } ] $sco ...