Tapestry with printThis.js including unwanted href URL in printed page

Question

Tapestry 5.4.5 using printThis.js 2.0

When using the print function we are getting unwanted href URL's included in the printed page. Adding class="hidden-print" to the <t:eventlink> causes the entire element to be omitted. We want the image/text for the eventlink to be included.

When upgrading to Tapestry 5.4.5, we went with using Bootstrap's modals. The problem we are having seems to be related to this and the fact the modals are triggered with the eventlinks.

This is the result we want Browser view

This is what we are getting Resulting PDF

This was the print result under Tapestry 5.3 when we were using Tapestry 5 jQuery dialogajaxlink for the modals Tapestry 5.3 result with dialogajaxlink

We opted to go with the Bootstrap modals when upgrading to Tapestry 5.4.5 as we were having issues with the dialogajaxlinks causing "flashing" on page render when the dialoglinks are used in conjunction with grids.

This is the current .tml code

<div class="container-fluid">
    <t:zone t:id="studentDetailZone">
        <div class="col-lg-12 col-md-12">
            <t:print t:contentClientId="\#studentDetailZone" t:heading="CCP - Student Detail" />
            <t:pagelink page="highered/lea/indexsummary" class="btn btn-ssdt">Return to Summary</t:pagelink>
            <t:delegate to="studentDetails" />
            <t:pagelink page="highered/lea/indexsummary" class="btn btn-ssdt btn-last">Return to Summary</t:pagelink>
        </div>
    </t:zone>
</div>

