CODEWITHSUNDEEP
javascriptjqueryajax
Suhail Mumtaz Awan
Suhail Mumtaz Awan

Reputation: 3483

how to show hidden div on ajax success call

I am working on single page asp.net-mvc5 application....

I have a hidden div in my code, i tried to show this div on ajax success but failed...How can i achieve that, am i doing it right???

Before putting "Display:None", animate function was working fine on success, now its not working also due to hidden nature i guess...

HTML

<section class="block remove-top" id="contact-us" style="display: none;">
<form method="post" action="" name="contactform" id="contactform">
<div class="row">
<input name="FirstName" type="text" id="FirstName"/>
<input type="submit" class="submit" id="btnSubmit" value="Submit" />
</form>
</section>

Ajax

<script>
    function packageSelect(PackageId) {
        $.ajax({
        type: "POST",
        url: '@Url.Action("SelectPackage", "Home")',
        dataType: "JSon",
        data: { "PackageId": PackageId },
        success: function (data) {
            console.log(data);
            //$("#SecondInfo").focus({ scrollTop: "0px" });
            $('html, body').animate({ scrollTop: $('#contact-us').offset().top }, 'slow');
        },
        error: console.log("it did not work"),
    });
};
</script>

Please if someone help, any kind of help will be appreciated....thanks for your time:)

Upvotes: 2

Views: 21789

Answers (3)

Tushar
Tushar

Reputation: 87233

show the element before animation.

$('#contact-us').show();

$('html, body').animate({ scrollTop: $('#contact-us').offset().top }, 'slow');

If you want the element to be hidden:

$('#contact-us').show();

$('html, body').animate({ scrollTop: $('#contact-us').offset().top }, 'slow', function() {
    $('#contact-us').hide(); // Hide element after scroll is completed
});

Upvotes: 3

Swaraj Giri
Swaraj Giri

Reputation: 4037

Use $('.element-name').show() before animating.

Upvotes: 3

AmmarCSE
AmmarCSE

Reputation: 30607

For

<section class="block remove-top" id="contact-us" style="display: none;">

you can show it using show() like

$('#contact-us').show();

So, update your code to

function packageSelect(PackageId) {
        $.ajax({
        type: "POST",
        url: '@Url.Action("SelectPackage", "Home")',
        dataType: "JSon",
        data: { "PackageId": PackageId },
        success: function (data) {
            console.log(data);
            //$("#SecondInfo").focus({ scrollTop: "0px" });
            $('#contact-us').show();
            $('html, body').animate({ scrollTop: $('#contact-us').offset().top }, 'slow');
        },
        error: console.log("it did not work"),
    });

Upvotes: 7

Related Questions