Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Insert different text row over grid columns on same page

I have a grid question with a scale of 0 to 10 as the columns and I'm inserting text to the left and right above the columns using the below javascript.  My issues is I have to show three, one row grids (Q3A and Q3B and Q3C) on the same page but each needs to have it's own text that is slightly different.  If I put the script in the footer of each question the text repeats for all of the grids

<script type="text/javascript">
$(document).ready(function()
{
 row_html = "<tr> <td  class='corner_label_cell  alt_color1' align='left' colspan='6'>Not at all likely</td> <td  class='corner_label_cell  alt_color1' align='right' colspan='5'>Extremely likely</td> </tr>";
 $(".column_header_row").before(row_html);
});
</script>
asked Jun 12 by Jay Rutherford Gold (31,740 points)

1 Answer

0 votes
 
Best answer
JavaScript applies to the entire page, rather than just the question that the script was added to.  To get around this, we need to adjust our CSS selectors to only select the elements of a specific question.  You could hard code this with a CSS selector like this:

#Q3A_div .column_header_row


but I prefer to use this so that the code survives renaming questions:

#[% QuestionName() %]_div .column_header_row
answered Jun 12 by Zachary Platinum Sawtooth Software, Inc. (121,525 points)
selected Jun 12 by Jay Rutherford
Perfect!  I like using that alternate script as it gives this flexibility versus applying to the entire page.  I've run into this before but worked around it by putting things on different pages, so this is a huge help.  Thanks again!
...