<t:block t:id="studentDetails">
    <div class="studentBanner">
        <div class="detailDisplay">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>SSID</th>
                    <th>Name</th>
                    <th>HEI</th>
                    <th>Year</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>${currentStudent.stateStudentId}</td>
                    <t:if test="hasStuIdentityRole()">
                        <td>${currentStudent.name?.fullName}</td>
                        <p:else>
                            <td>&nbsp;</td>
                        </p:else>
                    </t:if>
                    <td>${currentHEI.nameAndIrn}</td>
                    <td>${currentStudent.schoolYear.year}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="detailDisplay">
        <h5>Higher Education Reported Data</h5>
        <t:grid class="table table-hover table-striped" source="heiCourses"
                row="heiCourse"
                t:mixins="DisableGridSort, GridDecorator"
                t:include="${includeColumns}"
                t:add="flag, audit, actions"
                t:reorder="${reorderColumns}"
                t:rowClass="prop:currentClass">
            <p:flagHeader></p:flagHeader>
            <p:actionsHeader></p:actionsHeader>
            <p:courseIdHeader>Higher Ed Courses</p:courseIdHeader>
            <p:rosterDateHeader>Enrollment <br/> as Of</p:rosterDateHeader>
            <p:creditHoursHeader>Credit <br/> Hours </p:creditHoursHeader>
            <p:deliveryMethodHeader>Dlvry <br/> Mthd</p:deliveryMethodHeader>
            <p:alternativeCreditHourPaymentHeader>On Alt<br/>Pay</p:alternativeCreditHourPaymentHeader>
            <p:escalatedHeader>Esclt</p:escalatedHeader>
            <p:dateRangeHeader>Course Dates</p:dateRangeHeader>
            <p:subjectHeader>HEI Subj</p:subjectHeader>
            <p:campusCodecampusCodeHeader>Campus<br/> Code</p:campusCodecampusCodeHeader>
            <p:lastModifiedDateHeader>Last Updated</p:lastModifiedDateHeader>
            <p:auditHeader></p:auditHeader>
            <p:flagCell>
                <t:zone t:id="statusZone" id="modalStatusZone">
                    <t:eventlink event="showCourse" context="heiCourse.id" async="true"><img src="${asset:img}/${statusIcon}" title="${statusTitle}" alt=""/></t:eventlink>
                </t:zone>
            </p:flagCell>
            <p:actionsCell>
                <div class="btn-group row-flex">
                    <t:if test="heiCourse.active">
                        <t:if test="principalIsOde()" negate="true">
                            <t:if test="allowEscalationCancelation()">
                                <t:actionlink t:id="cancelEscalation" t:mixins="ClickOnce" id="cancelEscalation" context="heiCourse.id" class="btn btn-ssdt" >Cancel Escalation</t:actionlink>
                                <p:else>
                                    <t:if test="heiCourse.isReviewableByLEA()">
                                        <t:if test="hasUpdateAccess()">
                                            <div class="addComment" >
                                                <t:pagelink page="highered/lea/reviewstudent" context="heiCourse.id" class="btn btn-ssdt grid-btn">Review</t:pagelink>
                                            </div>
                                            <div class="reviewNoError">
                                                <t:if test="${isSplitPayment()}" negate="true">
                                                    <t:actionlink t:id="reviewNoErrors" t:mixins="ClickOnce" id="reviewNoErrors" context="heiCourse.id" class="btn btn-ssdt grid-btn">Approve</t:actionlink>
                                                </t:if>
                                            </div>
                                        </t:if>
                                        <p:else>
                                            <div class="legal">
                                                <p>${heiCourse.getNonReviewableText()}</p>
                                            </div>
                                        </p:else>
                                    </t:if>
                                </p:else>
                            </t:if>
                        </t:if>
                    </t:if>
                    <t:if test="allowOverride()">
                        <div class="addComment" >
                            <t:pagelink page="highered/lea/overridestudent" context="heiCourse.id" class="btn btn-ssdt grid-btn">Add Override</t:pagelink>
                        </div>
                    </t:if>
                </div>
            </p:actionsCell>
            <p:courseIdCell>
                <t:zone t:id="courseZone" id="modalCourseZone">
                    <t:eventlink event="showCourse" context="heiCourse.id" async="true">${heiCourse.courseId} - ${heiCourse.course}</t:eventlink>
                </t:zone>
            </p:courseIdCell>
            <p:rosterDateCell><t:output value="heiCourse.rosterDate?.time" format="dateFormat" /></p:rosterDateCell>
            <p:creditHoursCell>
                <t:any t:id="creditHours"
                       title="${heiCourse.creditHourType}">
                    ${heiCourse.creditHours} ${heiCourse.creditHourType?.code}
                </t:any>
            </p:creditHoursCell>
            <p:deliveryMethodCell>
                <t:any t:id="deliveryMethod"
                       title="${heiCourse.deliveryMethod?.displayText}">
                    ${heiCourse.deliveryMethod?.value}
                </t:any>
            </p:deliveryMethodCell>
            <p:alternativeCreditHourPaymentCell>${altPayDisplay}</p:alternativeCreditHourPaymentCell>
            <p:escalatedCell>${escalationDisplay}</p:escalatedCell>
            <p:dateRangeCell>${relationshipDateRangeDisplay()}</p:dateRangeCell>
            <p:campusCodecampusCodeCell>
                <t:any t:id="campusCode" title="${heiCourse.campusCode?.campusName}">${heiCourse.campusCode?.campusCode}</t:any>
            </p:campusCodecampusCodeCell>
            <p:lastModifiedDateCell><t:output value="heiCourse.lastModifiedDate" format="dateFormat" /></p:lastModifiedDateCell>
            <p:auditCell>
                <t:zone t:id="auditZone" id="modalAuditZone">
                    <t:eventlink event="showAudits" context="heiCourse.id" async="true"><img src="${asset:img/triangle-icon-16x16.png}" title="Audit History"/></t:eventlink>
                </t:zone>
            </p:auditCell>
        </t:grid>

        <t:if test="hasPaymentData()">
            <h5>LEA Payment Responsibility</h5>
            <t:grid class="table table-hover table-striped" source="heiPayments" row="heiPayment" t:mixins="DisableGridSort, GridDecorator"
                    include="reportingAgency.irn, fundingCode, reviewCode, splitCredit, alternatePaymentAgreement,
                        leaCreditCount, leaPercentOfTime, heiCreditCount, inLeaOnRosterDate, sentReasonReported, sentPercentOfTime,
                        leaReportedPSCourse, leaStartDate, county, responsibleLea.irn "
                    t:add="course"
                    t:reorder="course, reportingAgency.irn"
                    t:rowClass="prop:paymentClass">
                <p:courseHeader>Higher Ed Course</p:courseHeader>
                <p:reportingAgencyirnHeader>Reporting <br/>LEA</p:reportingAgencyirnHeader>
                <p:fundingCodeHeader>Pmt by Reporting LEA</p:fundingCodeHeader>
                <p:reviewCodeHeader>
                    <t:any t:id="reviewCodeHeaderTip" title="Click on course above to see the current review status on course">
                        Review Code<br/>as of <br/>${latestPaymentUpdate}
                    </t:any>
                </p:reviewCodeHeader>
                <p:splitCreditHeader>Pmt<br/>Split</p:splitCreditHeader>
                <p:alternatePaymentAgreementHeader>Alt<br/>Pay<br/>Rptd</p:alternatePaymentAgreementHeader>
                <p:leaCreditCountHeader>Paying LEA Credits</p:leaCreditCountHeader>
                <p:heiCreditCountHeader>HEI Total Credits</p:heiCreditCountHeader>
                <p:responsibleLeairnHeader>Original HEI Reported LEA</p:responsibleLeairnHeader>
                <p:courseCell>${paymentCourseDisplay}</p:courseCell>
                <p:reportingAgencyirnCell>
                    <t:any t:id="paymentReportingLea" title="${heiPayment.reportingAgency.name}">${heiPayment.reportingAgency.irn}</t:any>
                </p:reportingAgencyirnCell>
                <p:splitCreditCell>${splitCreditDisplay}</p:splitCreditCell>
                <p:alternatePaymentAgreementCell>${alternatePaymentDisplay}</p:alternatePaymentAgreementCell>
                <p:inLeaOnRosterDateCell>${inLeaOnRosterDateDisplay}</p:inLeaOnRosterDateCell>
                <p:sentReasonReportedCell>${sentReasonReportedDisplay}</p:sentReasonReportedCell>
                <p:leaReportedPSCourseCell>${leaReportedPSCourseDisplay}</p:leaReportedPSCourseCell>
                <p:leaStartDateCell><t:output value="heiPayment.leaStartDate?.time" format="dateFormat" /></p:leaStartDateCell>
                <p:responsibleLeairnCell>
                    <t:any t:id="paymentResponsibleLea" title="${heiPayment.responsibleLea.name}">${heiPayment.responsibleLea.irn}</t:any>
                </p:responsibleLeairnCell>
            </t:grid>
            <p:else>
                <h5 class="well well-small">No Payment Responsibility Data</h5>
            </p:else>
        </t:if>

        <t:if test="hasLeaCourses()">
            <h5>K12 Reported Data</h5>
            <t:grid class="table table-hover table-striped" source="leaCourses" row="leaCourse" t:mixins="DisableGridSort"
                    include="localClassroomCode, scheduleCode, subject, creditHours, buildingIrn, locationIrn">
                <p:localClassroomCodeHeader>EMIS Reported Courses</p:localClassroomCodeHeader>
                <p:scheduleCodeHeader>Course<br/> Schedule</p:scheduleCodeHeader>
                <p:subjectHeader>K12 Subject</p:subjectHeader>
                <p:creditHoursHeader>HS<br/>Credits</p:creditHoursHeader>
                <p:buildingIrnHeader>Building <br/> IRN</p:buildingIrnHeader>
                <p:scheduleCodeCell>${leaCourse.scheduleCode?.description}</p:scheduleCodeCell>
                <p:subjectCell>${subjectDisplay}</p:subjectCell>
                <p:locationIrnCell>${locationDisplay}</p:locationIrnCell>
            </t:grid>
        </t:if>
    </div>

