Send only one Ajax post request with keydown() - jQuery - javascript

So here is my situation:
I have a bunch of DOM elements in a class ".editable" with the contentEditable attribute attached to them.
For each element I instantiate an Ajax POST with keydown(), but before the ajax request is sent, I check to see if the keydown() gives me a TAB or an ENTER key, and if so then the ajax POST succeeds.
The issue I am having right now is that if the TAB key or the ENTER key is held down, I am ending up sending multiple Ajax POSTs. How would I go about stopping this?
NOTE: I don't want to detach the event with .off() because I want those events to still exist after the ajax POST is done.
Any help or recommendations would be much appreciated!
(function($, window, document) {
/* Namespace */
$.fn.SaveEditable = function() {
var settings = {
context: null,
position: null,
content: "(empty)",
element: "(empty)",
data_id: "(empty)"
};
var s, keyCode;
function init(e, options) {
s = $.extend({}, settings, options);
keyCode = e.keyCode || e.which;
//If Enter or Tab key is pressed
if(keyCode == 9 || keyCode == 13) {
e.preventDefault();
s.context.blur();
sendAjax();
}
} //End init
function sendAjax() {
$.ajax({
url: 'save.php',
type: 'POST',
data: { user_id: <?=$user_id;?>, sort_id: <?=$currentSort;?>, element: s.element, data_id: s.data_id, content: s.content },
success: function (data) {
if(data) {
var obj = jQuery.parseJSON(data);
//Do something with obj
}
$(".ajax-status")
.addClass("success")
.html("Updated content successfully");
},
error: function() {
$(".ajax-status")
.addClass("error")
.html("An error has occurred. Please try again.");
}
});
} //End sendAjax
/* Initilize */
return this.each(function(i, domEl) {
$(this).on({
keydown: function(e) {
init(e, {
context: $(this),
position: i,
content: $(this).text(),
element: $(this).data('element'),
data_id: $(this).data('id')
});
}
});
});
};
})(jQuery, window, document);
Then it is called like so:
$('.editable').SaveEditable();

Here's an example of preventing an XHR request if it's still pending
$(function(){
var xhr;
$("#my-input").keydown(function(){
if (!xhr || xhr.readyState === 4) {
xhr = $.ajax({...});
}
});
});

Hm, how about using keyup event?
As said in jQuery docs:
The keyup event is sent to an element when the user releases a key on
the keyboard.
UPDATE: In order to fix element focus you can leave keydown event with:
keydown: function(e) {
e.preventDefault();
if ((e.keyCode || e.which) == 9) {
return false;
}
}

function init(e, options) {
var check = true;
s = $.extend({}, settings, options);
keyCode = e.keyCode || e.which;
//If Enter or Tab key is pressed
if(keyCode == 9 || keyCode == 13) {
e.preventDefault();
s.context.blur();
if(check)
sendAjax();
check = false;
}
} //END init
On key up set check back to true.

Related

How to reload a particular div in which input tag is there on press of enter

I have a search box at the top of page that makes an ajax call when a user hits the adjacent button. I am trying to update the input tag so that when a user hit the 'enter' key, the appropriate JavaScript takes place without reloading the page. without using form
$('#Searchbar').bind("enterkey", function (e) {
$("#Searchbar").load('Search(1);');
e.preventDefault();
});
$('#Searchbar').keyup(function (event) {
if (event.keyCode === 10 || event.keyCode === 13) {
$(this).trigger("enterKey");
event.preventDefault();
}
});
}
$('#Searchbar').on("enterkey", function(e) {
//
search('whatever your search string might be', function(result) {
// get the result and put in the resultcontainer
$('.resultContainer').html(result);
});
e.preventDefault();
});
$('#Searchbar').keyup(function(event) {
if (event.keyCode === 10 || event.keyCode === 13) {
$(this).trigger("enterKey");
event.preventDefault();
}
});
function search(data, callback) {
//Do an ajax call and call the callback on succes
//Check for proper syntax in jquery documentation
$.post({
'data': data,
'url': your search url,
success: function(result) {
callback(result);
}
});
}

show javascript message to user using onbeforeunload event only for browser close event

