Have an idea?

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

Difficulty displaying div in global HTM <head> Tag function

Hi,

I have a survey that has a note section after every question, all labelled "note" at the end, and on the same page. My goal is to get the cursor to automatically focus on the notes after it pops up when F10 is pressed, and for the note section to remain hidden if it is empty when going back through the survey, but to remain visible if it has any characters in it.

So far this is working if I put the code in an individual note section. But I have 2000 questions on my survey, and so I am trying to make a global function, using the HTML <head> Tag.  The global function is working for moving the cursor to the note section, using <code> $("[id$='note']").focus(); </code>

However I can't seem to get it to work to keep the note section displayed.

This code works in an individual notes section
 
$( document ).ready(function(){
    if ($('#[% QuestionName() %]').val().length != 0) {
        $("#[% QuestionName() %]_div").css('display', 'block');  
        }
      })


I have tried replacing QuestionName with this code in the global function
$( document ).ready(function(){
    if ($("[id$='note']").val().length != 0) {
        $("[id$='note']_div").css('display', 'block');  
        }
      })


my idea was to try to display div of the note section, because
 '#[% QuestionName() %]' 
would just refer to the question currently selected rather than the notes.

<style>
#[% QuestionName() %]_div {display:none}
</style> 

(This is on every note question to keep it hidden normally)

Would anybody be able to help me to call the div in the correct way  for the note section, or figure out if there is another underlying issue?

Thanks!
Jake
asked Aug 2 by Jake Hammond (215 points)

1 Answer

0 votes
The problem stems from this invalid CSS selector:

[id$='note']_div


An easy alternative to that code would be to use your input CSS selector and then call jQuery's "closest" function to find the div for the question that contains the input element.  I would replace line 3 with this:

$("[id$='note']").closest('.question').show();
answered Aug 2 by Zachary Platinum Sawtooth Software, Inc. (63,900 points)
Thanks for answering Zachary!

I tried replacing line 3, but then the note sections remains displayed all the time and are never hidden, an issue I was having before when I tried some other variations on selecting the div.

I also tried
 if ($("[id$='note']").closest('.question').val().length != 0) { 

for line 2, in which case the notes are no longer displayed all the time, but they again remain hidden even when there is text.
You don't need to make that change to line 2.  I suspect your problem is coming from multiple page elements being selected using this selector:

[id$='note']


Perhaps try replacing each instance of that selector with this more specific selector:

.openend [id$='note']
Thanks so much for helping me through this Zachary, I appreciate it a lot.

I tried adding in the .openend, and it didn't make a difference.

I don't think that the issue is with multiple page elements being selected, because when I use the same selector it does work to move the focus to the note section when F10 is pressed.

I do think that the issue might lie somewhere with multiple notes sections being selected, or with the wrong note section being selected, but I'm not sure exactly what it is.

Would it help if I showed you all the code in my <head> tag page, and also the coding on each individual note section?

This is the html <head> Tag
<style type="text/css">
.row_label_cell, .col_label_cell, .option_cell, .grid_cell_text, .grid_options {font-size: 20px;}
.numeric_input, .text_input, textarea {font-size: 20px;}
.page_footer {padding-bottom: 20px;}
.question{padding: 20px; margin: 20px; border: 1px solid grey; border-radius: 15px;}
</style>

<script>
function cursorstart(){
    $(":input:not(.graphical_previous_button):visible:first").focus();}
    
function checkKey(e) {
    e = e || window.event;
    if (e.keyCode == '37') {
       // left arrow
       SSI_GraphicalPreviousSubmit();}
    else if (e.keyCode == '39') {
       // right arrow
       SSI_SubmitMe();}}

$(document).ready(cursorstart);
$(document).keydown(checkKey);
</script>

<script>

$('#[% QuestionName() %]').focus(function() { 

}); 

$(window).keyup(function(e) {
    if(e.which== 121) {
    $("[id$='note']").focus();
    }}); 
$('#[% QuestionName() %]').blur(function(){ 

});

$( document ).ready(function(){
    if ($("[id$='note']").val().length !== 0) {
    $("[id$='note']").closest('.note').show();      
        }
      })
</script>


and this is on every individual note section, not in the html head tag, although I was thinking about trying to put it in my global function also eventually

<style>
#[% QuestionName() %]_div {display:none}
</style> 

<script>
    
</script> 
<script type="text/javascript"> 

$(document).keydown(checkNote);
function checkNote(f){
    f = f || window.event;
    if (f.keyCode == '121' || f.keyCode == '35'){
        f.preventDefault();
        $("#[% QuestionName() %]_div").css('display', 'block');
        }
}
      
function checkNoteButton(){
    $("#[% QuestionName() %]_div").css('display', 'block')
    };

</script>
You should not change this:

.closest('.question')


to this:

.closest('.note')
Thanks, I tried
  .closest('.question') 
 first though and that didn't work either
...