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>
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
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>
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"),
}
});
});
Related
At the moment I can click on button to get data and show div with comment replies, something like on Youtube, but I want to make it disappear by clicking again. Is this possible this way?
$(document).ready(function () {
$(".showReplies").click(function () {
let id = $(this).attr('id');
$.ajax({
url: $(this).attr("data-href"),
type: 'get',
success: function (data) {
console.log(data);
console.log(id)
$(`#${id}.replies`).html(data);
}
})
});
});
I tried to add display: none and then change it to block, or setting value='show/hide' and then use toggle('show') but it doesn't work. Thanks for any help in advance.
$(document).ready(function () {
$(".showReplies").click(function () {
let id = $(this).attr('data-id');
$(`#${id} .replies`).html("Loading..");
setTimeout(() => {
$.ajax({
url: `https://jsonplaceholder.typicode.com/todos/${id}`,
type: 'get',
success: function (data) {
$(`#${id} .replies`).text(JSON.stringify(data));
}
})
}, 1000);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1">
<div class="replies"></div>
<button class="showReplies" data-id="1">Load Replies</button>
</div>
<div id="2">
<div class="replies"></div>
<button class="showReplies" data-id="2">Load Replies</button>
</div>
Here is a example, but your code looks wrong. it does not make sense to me.
beforeSend: function(data) {
$("#hideID").hide();
},
success: function (data) {
console.log(data);
console.log(id)
$(`#${id}.replies`).html(data);
}
I have an email submitting form and when a user submits, I would like to show a confirmation text below the input. After 5 seconds the confirmation text has to fade-out again.
this is my code
<div class="input-group newsletter-group">
<input type="text" class="form-control" id="email-to-submit">
<div id="submit-email" class="input-group-addon">go!</div>
</div>
<div id="email-submit-form">THANKS!</div>
<div id="invalid-email-warning" style="color: red; display: none;">Not an email address</div>
$(function() {
setTimeout(function() { $("#email-submit-form").fadeOut(1500); }, 5000)
$('#submit-email').click(function() {
var emailAddress = $('#email-to-submit').val();
if (validateEmail(emailAddress)){
$('#email-to-submit').val('');
$('#email-submit-form');
$.ajax({
type: "POST",
url: '/submitEmailAddress',
dataType: 'json',
data: JSON.stringify({'email': emailAddress})
});
} else {
$('#invalid-email-warning').show();
}
$('#email-submit-form').show();
setTimeout(function() { $("#email-submit-form").fadeOut(1500); }, 5000)
})
});
You can use jQuery delay()
$('#email-submit-form').fadeIn().delay(5000).fadeOut();
Try this..
$('#email-submit-form').fadeIn('slow', function () {
$(this).delay(5000).fadeOut('slow');
});
Write your timeout logic inside the if(){ condition or ajax success
$.ajax({
type: "POST",
url: '/submitEmailAddress',
dataType: 'json',
data: JSON.stringify({
'email': emailAddress
}),
success: function (response) {
$('#email-submit-form').show();
setTimeout(function () {
$("#email-submit-form").fadeOut(1500);
}, 5000)
}
});
Also,
if (validateEmail(emailAddress)){
$('#email-to-submit').val('');
$('#email-submit-form'); //this line
The third line does nothing, remove it.
I would like to display a message when an Ajax function has succeeded but being new to Ajax I am struggling
function save_pos_reasons()
{
$.ajax({
type: "POST",
url: "save_pos_reasons.php",
data: $('#add_positioning').serialize(),
success: function() {
$("#successMessage").show();
}
});
}
<div id="successMessage"> It worked </div>
At the moment this does nothing although the actual function is working
The message div needs to be hidden by default, otherwise .show() will not do anything if it's already visible.
CSS:
#successMessage {
display:none;
}
Or inline:
<div id="successMessage" style="display:none;"> It worked </div>
Try this simple code . Only if the ajax is working the message will be displayed
$.ajax({
type: "POST",
url: "save_pos_reasons.php",
data: $('#add_positioning').serialize(),
success: function() {
$("#successMessage").html("It worked");
}
});
the html
<div id="successMessage"> </div>
Hope this helps. Thank you
Basic profile view comes from index.cs.asp?Process=ViewB_Profile.
When users click on edit profile, dialog box opens to edit the basic profile.
But I want the edit form to replace basic profile view data.
How can I do it, is there a plugin for it?
Thank you very much!
edited!
<script type="text/javascript">
$(document).ready(function() {
$(function V_Basic_Profile() {
$.ajax({
type: "GET",
url: "content/profile/index.cs.asp?Process=ViewB_Profile",
success: function(data) {
$("#B_Profile").append(data);
},
error: function (data) {
$("#B_Profile").append('.');
}
});
});
$(function E_Basic_Profile() {
$.ajax({
type: "GET",
url: "content/profile/index.cs.asp?Process=ViewB_Profile",
success: function(data) {
$("#B_Profile").append(data);
},
error: function (data) {
$("#B_Profile").append('.');
}
});
});
});
It would be fairly trivial to toggle two different divs in jQuery:
<div id="profile">
...
</div>
<form id="profileForm">
...
</form>
<script>
// ...
success: {
$('#profileForm').html(data).show();
$('#profile').hide();
}
// ...
</script>
Edit: Try this
<div id="profile_view">Loading...</div>
<div id="profile_form" style="display:none; ">Loading...</div>
Edit Profile
<script>
function loadProfileView()
{
$.get("content/profile/index.cs.asp?Process=ViewB_Profile", function(html) {
$('#profile_view').html(html).show();
$('#profile_form').hide();
});
}
function loadProfileForm()
{
$.get("content/profile/index.cs.asp?Process=EditB_Profile", function(html) {
$('#profile_form').html(html).show();
$('#profile_view').hide();
});
}
$(loadProfileView);
</script>
Code below works but what doesn't work properly is delaying process because I don't know how long it is going to take for process.php to response. It always differ. No certain time.
Code below works (apart from faulty delay) like this:
When I click run icon, run icon should disappear and loader icon should appear slowly.
After response coming from process.php, loader icon should disappear slowly and success/fail icon appear slowly. Straight after next (div) should appear slowly if successful.
Thanks
$(document).ready(function()
{
$("#run").click(function(event)
{
$('#run').hide();
$('#loader').fadeIn(1000).delay(1000);
$.ajax(
{
type : 'POST',
url : 'process.php',
data : 'user=jolly',
dataType : 'json',
success : function(response)
{
if(response.status == 'success')
{
$('#loader').delay(1000).fadeOut();
$('#success').delay(4000).fadeIn(1000);
$('#next').delay(4500).fadeIn(1000);
}
else
{
$('#loader').delay(1000).fadeOut();
$('#fail').delay(4000).fadeIn(1000);
$('#next').delay(4500).fadeIn(1000);
}
}
});
});
});
<div id="first">
<img id="run" src="run.png" />
<img id="loader" src="loader.png" style="display:none;" />
<img id="success" src="success.png" style="display:none;" />
<img id="fail" src="fail.png" style="display:none;" />
</div>
<div id="next" style="display:none;">
....
....
</div>
Does it accord with your question?
$('#run').hide();
$('#loader').fadeIn(1000);
$.ajax({
type: 'POST',
url: 'process.php',
data: 'user=jolly',
dataType: 'json',
success: function (response) {
$('#loader').stop(true).fadeOut(function () {
if (response.status == 'success') {
$('#success').fadeIn(1000, function () {
$('#next').fadeIn(1000);
});
} else {
$('#fail').fadeIn(1000);
}
});
}
});
You're doing it wrong? This is not what delay() was intended for, you have callbacks to handle this behavior:
$(function() {
$("#run").on('click', function() {
$(this).hide();
$('#loader').fadeIn(1000);
$.ajax({
type: 'POST',
url: 'process.php',
data: {user: 'jolly'},
dataType: 'json'
}).done(function(data) {
$('#loader').fadeOut(1000, function() {
$('#success').fadeIn(1000, function() {
$('#next').fadeIn(1000);
});
});
}).fail(function() {
$('#loader').fadeOut(1000, function() {
$('#success').fadeIn(1000, function() {
$('#fail').fadeIn(1000);
});
});
});
});
});
Also, there's no need to check the response.status, jQuery has callbacks available for both.
You could also place the Ajax function in the callback of the initial fadeIn of the loader, but all you're really doing is delaying the data from being showed to the user, and that's always a bad thing.