Lookup value (rendered as picklist) changing on jqueryprint's .print()

  • 1
  • Problem
  • Updated 3 years ago
  • In Progress
We're running jqueryprint (along with @media print CSS) to print elements of our pages. It's working great, except that in this case that value for a lookup field (rendered as a picklist) is changing with .print().

Here's what it looks like on screen:


Here's what the print preview looks like:


Any thoughts on what might be going wrong here? Where would you start troubleshooting?

Interestingly, if I print the whole browser screen, the value for the picklist stays intact.
It's not a CSS @media issue, because the console's CSS @media print emulation looks fine.

Thanks!
Photo of Matt Sones

Matt Sones, Champion

  • 31,600 Points 20k badge 2x thumb

Posted 4 years ago

  • 1
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Assuming that jQuery.print.js prints the "selected" option, it appears that no option is selected?

What do you see when to inspect the DOM element?
Photo of Matt Sones

Matt Sones, Champion

  • 31,600 Points 20k badge 2x thumb
Here's a screenshot of the DOM element that we're asking jquery to print...


The data is in the skuid model. It's a reference field.... I'm not sure how that affects anything?
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Which option is decorated with the 'selected' attribute?
Photo of Matt Sones

Matt Sones, Champion

  • 31,600 Points 20k badge 2x thumb
None are. The next line after what you see in the screenshot is </select>.
(Edited)
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
I suspect that is the problem.

This is easily reproducible outside of Skuid e.g. JSFiddle.  It would be interesting to get Rob's take on this.
Photo of Matt Sones

Matt Sones, Champion

  • 31,600 Points 20k badge 2x thumb
Skuid? Is this a bug?
Photo of Matt Sones

Matt Sones, Champion

  • 31,600 Points 20k badge 2x thumb
Do I have to manually attach the 'selected' attribute to the DOM element that is selected? How does Skuid know which value is selected in a picklist, or communicate that to the DOM?
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
The selected attribute is set by the browser whenever you select an item from a picklist.  Like I said, I can recreate this scenario outside of Skuid e.g. inside of JSFiddle.  I would definitively ask one of the Skuid folks to spend 5 minutes investigating; I think you've earned the right to ask.
Photo of Matt Sones

Matt Sones, Champion

  • 31,600 Points 20k badge 2x thumb
Thanks for the vote of confidence, Irvin.

Skuid-- anyone want to give this a go?
Photo of Matt Sones

Matt Sones, Champion

  • 31,600 Points 20k badge 2x thumb
^bump^
Photo of Matt Sones

Matt Sones, Champion

  • 31,600 Points 20k badge 2x thumb
^^bump^^
Photo of Matt Sones

Matt Sones, Champion

  • 31,600 Points 20k badge 2x thumb
Update: Looks like this is also and issue with text boxes.

Displayed on screen:


Print preview:
Photo of JD Bell

JD Bell, Senior Product Engineer

  • 2,996 Points 2k badge 2x thumb
From a quick scan of the github project, it looks like jQuery print is actually copying the HTML elements into a hidden iframe element and then printing that. If that's the case, then user-updated form elements will not have their value (or selected value) copied to the iframe as that information is contained within the browser's memory, not in the HTML.

It looks like they have a property to overcome this limitation (though it may be "expensive" to use and I've not tested it with Skuid for compatibility):

https://github.com/DoersGuild/jQuery.print#manuallycopyformvalues
Photo of Matt Sones

Matt Sones, Champion

  • 31,600 Points 20k badge 2x thumb
JD,

Thanks for taking a look. manuallyCopyFormValues is true by default. Even when I set it explicitly, it's still not copying the user input. I'll try the popup option instead of the hidden iframe in the next day or so and let you all know if that works.