</t:block>

<t:zone t:id="auditDetailZone" id="modalAuditDetailZone">
    <div class="modal fade" id="${auditModalId}" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Audit Details</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div id="auditDetailBody" class="modal-body">
                    <t:print t:contentClientId="\#auditDetailBody" t:heading="CCP Student - Audit Detail"/>
                    <t:auditDisplay t:source="auditJournals"/>
                </div>
            </div>
        </div>
    </div>
</t:zone>

<t:zone t:id="courseDetailZone" id="modalCourseDetailZone">
    <div class="modal fade" id="${courseModalId}" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Course Details</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <t:print t:contentClientId="\#courseDetailModal" t:heading="Course Details"/>
                    <a href="https://wiki.ssdt-ohio.org/x/poDaB#LEACourses-courseDetail" target="_blank" class="pull-right help-link">Help</a>
                    <t:LeaCourseDetail t:source="currentRelationship" />
                </div>
            </div>
        </div>
    </div>
</t:zone>

I tried using printThis.js with the debug feature set to true, but was not having any luck. My javascript skills are very slim which I'm sure is not helping with the debug option.

As stated before, trying to add the hidden-print css class causes too much to be hidden. Using the following, the image is not included in the resulting PDF nor the link text.

<t:zone t:id="statusZone" id="modalStatusZone">
    <t:eventlink event="showCourse" context="heiCourse.id" async="true" class="hidden-print">
        <img src="${asset:img}/${statusIcon}" title="${statusTitle}" alt=""/>
    </t:eventlink>
</t:zone>
                
<t:zone t:id="courseZone" id="modalCourseZone">
    <t:eventlink event="showCourse" context="heiCourse.id" async="true" class="hidden-print">
        ${heiCourse.courseId} - ${heiCourse.course}
    </t:eventlink>
</t:zone>

PDF result using hidden-print css class

Answer 1

We were able to work around this by strategically adding the css class hidden-print or visible-print where ever we were dealing with Tapestry code that generates an href. I was hoping there was an easier way to do this, ie. a parameter for printThis that would indicate 'do not print href value'.

This is a sample of the updated code from above with the print based css classes added.

<t:zone t:id="statusZone" id="modalStatusZone">
    <t:eventlink event="showCourse" context="heiCourse.id" async="true" class="hidden-print">
        <img src="${asset:img}/${statusIcon}" title="${statusTitle}" alt=""/> 
    </t:eventlink>
</t:zone>
<div class="visible-print">
    <img src="${asset:img}/${statusIcon}" title="${statusTitle}" alt=""/>
</div>

<div class="container-fluid">
    <t:zone t:id="studentDetailZone">
        <div class="col-lg-12 col-md-12">
            <span class="hidden-print">
                <t:print t:contentClientId="\#studentDetailZone" t:heading="CCP - Student Detail" />
            </span>
            <t:pagelink page="highered/lea/indexsummary" class="btn btn-ssdt hidden-print">Return to Summary</t:pagelink>
            <a href="https://wiki.ssdt-ohio.org/x/poDaB#LEACourses-detail" target="_blank" class="pull-right help-link hidden-print">Help</a>
            <t:delegate to="studentDetails" />
            <t:pagelink page="highered/lea/indexsummary" class="btn btn-ssdt btn-last hidden-print">Return to Summary</t:pagelink>
        </div>
    </t:zone>
</div>

Answer 2

base: false, // preserve the BASE tag or accept a string for the URL