As per the project requirement, on which I am working now, I need to show user a javascript alert only in the event of browser close using javascript. All other page events like url click, button click, F5 key press etc. are to be disregarded. I have tried with the following code but with no use.
var isPostBack = false;
$(function() {
// You would copy this for select and any other form elements I forgot about
$('input').live('click', function() { isPostBack = true; });
$('a').live('click', function() { isPostBack = true; });
document.onkeydown = function(e) { //attach to key down event to detect the F5 key
isPostBack = false;
if (!e) { //Firefox and Safari gets argument directly.
e = window.event;
}
var key = e.keyCode ? e.keyCode : e.which;
try {
if (key == 116) { //F5 Key detected
isPostBack = true;
}
}
catch (ex) { }
}
});
window.onbeforeunload = check;
function check() {
if (!isPostBack) {
// Do your unload code
isPostBack = false;
var strPath = window.location.pathname;
if (strPath.indexOf('CustomerPortal') >= 0) {
alert('Customer, you are leaving our page.');
}
else {
alert('User, you are leaving our page.');
}
return "Are you sure you want to exit this page?";
}
}
Please help to achieve my target requirement with your valuable comments and help.

JAVASCRIPT - intercepting keycode 13 (enter) in dynamically-created editbox and passing element to different function

Ok..I've been working all day on a demo CRUD app learning some Bootstrap and JS basics...
I've almost got what I want but the last thing is I need it to do is while in the editbox to grab the keycode 13 event (enter) and so send the right class to a function that already works..
it all goes something like this...
$(function() {
...
...
$(document).on("blur", "input#editbox", function(){ saveEditable(this) });
});
function saveEditable(element) {
$('#indicator').show();
var User = new Object();
User.id = $('.current').attr('user_id');
User.field = $('.current').attr('field');
User.newvalue = $(element).val();
var userJson = JSON.stringify(User);
$.post('Controller.php',
{
action: 'update_field_data',
user: userJson
},
function(data, textStatus) {
$('td.current').html($(element).val());
$('.current').removeClass('current');
$('#indicator').hide();
},
"json"
);
}
function makeEditable(element) {
$(element).html('<input id="editbox" size="'+ $(element).text().length +'" type="text" value="'+ $(element).text() +'" onkeypress="return checkForEnter(event)">');
$('#editbox').focus();
$(element).addClass('current');
}
function checkForEnter(e){
if (e.keyCode == 13) {
saveEditable(e);
return false;
}
}
It works pretty good on the blur event firing but just isn't quite there for ENTER
here is the link...just Load the table and see http://markenriquez.tekcities.com/credapp
advTHNAKSance
You are passing event as argument to saveEditable() method from checkForEnter(). Wherein you should pass input field reference instead.
Try this,
function checkForEnter(e){
if (e.keyCode == 13) {
saveEditable(e.target);
return false;
}
}
Hope this helps.
$(window).on("keypress", "input#editbox",function(e){
if(e.keyCode == 13){
do_something();
}
});
PS. Your textarea top-left and bottom-left corners are rounded.

Load path JSON when hit enter

I need have to carry the description of the title when clicking "enter",
I created a variable for the path of the description:
var descri = json.query.results.channel.item.map(function (item) {
return item.summary;
});
And this code, jQuery to call the the variable when you click enter:
$(document).on('keypress', function (e) {
if (e.which == 13) {
//I think the error is here:
$('.description').html('descri');
}
e.preventDefault();
});
jsfiddle
Use this
success: function (json) {
/* Other things */
// description
var description = json.query.results.channel.item.map(function (item) {
return item.summary;
});
// Call Ajax Key Enter
$(document).on('keypress', function (e) {
if (e.which == 13) {
$('.description').html(description);
}
e.preventDefault();
});
/* Other things */
}
Demo: http://jsfiddle.net/2NmnB/2/
If I understood your question correctly then here is your answer below.
if (e.which == 13) {
$('.description').html($(".nav_holder li.selected").text());
}

Detecting data changes in forms using jQuery

