Have an idea?

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

jquery working on computer but not phone

The following code works great on a computer.  Row 1 shows on page load, then each row gets shown as options are chosen.

Problem - on phones, row 1 and row 4 show on page load - other options come up out of order - and only 5 come up in total.

[code]
<script>
$(document).ready(function(){
    $('#Q9_r2_row, #Q9_div .mobile_grid_card[data-card_num=2]').hide();
    $('#Q9_r3_row, #Q9_div .mobile_grid_card[data-card_num=3]').hide();
    $('#Q9_r4_row, #Q9_div .mobile_grid_card[data-card_num=4]').hide();
    $('#Q9_r6_row, #Q9_div .mobile_grid_card[data-card_num=6]').hide();
    $('#Q9_r7_row, #Q9_div .mobile_grid_card[data-card_num=7]').hide();
    $('#Q9_r8_row, #Q9_div .mobile_grid_card[data-card_num=8]').hide();

    updateQ9Rows();
    $('input[type=radio]').change(updateQ9Rows);
    $('.clickable').click(updateQ9Rows);
})
 
function updateQ9Rows() {
    var interval = setInterval(function(){
        for (var row = 1; row <= 8; row++) {
            var val1 = SSI_GetValue('Q9_r1');
            if (val1 > 0) {
                $('#Q9_r2_row').show();
                $('#Q9_div .mobile_grid_card[data-card_num=2]').show();
            }
            var val2 = SSI_GetValue('Q9_r2');
            if (val2 > 0) {
                $('#Q9_r7_row').show();
                $('#Q9_div .mobile_grid_card[data-card_num=7]').show();
            }
            var val7 = SSI_GetValue('Q9_r7');
            if (val7 > 0) {
                $('#Q9_r3_row').show();
                $('#Q9_div .mobile_grid_card[data-card_num=3]').show();
            }
            var val3 = SSI_GetValue('Q9_r3');
            if (val3 > 0) {
                $('#Q9_r4_row').show();
                $('#Q9_div .mobile_grid_card[data-card_num=4]').show();
            }
            var val4 = SSI_GetValue('Q9_r4');
            if (val4 > 0) {
                $('#Q9_r6_row').show();
                $('#Q9_div .mobile_grid_card[data-card_num=6]').show();
        }
             var val6 = SSI_GetValue('Q9_r6');
            if (val6 > 0) {
                $('#Q9_r8_row').show();
                $('#Q9_div .mobile_grid_card[data-card_num=8]').show();
            }
        }
       clearInterval(interval);
    }, 50);
}
</script>
[code]
asked Mar 21, 2017 by jas8278 Bronze (750 points)
edited Mar 21, 2017 by Walter Williams
I'm failing to reproduce the problem on my end.  Could you email a .ssi that exhibits the problem to zachary@sawtoothsoftware.com?
Just emailed you the file.

Thank you!

1 Answer

+1 vote
The code for hiding and showing the mobile grid items is failing when a constructed list is used for the rows.  To fix this, start by adding this function towards the end of the code:

function getMobileCardNum(row) {
    var rowsList = $('input[name=hid_row_list_[% QuestionName() %]]').val().split(',').map(Number);
    return rowsList.indexOf(row) + 1;
}


Now you need to change the CSS selectors to call this function.  For example, this selector:

$('#Q9_r2_row, #Q9_div .mobile_grid_card[data-card_num=2]')


should be changed to this:

$('#Q9_r2_row, #Q9_div .mobile_grid_card[data-card_num=' + getMobileCardNum(2) + ']')
answered Mar 21, 2017 by Zachary Platinum Sawtooth Software, Inc. (127,375 points)
THANK YOU!!! My project manager - who I'm still on the phone with - says you rock!
...