We Keep Coding

How to show/hide div using ajax?

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);
}

jquery .animate() called on click anywhere on page

I have the below jquery. It all works correctly except.... if I input a value in "name=bidz" and then click anywhere on the page, this triggers the animation but nothing else. How do I get clicks outside of my submit button to stop triggering the animation?
Does this have something to do with first clicking in the input box, then adding the value, and then the follow click is a second change?
<form action="" method="post">
<div id="<?php echo $this->item['id']; ?>">
<div class="ab">
<label for="ab_input"><?php echo $this->translate('To get the auction started, you must enter a starting bid.'); ?></label>
<span class="auction_bid_container">
<input id="ab_input" type="text" maxlength="12"
class="middle nmr event-clear-focus"
name="bidz" value="Enter something" />
<input id="updateBidButton" type="submit"
class="button grey-button num-items-button"
name="bidz"
value="<?php echo $this->translate('submit'); ?>"/>
</span>
</div>
</div>
</form>
<div class="clear mb20"></div>
$('input[name="bidz"]').live('change', function () {
var bidz = this.value;
$.ajax({
type: 'post',
url: "?module=is&controller=index&action=syy",
dataType: "text",
data: 'bid=' + bidz + '&id=' + id,
beforeSend: function () {
$('.ab').animate({
'backgroundColor': '#ffdead'
}, 400);
},
success: function (result) {
if (result == 'ok') {
console.log(bidz);
$('.ab').animate({
'backgroundColor': '#A3D1A3'
}, 300);
} else {
$('.ab').animate({
'backgroundColor': '#FFBFBF'
}, 300);
}
}
});
});

If you just want clicks outside of your submit button to stop triggering the animation, then you should attach the event handler to your submit button instead of text input. Something like this should work fine:
$('#updateBidButton').live('click', function (e) {
e.preventDefault();
var bidz = this.value;
$.ajax({
type: 'post',
url: "?module=is&controller=index&action=syy",
dataType: "text",
data: 'bid=' + bidz + '&id=' + id,
beforeSend: function () {
$('.ab').animate({
'backgroundColor': '#ffdead'
}, 400);
},
success: function (result) {
if (result == 'ok') {
console.log(bidz);
$('.ab').animate({
'backgroundColor': '#A3D1A3'
}, 300);
} else {
$('.ab').animate({
'backgroundColor': '#FFBFBF'
}, 300);
}
}
});
});
Edit:
Also please remember that live() method was removed in jQuery 1.9, so consider replacing it with:
$(document).on('event', 'yourSelector', function() {
// your code hear
});
So in your case it would be:
$(document).on('click', '#updateBidButton', function() {
// ...rest of your code...
});
This will attach an event to the document object and then when you click an element it will check if the target is #updateBidButton, so it will work even if the html is generated dynamically.

How to navigate between divs On Success in ajax call

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"),
}
});
});

Replacing view data with edit form

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>

jquery delaying process based on response

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.