I'm using ASP.NET 2.0 with a Master Page, and I was wondering if anyone knew of a way to detect when the fields within a certain <div> or fieldset have been changed (e.g., marked 'IsDirty')?
You could bind the Change event for all inputs and flag a variable as true. Like this.
var somethingChanged = false;
$(document).ready(function() {
$('input').change(function() {
somethingChanged = true;
});
});
But, keep in mind that if the user changes something, then changes back to the original values, it will still be flagged as changed.
UPDATE: For a specific div or fieldset. Just use the id for the given fieldset or div. Example:
var somethingChanged = false;
$(document).ready(function() {
$('#myDiv input').change(function() {
somethingChanged = true;
});
});
Quick (but very dirty) solution
This is quick, but it won't take care of ctrl+z or cmd+z and it will give you a false positive when pressing shift, ctrl or the tab key:
$('#my-form').on('change keyup paste', ':input', function(e) {
// The form has been changed. Your code here.
});
Test it with this fiddle.
Quick (less dirty) solution
This will prevent false positives for shift, ctrl or the tab key, but it won't handle ctrl+z or cmd+z:
$('#my-form').on('change keyup paste', ':input', function(e) {
var keycode = e.which;
if (e.type === 'paste' || e.type === 'change' || (
(keycode === 46 || keycode === 8) || // delete & backspace
(keycode > 47 && keycode < 58) || // number keys
keycode == 32 || keycode == 13 || // spacebar & return key(s) (if you want to allow carriage returns)
(keycode > 64 && keycode < 91) || // letter keys
(keycode > 95 && keycode < 112) || // numpad keys
(keycode > 185 && keycode < 193) || // ;=,-./` (in order)
(keycode > 218 && keycode < 223))) { // [\]' (in order))
// The form has been changed. Your code here.
}
});
Test it with this fiddle.
A complete solution
If you want to handle all the cases, you should use:
// init the form when the document is ready or when the form is populated after an ajax call
$(document).ready(function() {
$('#my-form').find(':input').each(function(index, value) {
$(this).data('val', $(this).val());
});
})
$('#my-form').on('change paste', ':input', function(e) {
$(this).data('val', $(this).val());
// The form has been changed. Your code here.
});
$('#my-form').on('keyup', ':input', function(e) {
if ($(this).val() != $(this).data('val')) {
$(this).data('val', $(this).val());
// The form has been changed. Your code here.
}
});
Test it with this fiddle.
A simple and elegant solution (it detects form elements changes in real time):
var formChanged = false;
$('#my-div form').on('keyup change paste', 'input, select, textarea', function(){
formChanged = true;
});
For a form you could serialize the contents on load then compare serialization at a later time, e.g.:
$(function(){
var initdata=$('form').serialize();
$('form').submit(function(e){
e.preventDefault();
var nowdata=$('form').serialize();
if(initdata==nowdata) console.log('nothing changed'); else console.log('something changed');
// save
initdata=nowdata;
$.post('settings.php',nowdata).done(function(){
console.log('saved');
});
});
});
Note this requires form elements to have a name attribute.
Just to clarify because the question is "within a certain fieldset/div":
var somethingChanged = false;
$(document).ready(function() {
$('fieldset > input').change(function() {
somethingChanged = true;
});
});
or
var somethingChanged = false;
$(document).ready(function() {
$('div > input').change(function() {
somethingChanged = true;
});
});
You can give the fieldset or div an ID and bind the change event to it ... the event should propagate from the inner children.
var somethingChanged = false;
$('#fieldset_id').change(function(e)
{
// e.target is the element which triggered the event
// console.log(e.target);
somethingChanged = true;
});
Additionally if you wanted to have a single event listening function you could put the change event on the form and then check which fieldset changed:
$('#form_id').change(function(e)
{
var changedFieldset = $(e.target).parents('fieldset');
// do stuff
});
I came up with this piece of code in CoffeeScript (not really field tested, yet):
Add class 'change_warning' to forms that should be watched for changes.
Add class 'change_allowed' to the save button.
change_warning.coffee:
window.ChangeWarning = {
save: ->
$(".change_warning").each (index,element) ->
$(element).data('serialized', $(element).serialize())
changed: (element) ->
$(element).serialize() != $(element).data('serialized')
changed_any: ->
$.makeArray($(".change_warning").map (index,element) -> ChangeWarning.changed(element)).some (f)->f
# AKA $(".change_warning").any (element) -> ChangeWarning.changed(element)
# But jQuery collections do not know the any/some method, yet (nor are they arrays)
change_allowed: ->
ChangeWarning.change_allowed_flag = true
beforeunload: ->
unless ChangeWarning.change_allowed_flag or not ChangeWarning.changed_any()
"You have unsaved changes"
}
$ ->
ChangeWarning.save()
$(".change_allowed").bind 'click', -> ChangeWarning.change_allowed()
$(window).bind 'beforeunload', -> ChangeWarning.beforeunload()
An alternative to Dw7's answer if you only want the fields inside a fieldset then you can call serialize() on its input values. Note: serialize() will not pickup any elements that do not have a "name" attribute. This will work for select tags as well.
var initialValues = $('#your-fieldset :input').serialize();
$('form').submit(function(e) {
e.preventDefault();
var currentValues = $('#your-fieldset :input').serialize();
if (currentValues == initialValues) {
// Nothing has changed
alert('Nothing was changed');
}
else {
this.submit();
}
});
.live is now deprecated and replaced by .on:
var confirmerSortie = false;
$(document).on('change', 'select', function() {
confirmerSortie = true;
});
$(document).on('change keypress', 'input', function() {
confirmerSortie = true;
});
$(document).on('change keypress', 'textarea', function() {
confirmerSortie = true;
});
The following solution worked for me:
$("#myDiv :input").change(function() { $("#myDiv").data("changed",true);});
}
if($("#myDiv").data("changed")) {
console.log('Form data changed hence proceed to submit');
}
else {
console.log('No change detected!');
}
Thanks

Categories