Reputation: 3483
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
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
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