I am using ajax function to update and output the result.
how can I delay like 2 secs before the second update result get display again?
since right now, after the first update and second update, the text is the same like
'updated' I want to let user know this is the second time updated msg.
$.ajax({
type: "post",
url: "function.php",
data: "ajax=updateAward&" + inputs,
success: function(html) {
$('#message_award').html(''); //clear previous text
//delay 2 sec then display below?
$('#message_award').html(html) ;
}
});
Use setTimeout to execute a function after a delay (given in milliseconds). Here's a complete example:
$.ajax({
type: "post",
url: "function.php",
data: "ajax=updateAward&" + inputs,
success: function(html) {
setTimeout(function() {
$('#message_award').html(html);
}, 2000);
}
});
Related
This question already has an answer here:
Ajax too slow - Recursion
(1 answer)
Closed 4 years ago.
So this thing was going in my mind for a long time whether the timer that is given in an AJAx after which it has to send another request, what if it is smaller than the actual time taken by the requested file to complete its operation.
for example, consider the below code,
<div class="item"></div>
<script>
function timeLeft() {
$(".item").each(function() {
$this = $(this);
var dataString = {s: "//some data", st: "<?echo $stamp?>"};
$.ajaxSetup({cache:false});
$.ajax({
type: "POST",
url: "get_content_home.php",
dataType: "html",
data: dataString,
success: function(result) {
$this.html(result);
}
});
});
}
window.setInterval(function() {
timeLeft();
}, 100);
</script>
the timer given here is 100ms and the file get_content_home.php will be requested every 100m. What if get_content_home.php takes 500ms to complete its operations. Will the get_content_home.php be preempted and will be requested again? or will the timer wait and delay itself.
Thanks in advance.
It's worse than you thought since the ajax request is in a loop.
What's gonna happen is actually :
window.setInterval call timeLeft
timeLeft call the AJAX request to get_content_home.phpone time for each .item element.
Let's say one AJAX call take 500ms, you'll do this five time before the first AJAX request return something (hence 5xnumber of .item calls before one result).
To stop this craziness, put your AJAX call outside of the loop and put the window.setInterval in the AJAX callback function:
$.ajax({
type: "POST",
url: "get_content_home.php",
dataType: "html",
data: dataString,
success: function(result) {
$this.html(result);
window.setTimeOut(function() {
timeLeft();
}, 100);
}
});
and call timeLeft(); just once at the start.
What I need
when click event is triggered service call is made then it may call only one time only.
Use case
Dropdown1
Dropdown2
Dropdown3
1. There are three dropdown in html page.
2. when dropdown 1 is call - ajax call made only 1 time.
3. when dropwdown 2 is call -ajax call made only 1 time.
4. when dropwdown 3 is call -ajax call made only 1 time.
Now user change dropdown 1.
5. when dropwdown 1 is call -ajax call made only 1 time.
Problem occurs
6. Now when dropwdown 2 is call -ajax call made only 2 time.
7. Now when dropwdown 3 is call -ajax call made only 2 time.
similary when we change dropdown 1
count increase by one.
Now user change dropdown 1.
8. Now when dropwdown 2 is call -ajax call made only 3 time.
9. Now when dropwdown 3 is call -ajax call made only 3 time.
Js code
dowpdown 1 has assigned id with dowpdown_1
dowpdown 2 has assigned id with dowpdown_2
dowpdown 3 has assigned id with dowpdown_3
$("#dowpdown_1").change(function() {
$.ajax({
url: 'path',
cache: false,
data: {
data
},
success: function(html) {
console.log('dowpdown_1');
$("#dowpdown_2").change(function() {
$.ajax({
url: 'path',
cache: false,
data: {
data
},
success: function(html) {
console.log('dowpdown_2');
}
});
}
$("#dowpdown_3").change(function() {
$.ajax({
url: 'path',
cache: false,
data: {
data
},
success: function(html) {
console.log('dowpdown_3');
}
});
});
}
});
});
Any solution is most welcome.
Everytime you change the dropdown_1 you are adding a new event to dropdown_2 and dropdown_3 that do the same thing.
It might seem that this is the same event but you are actually binding new change events to your dropdowns.
You can either bind only once the events or if you want your previous structure (seems like cascade functionality but I am not sure) you could use this:
$("#dowpdown_2").off().on('change', function () {// do the ajax});
$("#dowpdown_3").off().on('change', function () {// do the ajax});
This way everytime you add the new function on the change event you will at least unbind all previous events from it and it won't trigger again. Of course this means that there aren't any other change events that matter to your case because they will be unbinded too.
Else as I said you can just do this
$("#dowpdown_1").on('change', function ()
{
$.ajax({
url: 'path',
cache: false,
data: {data},
success: function (html)
{
console.log('dowpdown_1');
}
});
$("#dowpdown_2").on('change', function () {
$.ajax({
url: 'path',
cache: false,
data: {data},
success: function (html)
{
console.log('dowpdown_2');
}
});
$("#dowpdown_3").on('change', function () {
$.ajax({
url: 'path',
cache: false,
data: {data},
success: function (html)
{
console.log('dowpdown_3');
}
});
everytime your ajax is completed, your callback attaches a new event to your other 2 dropdowns. That means every time you bind an event inside of an ajax callback you have to care if an element exists or it will be new created.
TLDR adding .unbind in front of your event should fix this
$("#dowpdown_2").unbind().change(function () {
....
})
I have an input field being dynamically updated from an AJAX function. How do I also fire a "keyup" even so the updated input value is picked up from another JS script. Basically I'm trying to mimic a user typing a number into the input field. Thanks in advance
Here is the code I have to update the input field
var interval = 500; // 1000 = 1 second, 3000 = 3 seconds
function doAjax() {
$.ajax({
type: 'POST',
url: 'speed.php',
data: $(this).serialize(),
dataType: 'json',
success: function (data) {
$('#kilometers').val(data);
},
complete: function (data) {
// Schedule the next
setTimeout(doAjax, interval);
}
});
}
setTimeout(doAjax, interval);
$('#kilometers').keyup(update);``
I have an existing jquery code that calls for showing up div contents. Here is it:
$.ajax({
url: 'sendform.php?action=datapp',
type: 'POST',
data: data,
success: function (response) {
if (response == 'SUCCESS') {
$('#FormA').show();
$('#FormB').hide();
}
},
Now, I want to add a line here that starts a timer (timeout), which shows FormC after 20 seconds. Please help.
Try adding below script for showing Formc after 20 secon.
setTimeout(function(){ $('#FormC').show() }, 20000);
I want to show a div with a loading animation over my page while the page loads some XML content. Once its loaded, I want to hide this div. How can I go about doing this?
$.ajax({
url: '/test.xml',
beforeSend: function(XMLHttpRequest) {
// Show the div before sending the request
$('#load').show();
},
complete: function(XMLHttpRequest, textStatus) {
// Hide the div no matter if the call succeeded or not
$('#load').hide();
},
success: function(xml) {
// if the request succeeds do something with the received XML
}
});
$.ajax({
type: "GET",
url: "your.xml",
dataType: "xml",
beforeSend: function() {
$('#div').fadeIn();
},
success: function(xml) {
// example for parsing xml
$(xml).find('YOUR_XML_TAG').each(function(){
// append xml to page HERE
});
},
complete: function() {
$('#div').fadeOut();
}
});
#cballou Your code will leave '#div' "up", if $.ajax() has not suceeded for any of numerous possible reasons.
Almost right ;)
Never under-estimate the importance of removing redundant $() calls. So ...
//all of this is inside some closure or function
var $blanket = $("#div") ;
// check if after last call, something has possibly removed your '#div'
// throw if false
ASSERT( $blanket.length === 1 ) ;
$.ajax({
type: "GET",
url: "your.xml",
dataType: "xml",
beforeSend: function() { $blanket.fadeIn();
},
success: function(xml) {
// example for parsing xml
$(xml).find('YOUR_XML_TAG').each(function(){
// append xml to page HERE
});
},
complete: function() { $blanket.fadeOut();
}
});
--DBJ
I would use the onbeforeunload event fired when the page URL changes, to create an overlay div with opacity at 0.5, which will be replaced by the new content when the page is loaded.