Have an idea?

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

Inserting a blank line / row amongst codes in a select question

I guess this seems rather simple to do but I found it to be rather painful.

I used the following script in the HTML head tag of a select question.
<script src="[%GraphicsPath()%]jquery-1.6.2.min.js"></script>

<script type="text/javascript">
  $.noConflict();

jQuery(document).ready(function(){

  jQuery(".group_header").parents("tr.clickable").each(function(index) {
    var HeaderRowObj = jQuery(this);
   
    HeaderRowObj.removeClass("clickable");
    HeaderRowObj.addClass("group_header_row");

    var InputObj = HeaderRowObj.find("input");
    InputObj.addClass("HideElement");  //Make sure it is hidden

    var GroupHeaderObj = HeaderRowObj.find(".group_header");

    HeaderRowObj.html("<td colspan='2'>" + GroupHeaderObj.html() + "</td>");
    HeaderRowObj.prepend(InputObj);

  });
});

</script>

I created an additional code (code 10) in my parent list as such ...
<span class="group_header"></span>

Within my constructed list, I would include code 10 in the correct position.

This all worked on a desktop / laptop.

I would see ...

Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
Option 7
Option 8
Option 9
<blank>
None of these

On a mobile phone, the blank line / row was ignored.

I would see ...

Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
Option 7
Option 8
Option 9
None of these

Does anyone have a better solution?

Thank you.
asked Aug 10, 2016 by Paul Moon Platinum (98,670 points)

1 Answer

0 votes
Not sure why that wouldn't work on a mobile phone Paul.  Is it a javascript issue perhaps?  Does other javascript work okay on the mobile?  As far as inserting a blank row on a select question, I've used the below javascript code to insert a header row without having to create a list item (instead of the text 'Blank Row' just leave it blank there and replace Q10 with your question number) and this method has worked well and is a bit simpler.  I have not tested it out on a mobile though.

<script type="text/javascript">
$(document).ready(function(){
    $('#Q10_div > .question_body .response_column > div:nth-child(10)')
        .before('<div><h2> Blank Row  </h2></div>');
})
</script>
answered Aug 10, 2016 by Jay Rutherford Platinum (50,145 points)
Thanks Jay. I'll test your idea out on a mobile and desktop and get back to you.

I think some mobile phone Operating Systems have issues with JavaScript?
Unfortunately I couldn't find anything in my notes that provides a solution that doesn't involve javascript but perhaps someone else has a way I've not seen.  Let me know if you find a resolve.
Hi Jay, tried your code and had trouble getting it to work on a desktop. If I can get the desktop working I'll then move onto the mobile phone.

I changed Q10 to Q3 and removed "Blank Row" as you mentioned. I assume the nth-child(10) should be changed to the respective code number?

I tried this on single and multiple response questions too.

I popped the code in the questions HTML head tag and also tried the footer.

Have I missed something?
Sorry about that Paul.  I emailed you directly with a working sample.  I think it needed to have something in between the  <div> tags so if you added the html for a non-breaking space it should work.  Let me know if still have an issue with the sample I sent you as it's working on my end.
Heya Jay ... could you send that over to me as well?  I've moved over to the latest iteration of Sawtooth.  Have used the same solution as Paul in Version 8 when I've needed "dummy codes" in select-type questions for layout purposes, but it doesn't seem to be working the same in version 9.  I tried taking out the "no conflict" part of the code, then tried taking out the reference to the js file but no joy on a surface pro 3 - the check boxes still remain.
Happy to Marion.  Just messaged you with a sample script for both V9 and one for V8.
Marion, be careful with testing on mobile phones as I've had various issues.

Blank rows are ok on bigger devices but not on mobile phones?

I suggest you test thoroughly.
...