I have a rating control implemented using Ajax in my aspx page. However, when I try to print the page using JavaScript, the rating control does not appear in the printed version or print preview. Does anyone have a solution for this issue? Below is the tag for my Rating control:
<ajaxToolkit:Rating ID="rtDriverRating" AutoPostBack="false" runat="server" MaxRating="5" StarCssClass="Star" WaitingStarCssClass="WaitingStar" EmptyStarCssClass="Star" FilledStarCssClass="FilledStar" ReadOnly="true"></ajaxToolkit:Rating>This is the JavaScript function used for printing:
function printdiv(printpage) {
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var newstr = document.all.item(printpage).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr + newstr + footstr;
window.print();
document.body.innerHTML = oldstr;
//window.location.reload();
return false;
}Upon inspecting the page, this is what I found:
<a href="javascript:void(0)" id="ContentPlaceHolder1_rtDriverRating_A" title="5" style="text-decoration:none"><span id="ContentPlaceHolder1_rtDriverRating_Star_1" class="FilledStar" style="float:left;"> </span><span id="ContentPlaceHolder1_rtDriverRating_Star_2" class="FilledStar" style="float:left;"> </span><span id="ContentPlaceHolder1_rtDriverRating_Star_3" class="FilledStar" style="float:left;"> </span><span id="ContentPlaceHolder1_rtDriverRating_Star_4" class="FilledStar" style="float:left;"> </span><span id="ContentPlaceHolder1_rtDriverRating_Star_5" class="FilledStar" style="float:left;"> </span></a>The appearance of the rating control on the page can be seen here: Ajax Rating control on the page
Edit: Including my CSS code:
.Star {
background-image: url(/Content/imgs/images/Star.gif);
height: 17px;
width: 17px;
}
.WaitingStar {
background-image: url(/Content/imgs/images/WaitingStar.gif);
height: 17px;
width: 17px;
}
.FilledStar {
background-image: url(/Content/imgs/images/FilledStar.gif);
height: 17px;
width: 17px;
}