Uncaught TypeError: Не удается прочитать свойство 'scrollTop' of undefined

Question

Я работаю над веб-страницей, где мне нужно показать bootstrap modal при изменении значения раскрывающегося списка select.

Это код изменения события выбора.

$('#joinb').change(function(){ 
    switch ($('#joinb')[0].selectedIndex) { 
     case 3: 
      header_modal = 'Joining Scyon Stria cladding on stud with vertical flashing'; 
      img_src = "/_mockups/boot_calcs/img/onflash.jpg"; 
      text_modal = 'This will calculate Stria vertical flashing for all walls greater than 4.2m in length. You can add additional Stria vertical flashing in step 5'; 
      break; 
     case 2: 
      header_modal = 'Joining Scyon Stria cladding on stud with sealant'; 
      img_src = "/_mockups/boot_calcs/img/onsealant.jpg"; 
      text_modal = 'Boards will be joined on stud with sealant only. No Stria vertical flashing stop will be calculated for this option. This must be calculated in step 5 or select joining board option: On stud vertical flashing option in step 1'; 
      break; 
     case 1: 
      header_modal = 'Joining Scyon Stria cladding off stud'; 
      img_src = "/_mockups/boot_calcs/img/off-stud.jpg"; 
      text_modal = ''; 
      break; 
    }   
    $('#myModalLabel').html(header_modal); 
    $('#modalImg').attr('src',img_src); 
    $('#modalText').html(text_modal); 
    $('#myModal').modal() //The error occurs at this line. 
}); 

Я включил JS/bootstrap.min.js и есть другой файл внутри поставщика/JS/bootstrap.min.js.

Теперь, когда я изменяю значение в опции выбора на моей странице HTML, появляется какое-то невидимое всплывающее окно, которое всплывает и блокирует весь экран. В конце концов у меня нет другого варианта, кроме повторной загрузки страницы.

Когда я изменяю значение в списке, я сталкиваюсь с ошибкой Uncaught TypeError: Cannot read property 'scrollTop' of undefined на консоли веб-браузера.

Я работаю с двумя днями для решения этой проблемы, но я не могу найти, где свойство «scrollTop» и что вызывает проблему?

Пожалуйста, помогите мне в этом. Я пробовал много возможностей, но не мог решить проблему.

Answer 1

Это должно доставить вас туда. Без вашего html я не могу воспроизвести ваш вопрос «Прокрутить вверх».

$(document).ready(function() { 
 

 
    $('#select_dropdown').change(function() { 
 

 
    var dropVal = $('#select_dropdown').val(); 
 
    var header_modal = ''; 
 
    var img_src = ''; 
 

 
    if (dropVal == 1) { 
 
     header_modal = 'Joining Scyon Stria cladding off stud'; 
 
     img_src = "/_mockups/boot_calcs/img/off-stud.jpg"; 
 
     text_modal = ''; 
 
    } else if (dropVal == 2) { 
 
     header_modal = 'Joining Scyon Stria cladding on stud with sealant'; 
 
     img_src = "/_mockups/boot_calcs/img/onsealant.jpg"; 
 
     text_modal = 'Boards will be joined on stud with sealant only. No Stria vertical flashing stop will be calculated for this option. This must be calculated in step 5 or select joining board option: On stud vertical flashing option in step 1'; 
 
    } else if (dropVal == 3) { 
 
     header_modal = 'Joining Scyon Stria cladding on stud with vertical flashing'; 
 
     img_src = "/_mockups/boot_calcs/img/onflash.jpg"; 
 
     text_modal = 'This will calculate Stria vertical flashing for all walls greater than 4.2m in length. You can add additional Stria vertical flashing in step 5'; 
 
    } 
 

 
    $('#myModalLabel').html(header_modal); 
 
    $('#modalImg').attr('src', img_src); 
 
    $('#modalText').html(text_modal); 
 
    $('#myModal').modal() //The error occurs at this line. 
 

 
    return; 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 

 
<div id="test">TEST</div> 
 

 

 
<select id="select_dropdown" class="form-control"> 
 
    <option>--Select an option--</option> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
</select> 
 

 
<br> 
 

 
<!-- Button trigger modal --> 
 
<!-- 
 
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
 
    Launch demo modal 
 
</button> 
 
--> 
 

 

 
<!-- Modal --> 
 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> 
 
     </button> 
 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body" id="modalText"> 
 
     ... 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>