How to navigate between divs On Success in ajax call

Question

I am working on single page application, I have been navigating between divs, its simple but i wanted to do it with ajax....

I wanted to do something like When "success" function called then it should send/scroll user view to another div..... I already tried the .animate but failed....

Any kind of help or reference will be appreciated

<div id="SecondInfo"></div>
        <script>
            $("#btnSubmit").click(function () {
                var FirstName = $('#FirstName').val();
                $.ajax({        
                   type: "POST",
                   url: '@Url.Action("Submit", "Home")',
                   dataType: "JSon",
                   data: { "FirstName": FirstName},
                   success: function (data) {
                       console.log(data);
                       $("#SecondInfo").animate({ scrollTop: "0px" });
                   },
                   error: console.log("it did not work"),
                });
            });
        </script>

Answer 1

Try .focus()

<script>
            $("#btnSubmit").click(function () {
                var FirstName = $('#FirstName').val();
                $.ajax({        
                type: "POST",
                url: '@Url.Action("Submit", "Home")',
                dataType: "JSon",
                data: { "FirstName": FirstName},
                success: function (data) {
                    console.log(data);
                    $("#SecondInfo").focus();
                },
                error: console.log("it did not work"),
            });
        });
        </script>

Answer 2

Ok let me assume you have 4 divs and each with single input element as below and the first one will have the active class and remaining will be hidden:

<div id="parentStep">
    <div id="div1" class="steps active">
         <input type="text" id="firstName"/>
    </div>
    <div id="div2" class="steps">
         <input type="text" id="lastName"/>
    </div>
    <div id="div3" class="steps">
         <input type="text" id="contacNum"/>
    </div>
    <div id="div4" class="steps">
         <input type="text" id="addressDetail"/>
    </div>
</div>

Now in your ajax on success just try to find the div with active class and hide it and show div which is next to it as below:

$("#btnSubmit").click(function () {
      var activeDiv=$("#parentStep").find('.steps .active');//get the active div
      var dataToSend=activeDiv.find('input').val();//get the input value of active div
      $.ajax({        
               type: "POST",
               url: '@Url.Action("Submit", "Home")',
               dataType: "JSon",
               data: { "Data": dataToSend},
               success: function (data) {
                     activeDiv.fadeOut("slow").removeClass('active');//remove active from current step
                     activeDiv.next().fadeIn('fast').addClass('active');//get the next div visible and add active class
               },
               error: function(data){
                 console.log("it did not work"),
               }
       });
});

Answer 3

use scrollTop() inside animate() and set the offset from element what you want to focused, here part of code .

$('html,body').animate({scrollTop: $('#second').offset().top}, 200, function() {
//next code
    });

Demo JsFIddle Scroll animate