Search jQuery

jQuery Forum

delay keyup using ajax call

in Using jQuery • 3 years ago

hi i need some help with delaying keyup on an ajax call.

i have 4 input boxes within the html which generates a price - it's all working as it should be i cannot enter 10 for example as ajax is triggered to update the price as soon as i enter 1.

this is my code.

$("#ajaxform").bind('rightnow change keyup', function(e) {
$.ajax({
type: "POST",
url: "<?php echo ROOT; ?>ajax.php",
data: $('#ajaxform').serialize(),
success: function(html) {
$("#ajaxresults").html(html).show();
}
});
})
.triggerHandler("rightnow");
});

Replies(7)

jakecigar

Re: delay keyup using ajax call

3 years ago

How would you know if the user typed "1" with the intent of typing "10" ? Guess based on some timeout? would you do it for all the inputs? https://jsfiddle.net/jakecigar/t1ag693q/ <--

It would be cleaner if you used the focusout event.

JΛ̊KE

richard1

Re: delay keyup using ajax call

3 years ago

timeout is what i was thinking - yes it would be required for all 4 inputs.

in regards to addin the ajax is this correct

$(function() {
var magicalTimeout=1000;
var timeout;
$("#ajaxform").on('keyup', function(e) {
var form=this
clearTimeout(timeout);
timeout=setTimeout(function(){
$.ajax({
type: "POST",
url: "<?php echo ROOT; ?>ajax.php",
data: $('#ajaxform').serialize(),
success: function(html) {
$("#ajaxresults").html(html).show();
}
});
console.log(form,$(form).serialize())
},magicalTimeout)
}).trigger("keyup");
})

jakecigar

Re: delay keyup using ajax call

3 years ago

It seems OK, but the javaScript compiler in my head is not 100% compatible with browsers.

Does it work?

JΛ̊KE

richard1

Re: delay keyup using ajax call

3 years ago

Key up function works great, but for some reason the ajax doesn't work to update the other information. how or where do i add back in the "rightnow" trigger handler so the rest of the page updates.

Sorry i am new to this and is out of my current skillset.The below was my original code and from what i can make out it binded a function rightnow with a trigger at the end.

$("#ajaxform").bind('rightnow change keyup', function(e) {
$.ajax({
type: "POST",
url: "<?php echo ROOT; ?>ajax.php",
data: $('#ajaxform').serialize(),
success: function(html) {
$("#ajaxresults").html(html).show();
}
});
})
.triggerHandler("rightnow");
});

UPDATED - i tried the below code which seems to work, but for some reason the size box only appears when you click the 2nd colour it no longer loads on the page on first page load.

$(function() {
var magicalTimeout=500;
var timeout;
$("#ajaxform").on('keyup change rightnow', function(e) {
var form=this
clearTimeout(timeout);
timeout=setTimeout(function(){
$.ajax({
type: "POST",
url: "<?php echo ROOT; ?>ajax.php",
data: $('#ajaxform').serialize(),
success: function(html) {
$("#ajaxresults").html(html).show();
}
});
// console.log(form,$(form).serialize())
},magicalTimeout)
}).triggerHandler('keyup rightnow');
});

everything seems to take 500ms instead of just the input fields. you can view the example here FYI click the first link first then the 2nd link

https://www.a4jdesigns.co.uk/?pass=1

https://www.a4jdesigns.co.uk/work-wear-store/cardigans/coloursure-cardigan-md04m/

is there anyway the delay can just be on the input fields rather than the whole form. And i'm not sure what is stopping the size boxes from show on page load as this worked with the original code.

jakecigar