Uncaught TypeError: Cannot read property 'scrollTop' of undefined

Question

I am working on a web page where I need to show a bootstrap modal on changing the value of the select dropdown.

This is the code of change event of select dropdown.

$('#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.
}); 

I have included js/bootstrap.min.js and there is another file inside vendor/js/bootstrap.min.js.

Now when I change the value in select option on my HTML page there is some invisible pop-up that pops out and blocks the whole screen. Eventually I am left with no option other than re-loading the page.

When I change the value in select I encounter Uncaught TypeError: Cannot read property 'scrollTop' of undefined error on web browser console.

I have been working out since two days for solving this issue but I am not able to find where is the 'scrollTop' property and what is causing the problem?

Please help me out of it. I have tried many possibilities but couldn't solve the issue.

Answer 1

This should get you there. Without your html I cannot reproduce your "Scroll Top" issue.

$(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>