In certain situations, the JavaScript code runs either before or after the print dialog is displayed when using the window

I am facing an issue with the print function on my web page. I want to display a thank you message to the user after they have either printed or cancelled the print dialog.

Below is a simplified version of the print function code:

function printThenThank() {
  window.print();
  $('.thankYou').removeClass('hidden');
  // alert('debug message');
}

The problem I'm encountering is that sometimes the "hidden" thank you message appears in the printout, while other times it does not. I have tested it multiple times by including debug messages before and after the print request is made.

Initially, I thought window.print() was a synchronous call, but it seems to work more like an asynchronous trigger for a process involving a modal dialog.

Is there a reliable cross-platform method to ensure that the desired content changes are only implemented once the user has chosen to print or cancel from the window.print() dialog?

javascriptprinting

Answer №1

To prevent potential race conditions, one approach is to activate the thank you message using a setTimeout function, though this method may only be effective if the call is synchronous. However, it's not advisable to rely on this solution across all web browsers.

Instead, consider concealing the thank you message when the page is printed:

HTML:

<div class="thankYou no-print">Thanks for printing</div>

CSS:

@media print {    
  .no-print, .no-print *
  {
    display: none !important;
  }
}

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

Getting the Featured Image from a Post Link in Wordpress: A Step-by-Step Guide

For my Wordpress project, I have a group of links leading to inner pages, each with their own featured image. These links are created using the menu feature in Wordpress. My goal is to allow users to click on these links and have the featured image from t ...

javascriptphpjquerywordpress

What is the process for subtracting data from an object in a Node.JS environment?

My task involves analyzing sensor data which is stored as an array of objects containing current and previous month's information. The goal is to calculate the difference between the current and previous month's data and add this difference to th ...

javascriptnode.js

Ways to initiate a transition upon clicking a button, causing it to switch from being hidden (`display: none`) to visible (`display: block`)

I'm attempting to create a smooth transition effect when a button is clicked, similar to a toggle function, where the content below it seamlessly shifts instead of abruptly moving. The classic example of this is the Bootstrap navbar hamburger menu, wh ...

javascripthtmlcss

Shorten the content while preserving the HTML using JavaScript

When printing a string containing HTML links, I need to truncate the visible text while preserving the link structure. Simply using a substring method would disrupt the HTML tags in the string. I aim to display only 100 characters but also remove any inc ...

javascripthtmlsubstringtruncatesubstr

Creating a table with React components to display an object

I'm a React novice struggling to render an object in a table. While I can access the ctx object using console.log, I can't seem to display it in the table on the browser. Any help and advice would be greatly appreciated. The code snippet is provi ...

javascriptreactjshtml-table

Develop an interactive single-page scrolling system for seamless navigation between points

Creating a navigation that scrolls to the selected element when clicking on an <a> tag is my current project. I want it to animate smoothly during the transition. The navigation should go from: <a href="#Home">Home</a> To: <div id= ...

javascriptjquery

Clicking within the text activates the dropdown menu, but clicking outside the text does not

My custom drop down menu is not functioning properly. When I click on the text, it successfully links to another place, but when I click beside the text, it does not link. Can you please help me identify what's wrong here? Your assistance would be gre ...

javascriptphpjqueryhtmlcss

Categorize elements in an array based on a specific keyword

Struggling with my AngularJS (1) application, I can't seem to figure out how to split an array of items into separate arrays grouped by item. In simpler terms, I have an array with different items and I want to group them by their uuid like this: [ ...

javascriptangularjsjson

Trouble arises when using Wijmo's valueChanged event and data binding in Angular 2

As I was working on the following code snippet that triggers a function when the user modifies the wj-input-time value: @Component({ selector: 'my-app', template: '<wj-input-time [step]="1" (valueChanged)="test()"></wj-inpu ...

javascripteventsangularevent-handlingwijmo5

When the enter key is pressed, the form will be submitted and the results will be displayed in a modal window without

Behold, my unique form! It lacks the traditional <form></form> tags. <input id="query" name="query" style="font-size: 18pt" id="text" data-email="required" type="text" placeholder="Search Here from <?php echo $row['no']."+"; ?& ...

javascriptjqueryhtmlajaxforms

What is the best way to create an answer label box that validates your response?

I am looking to design a question box label that resembles a search box. In this unique setup, users will have the option to input their answer into the question label. For example, if the user types 'kfuffle' as the answer, they will automatical ...

javascripthtml

Validation of form groups in Angular 2 using template-driven approach

I am seeking guidance on how to handle form validation in Angular 2 template-driven forms. I have set up a form and I want to display a warning if any input within a group is invalid. For example, consider the following form structure: <form class="fo ...

javascriptformsvalidationangular

Exploring ways to extract key:value pairs from an encoded URL form using POST in express/node.js

I have a web form with 4 input fields. The form is set up as follows: <form action="/" method="post" onsubmit="alert('data submittet')"> It should default to x-www-form-urlencoded. The form functions correctly and I am able to submit my d ...

javascriptnode.jsexpresspostbody-parser

Difficulty of combining forEach with findById in mongoose

I need to create a Node route that adds properties to objects and pushes them onto an array declared outside a forEach loop. I have noticed that while the array appears to be filled with data when I log it within the loop, it somehow becomes empty when I r ...

javascriptnode.jsmongoose

Bringing an AMD module into a Mocha test

I recently encountered an error while using Mocha to test code that was exported as an AMD module. When running the Mocha test, I received the following error message: ReferenceError: define is not defined at Object.<anonymous> (/home/malintha/proje ...

javascriptnode.jsmocha.jsamd

Using the `map()` method in React's array

I stumbled upon an interesting example at http://codepen.io/lacker/pen/vXpAgj that closely resembles my current issue. Let's consider the following array: [ {category: 'Sporting Goods', price: '$49.99', stocked: true, name: &apo ...

javascriptarraysreactjsmapping

Attempting to construct an 'or' query that relies on the combination of two distinct joined tables

Currently, I am facing a challenge with selecting rows from a PostgreSQL database through Sequelize. I need to retrieve data where the ID exists in either joined table 1 or joined table 2. In my attempts using Sequelize, I used 'include' to quer ...

javascriptsqlnode.jspostgresqlsequelize.js

Only if there is an update in the SQL database, I wish to refresh the div

I have created a voting system and I am facing an issue with the data updating. I have implemented a setInterval function in javascript to load the data every 2 seconds, but it's not working as expected. There are no errors shown, but the data is not ...

javascriptphpjquery

Modifying the color of the error icon in Quasar's q-input component: a step-by-step guide

https://i.stack.imgur.com/4MN60.png Is it possible to modify the color of the '!' icon? ...

javascripthtmlcsstypescriptquasar-framework

Issue encountered while attempting to install the node-jasper package

I'm encountering an error stating that python.exe is not found, despite having installed Python and added it to the environmental variables. I've also attempted using Node versions 8, 10, and 12 without success. I tried installing node-jasper fo ...

javascriptnode.js