87424

Append stylesheet link for printing triggered on jQuery click() event

Question:

I have one css link on the head section that has media='screen' attribute, then I want to link the other css file that has media='print' attribute dynamically.

and I do this for the solution.

$("div#alert").click(function(){ $('head') .append("<link rel='stylesheet' href='css/alert.css' media='print' />"); window.print(); });

But.. When I ran that code, the output just printed based on the media='screen' css.

Then I try again with the same code, I clicked the div element and when the print dialog box appear, I clicked the cancel button, then I clicked the div element again.. then clicked the ok button this time.. the media='print' is working... So what do I have to do with the window.print()?

Answer1:

Maybe you are calling window.print() too early (before the print stylesheet has even been downloaded) - try this:

$("div#alert").click(function(){ $('head') .append("<link rel='stylesheet' href='css/alert.css' media='print' />"); setTimeout(function() { window.print(); }, 1000); });

A more elegant solution would be to load the stylesheet asynchronously, insert it in the head, and then call the print() function in the callback of the AJAX request.

Answer2:

You can use $.get and the success callback in this way:

$("div#alert").click(function(){ $.get('css/alert.css', function (response) { $('head') .append("<style rel='stylesheet' media='print'></style>") .html(response); }).success(function () { window.print(); }); });

Answer3:

It looks like your javascript function is running and not letting the browser in to update the CSS.

Watch <a href="http://yuilibrary.com/theater/douglas-crockford/crockford-loopage/" rel="nofollow">this video</a> that explains how event loop works in Javasript. That also means that if your cycles work slowly and block the browser, you can just split them in timeouts.

My advice will be doing something like Alex is telling, to put .print in a timeout.

Recommend

  • How is user.dir configured for Tomcat servlets?
  • Errno 2 using python shutil.py No such file or directory for file destination
  • How to import Navit into Eclipse and use it in own android project
  • Sending rails errors to rspec output
  • change color of jstree node
  • Why doesnt this Java loop in a thread work?
  • Subclassing QGraphicsItem prevents me from being able to use itemAt() on a QGraphicsScene/View
  • Selenium to click on a javascript button corresponding to a text
  • Ajax Upload File: $_FILES is empty but files exists in request header
  • Simulate click Geckofx vb,net
  • C: Incompatible pointer type initializing
  • why xml file does not aligned properly after append the string in beginning and end of the file usin
  • Detect when Facebook like button is clicked
  • Date Conversion from yyyy-mm-dd to dd-mm-yyyy
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • Use of this Javascript
  • Jquery UI tool tip close icon
  • Alert pop up with LWUIT
  • C++ Partial template specialization - design simplification
  • Disabling Alt-F4 on a Win Forms NotifyIcon
  • HTML download movie download link
  • Knitr HTML Loop - Some HTML output, some R output
  • Deserializing XML into class C#
  • Weird JavaScript statement, what does it mean?
  • How to get next/previous record number?
  • Function pointer “assignment from incompatible pointer type” only when using vararg ellipsis
  • Use group_by to filter specific cases while keeping NAs
  • Python: how to group similar lists together in a list of lists?
  • AngularJs get employee from factory
  • Acquiring multiple attributes from .xml file in c#
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • How can I remove ASP.NET Designer.cs files?
  • python draw pie shapes with colour filled
  • Django query for large number of relationships
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?
  • java string with new operator and a literal