Skip to main content
WolfShade
WolfShade
Legend
January 3, 2019
Answered

jQuery scrollTop not triggering

  • January 3, 2019
  • 2 replies
  • 1016 views

Hello, all,

I've got some code that seems legit (to my eyes) but isn't working as expected.  I could use a fresh set of eyes on this.

What I'm doing is using AJaX to submit form data in the background, and I am returning either form validation alerts or a success message in plain text.  Upon receiving the response, I am adding the message to a div at the bottom of a modal (did I mention the form is in a dialog?), and wish to have the form scroll to the bottom of the dialog so the user will notice the message.  The message is successfully appearing in the div inside the form, but I can't get the form to scroll down.

What I have, so far, is this (truncated for brevity):

$.ajax({
...
   }).done(function(data){
      var frx = $('#formResults');
      frx.html(data);
      frx.scrollTop(frx.prop("scrollHeight"));
      });

Any thoughts regarding this non-responsive or non-triggered scroll?

V/r,

^ _ ^

    This topic has been closed for replies.
    Correct answer WolfShade

    Nevermind.. finally got it to work.  Had to use the ID that uses the .dialog class.  Now it works. 

    V/r,

    ^ _ ^

    2 replies

    WolfShade
    WolfShadeAuthor
    Legend
    January 4, 2019

    Still not working.  Here are some changes that I've made.

        $.ajax({  
        ...  
           }).done(function(data){  var frx = $('#formResults' + ver); // which results div will contain response, #formResults1 or #formResults2
              frx.html(data);
              var sh = $('#' + attrID).prop("scrollHeight"); // alerting the height before data, 402; alerting after data, 619  
              $('#' + attrID).scrollTop(sh);  // I've set this to the outermost div, and the id of the div immediately inside it.. no joy
              });

    V/r,

    ^ _ ^

    WolfShade
    WolfShadeAuthor
    Legend
    January 7, 2019

    I've also set it so that the FORM will scroll.  Still not working.  Message appears at bottom of dialog, and the scrollbar appears, but no actual scrolling to the bottom is working.  Any ideas?

    V/r,

    ^ _ ^

    WolfShade
    WolfShadeAuthorCorrect answer
    Legend
    January 7, 2019

    Nevermind.. finally got it to work.  Had to use the ID that uses the .dialog class.  Now it works. 

    V/r,

    ^ _ ^

    WolfShade
    WolfShadeAuthor
    Legend
    January 3, 2019

    UPDATE:  Okay, I just noticed that I'm trying to scroll the message div, but the div will expand to accommodate all the text, and that's why THIS version isn't working.  But I'm adding code to determine the ID of the dialog div in question, and it's not accessible from within the $.ajax(), for some reason, even though I'm declaring it as a var (which _should_ make it available globally from within the function.)

    V/r,

    ^ _ ^

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices