Javascript print not showing all HTML element in print dialog

Question

0.00/5 (No votes)

See more:

I am using javascript print to open given div content in new tab and print a page. On click of print button, printDiv() function is called. My code is

function printDiv() {
var printHTML = $('#divPageContent').html();

var link = " <link type=\"text/css\" rel=\"stylesheet\" href=\"\/Content/themes/styles.css\" /> <script type=\"text/javascript\" src=\"\/Scripts/jquery-1.5.1.min.js \" ><\/script>";
var script = "<script type=\"text/javascript\"> $(document).ready(function () { $( \".pagination\" ).remove();$( \"#print\" ).remove();$( \".styled\" ).remove(); }); <\/script>";
var tag = "<html> <head> " + link + script + "</head><body onload =\"window.print()\"> " + printHTML + " </body></html>";

var mywindow = window.open();
mywindow.document.open();
mywindow.document.write(tag);

mywindow.document.close();
setTimeout(function () { mywindow.close(); }, 1);
}

On click of print, everything works fine. Following html is generated on tag. Now the issue is child element inside ul tag class= "option-list RadioButtonList" is not shown in print dialog. However, if I cancel the dialog, child element of this tag is shown.

HTML

"<html> <head>  <link type="text/css" rel="stylesheet" href="/Content/themes/styles.css" />  <script type="text/javascript" src="/Scripts/jquery-1.5.1.min.js " ></script><script type="text/javascript">    $(document).ready(function () { $( ".pagination" ).remove();$( "#print" ).remove();$( ".styled" ).remove();  });    </script></head><body onload ="window.print()">       <div id="StagePageControlId-6174" data-hasresult="0" data-controltype="Headline" class="customcontrol">
        <h1>headline</h1> <div id="print"> <a href="#" class="printicon" onclick="printDiv();" style="float: right; position: relative;top: -40px; right: 20px;">Print </a> </div>
    </div> 
    <div id="StagePageControlId-6175" data-hasresult="0" data-controltype="TextEditor" class="customcontrol">
        <div class="editor-wrapper">r
</div>
    </div> 
    <div id="StagePageControlId-6176" data-hasresult="1" data-controltype="RadioButtonList" class="customcontrol">
                        <h3>rbl1</h3>
<ul class="option-list RadioButtonList" data-controlproperties="26159"> 
<li data-delete="0" class="OrderingItem "><span class="radio" style="background-position: 0px 0px;"></span><input type="radio" onclick="RadioButtonList.ApplyClickevent(this);" class="styled" name="Option-26159" id="option-12616"><label for="option-12616">1</label></li><li data-delete="0" class="OrderingItem "><span class="radio" style="background-position: 0px 0px;"></span><input type="radio" onclick="RadioButtonList.ApplyClickevent(this);" class="styled" name="Option-26159" id="option-12617"><label for="option-12617">2</label></li></ul>
    </div> 
<div class="pagination">
    <ul>
        <li class="prev"><a class="btn-gray-left" href="#">Föregående steg</a></li>
        <li>Steg 2 av 4</li>
        <li class="next"><a class="btn-blue-right" href="#">Nästa steg</a></li>
    </ul>
</div>
 </body></html>"

What I have tried:

I had removed onclick from ul li to see if this was causing the issue. However it did not worked.

Posted 19-Aug-16 2:21am

Codes DeCodes

Updated 19-Aug-16 3:57am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2016-08-19T03:57:00

Hardly surprising, given the child elements have a class of styled, and your injected script is removing all elements with that class! :)

HTML

$( ".styled" ).remove();
...
<ul class="option-list RadioButtonList" ...>
<li ...>...<input type="radio" ... class="styled" ...

If you want those elements to be printed, then you'll need to remove the script that's removing them from the document.