Skip to content

Instantly share code, notes, and snippets.

@perminder-klair
Created December 9, 2013 12:38
Show Gist options
  • Save perminder-klair/7871669 to your computer and use it in GitHub Desktop.
Save perminder-klair/7871669 to your computer and use it in GitHub Desktop.
jQuery ajax request when typing complete's or enter key is pressed
@keyframes shake{
0% { transform: translate(3px, 0); }
50% { transform: translate(-3px, 0); }
100% { transform: translate(0, 0); }
}
@-moz-keyframes shake{
0% { -moz-transform: translate(3px, 0); }
50% { -moz-transform: translate(-3px, 0); }
100% { -moz-transform: translate(0, 0); }
}
@-webkit-keyframes shake {
0% { -webkit-transform: translate(3px, 0); }
50% { -webkit-transform: translate(-3px, 0); }
100% { -webkit-transform: translate(0, 0); }
}
.shake {
animation-name: shake;
animation-duration: 150ms;
animation-iteration-count: 2;
animation-timing-function: linear;
-moz-animation-name: shake;
-moz-animation-duration: 150ms;
-moz-animation-iteration-count: 2;
-moz-animation-timing-function: linear;
-webkit-animation-name: shake;
-webkit-animation-duration: 150ms;
-webkit-animation-iteration-count: 2;
-webkit-animation-timing-function: linear;
}
var timer,
timerDelay = 4000; // 4000ms delay, tweak for faster/slower
$(".some-input").on('keypress', function (e) {
var activeField = $(this);
clearTimeout(timer); // Clear the timer so we don't end up with dupes.
activeField.css({"backgroundColor": "orange", "color": "white"});
if(e.which === 13) { //if enter key is pressed
submitData(activeField);
return;
}
timer = setTimeout(function() { // assign timer a new timeout
submitData(activeField);
}, timerDelay);
function submitData(activeField) {
$.post( "ajax.php", { firstName: 'John', lastName: 'Cena' })
.done(function(data) {
activeField.css({"backgroundColor": "green", "color": "white"});
console.log( "success" );
})
.fail(function() {
activeField.css({"backgroundColor": "red", "color": "white"});
//shake it
activeField.addClass("shake");
console.log( "error" );
})
.always(function() {
console.log( "finished" );
});
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment