How to get jQuery to style pdf generated with wicked_pdf in Rails 4?

StackOverflow https://stackoverflow.com/questions/21832436

Question

Main Layout for App:

This should be used for HTML.

<head>
  <%= stylesheet_link_tag    "application" %>
  <%= stylesheet_link_tag "print",  media: 'print' %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>

Within PDF layout:

This should be used for PDFs.

<head>
  <title>Cassa</title>
  <%= stylesheet_link_tag    "application" %>
  <%= stylesheet_link_tag "print",  media: 'print' %>
  <%= wicked_pdf_javascript_include_tag "application-pdf" %>
</head>

Controller:

  respond_to do |format|
    format.html
    format.pdf do
      render pdf: "your_assessment_printout.pdf",
      disposition: "inline",
      template: "assessments/show.pdf.erb",
      layout: "application-pdf.html.erb"
    end
    format.html
  end

show.pdf.erb is a template that has html to structure a table, gets populated with the necessary objects in the <%= variable_name %> fashion.

I can get the PDF to generate, but the only way I can style is inline. EX)

<tr style="
        background-color: #cdcdcf;
    padding: 5em 0;">
  <td>...</td>
</tr>

jQuery application-pdf.js script that I'd like to use:

$(document).ready(function() {
    $('#summary-half table tr:odd').css('background-color', '#cdcdcf');
    $('#summary-half table tr:even').css('background-color', '#fff');

    $('#summary-half table li:odd').css('background-color', '#cdcdf');
    $('#summary-half table li:even').css('background-color', '#fff');
});

I am not able to dynamically style <tr></tr> and <li></li> elements. I have commented out the application.html.erb stylesheet and javascript tags and only enabled the pdf specific ones and still no change.

Has anyone had any luck styling elements dynamically through javascript/jQuery using wicked_pdf?

Was it helpful?

Solution

Though not referencing an external file, I figured it out by screwing around with having rails update the class name on the server side.

Then I asked myself what happens if I place the CSS in between the style tags of the show.pdf.erb AND IT WORKS. So I took the inline styles within each element. PHEW!

Then the next natural question was what happens if I place the jQuery in the show.pdf.erb at the top, and it works. Do not forget to add before your script:

<%= javascript_include_tag "http://code.jquery.com/jquery-1.10.0.min.js" %>
<%= javascript_include_tag "http://code.jquery.com/ui/1.10.3/jquery-ui.min.js" %>

so the browser understands jQuery. I now have the TR rows and LI rows alternating colors.

Working show.pdf.erb section:

<%= javascript_include_tag "http://code.jquery.com/jquery-1.10.0.min.js" %>
<%= javascript_include_tag "http://code.jquery.com/ui/1.10.3/jquery-ui.min.js" %>
<script>
    $(document).ready(function() {
      $('table tr:odd').css('background-color', '#cdcdcf');
      $('table tr:even').css('background-color', '#fff');

      $('table li:odd').css('background-color', '#cdcdcf');
      $('table li:even').css('background-color', '#fff');
  });
</script>

<table>
   <tr>
      <td>
         <ul>
            <li></li>
         </ul>
      </td>
   </tr>
</table>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top