Click here to Skip to main content
15,125,854 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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
Updated 19-Aug-16 4:57am

1 solution

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.
   

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




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900