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()?

Answer 1

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.