Question

我正在处理单页应用程序，我一直在div之间导航，它很简单，但我想用ajax做....

我想做一些像When＆＃34;成功＆＃34;函数调用然后它应该发送/滚动用户视图到另一个div .....我已经尝试了 .animate但失败了......

任何形式的帮助或参考将不胜感激

<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

尝试.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

好的，我假设你有4个divs，每个都有一个input元素，如下所示，第一个将有active类，其余的将被隐藏：

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

现在位于ajax success上的div只是尝试查找有效课程的hide和show以及div $("#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"), } }); });旁边如下：

javax.net.ssl.SSLHandshakeException: sun.security.validator.ValidatorException: PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target

Answer 3

在scrollTop()内使用animate()并设置您想要关注的元素的偏移量，这是代码的一部分。

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

演示JsFIddle Scroll animate

如何在ajax调用中的div成功之间导航

3 个答案: