I have written a script that saves the textarea value automatically onchange event of the textarea. The issue I am facing is when user types something and suddenly stop then the onchange doesn't trigger until the user clicks elsewhere on the screen. Isn't it possible to make my script work in a way that when the user stops typing on textarea:
<textarea onchange="onautosave()" id="autosave" ></textarea> lets say for five seconds then the function onautosave() gets triggered? Kindly let me now how can I do it. Thanks
You can use onkeyup event and setTimeout() to trigger auto save. Here is the code (just to sketch the whole thing)
HTML
<textarea onkeyup="autosave()" id="autosave" ></textarea>
JS
var autosave_timer = null;
function save() {
// actual save code
}
function autosave() {
if(autosave_timer)
clearTimeout(autosave_timer);
autosave_timer = setTimeout(save, 5000);
}
Please note cleating timeout. It helps not to overwhelm server.
Related
I'm using Kendo on Razor pages using MVVM. On a particular page I have a pair of ListBoxes. I want to stop users from deleting items from the boxes with the delete key.
If I trap and prevent the remove event from working, that solves the problem, except you can't then use the toolbox or drag and drop to transfer items from one box to the other (edit: because move is a combination of change & remove events).
This is how I was stopping the remove event...
<select style="min-width: 600px" id="listboxImports" data-role="listbox"
data-text-field="title"
data-value-field="id"
data-selectable="multiple"
data-toolbar='{tools: ["transferTo", "transferFrom"]}'
data-connect-with="listboxSelected"
data-draggable="true"
data-template="template"
data-drop-sources="['listboxSelected']"
data-bind="source: imports, events: {remove: viewmodel.events.remove}"></select>
<script>
var viewmodel = new kendo.observable({
events: {
remove: function(e) {
e.preventDefault();
},
//
}
});
<script/>
I've also tried to trap the delete key's keydown event, but I cannot identify which of the many elements rendered when the ListBox is rendered is actually handling the event.
Can anyone tell me how I can have my cake and eat it please?
Took ma a while, inspired by the same question for kendo's Multiselect: https://docs.telerik.com/kendo-ui/controls/editors/multiselect/how-to/selection/prevent-removing-selected-items-on-backspace:
$("#listBoxA").parent().get(0).addEventListener('keydown', function(e) {
if (e.keyCode == kendo.keys.DELETE) {
e.stopImmediatePropagation();
e.preventDefault();
}
}, true)
Full dojo: https://dojo.telerik.com/aFaCIkez/3
The _keyDown handler is attached to the <ul> element. My solution attaches a new handler to its parent, using event capturing, so that handler will be executed before Kendo's, and thus stopping the event's propagation if the pressed key was delete.
Alternatively, a possible workaround is to set navigatable to false, but you obviously lose all keyboard functionality. Example: https://dojo.telerik.com/IHICAziR
I have a field like this:
{
render() {
return <Field type="text" onChange={this.debouncedSubmit} />
....
}
debouncedSubmit = debounce(this.props.submit, 500)
}
export default reduxForm({
form: 'week-form',
onSubmit: async function() {
await new Promise(resolve => setTimeout(resolve, 5000))
}
})
This works fine except for one issue. We see here submission takes 5 seconds. We see also that deboucne is 500ms. So lets say user typed in two characters, then waited 1sec. The debounce triggered and submission is in process. Now while submission is in process, lets say user inputs another character. This triggers debounce, and at time 1.5sec it triggers submit. However because submission is currently in progress, this one gets missed.
Is there a pattern with redux-form to not miss this?
What I tried:
I thought to "reinitialize" the form, but "do not update field value if current field value differs from value it is about to initialize with", and then in componentDidUpdate if form is dirty, then I would trigger submit again. However Im running into a problem:
I set in reduxForm:
enableReinitialize: true,
keepDirtyOnReinitialize: true,
And I initialize the form with data. However after the first submission, for some reason it overwrites the field and I lose the "third character" i put in while submission was going on. Why is this happening when I set keepDirtyOnReinitialize to true.
So actually my logic above works. I created a demo here on the web and it works perfectly:
https://codesandbox.io/s/37z9217q6
The problem is I am doing this in react-native on Android and there is a bug there that is causing this problem for me, I filed the bug - https://github.com/facebook/react-native/issues/19085
i would like to ask how i can intercept the ajax delete functionality of a grid using ajax binding? specifically, up to the point wherein, after i click on delete, as the confirm prompt pops up, i would like to do something based on the user's choice,
basically, if OK, do this, if CANCEL do that..
You need to use the OnRowDataBound and attach a click handler to the delete button. Then you can display custom confirmation and decide what to do. If you want' to prevent the grid deletion code - call e.stopPropagation(). Here is a quick sample:
<%: Html.Telerik().Grid(Model)
// Prevent the grid from displaying the default delete confirmation
.Editable(editing => editing.DisplayDeleteConfirmation(false))
// Subscribe to the OnRowDataBound event
.ClientEvents(e => e.OnRowDataBound("onRowDataBound"))
%>
<script>
function onRowDataBound(e) {
$(e.row) // get the current table row (TR) as a jQuery object
.find(".t-grid-delete") // find the delete button in that row
.click(function(e) { // handle its "click" event
if (confirm("Do you want to delete this record?")) {
// User clicked "OK"
} else {
// User clicked "Cancel"
e.stopPropagation(); // prevent the grid deletion code from executing.
}
});
}
</script>
The demo page seems to contain an example of what you are looking for.
I call a certain div from another page with jquery to be loaded into a div on my main page like this:
<script type="text/javascript">
$("#scotland").load("http://www.example.com/scotland .gallery");
</script>
<div id="scotland"></div>
The div I call is a piece of code which is automatically generated by a CMS made simple module, by the way.
Now it comes to my problem: The .gallery div I call, looks, a little simplified, like this:
<div class="gallery">
<span><img src="http://www.example.com/scotlandimage1.jpg"></span>
<span class="imgnavi"><a href="link_to_next_page_with_one_image">Next image</href></span>
</div>
I want the "next image"-link to load the next page into the .gallery div (it is always a page with one image on it). But what it does, is, it opens the new page http://www.example.com/scotland only.
I tried to use jquerys .live event to load the linked page (that would be "scotlandimage2" and the navigation, as you can see in the upper part - not only the image!), but I must have done something wrong. I tried different ways, but never got it to work. This was my last try:
$(".imgnavi a").click(function() {
var myUrl = $(this).attr("href");
$(".gallery").load(myUrl);
return false;
});
I have to admit that I am very new to jquery... But does someone know what I did wrong (do I even follow the right handlers?)?
Thanks very much in advance!
Martin
Your first attempt is good, but you're missing the required-for-ajax call to live instead of click:
$('.imgnavi a').live('click', function(ev) {
// Stop regular handling of "click" in most non-IE browsers
ev.preventDefault();
ev.stopPropagation();
// Load the new content into the div (same code you had)
$('.gallery').load($(this).attr('href'));
// Stop regular handling of "click" in IE (and some others)
return false;
}
EDIT in response to the question: "What will happen with the old $('gallery') content?"
With the above code, the old content will be replaced with the response to the .load() request. If you want to, say, prepend the image instead, you can just wrap the .load() call in a call to the built-in jQuery $.prepend( content ) method, like so:
$('gallery').prepend($.load($(this).attr('href')));
The same works for appending.
I'm trying to do a simple update, but can't figure out somthing.
I have a table that i get from a DB with an Edit button that when i press change to a Save button so i can save with Ajax the record that the user just edit.
I'm doing the first part just fine, have one function that do all the jquery stuff on the page (that is working just fine).
Now I want to change the $('#a'+productID) line to save insted of edit. i am changing the link attribute also, so when the user presses save it will send him to a function that will make the Ajax request and update the record.
But i dont have a clue how to start that....I don't think it has any thing to do with any bind function becouse i am allready binded by calling the save function (or am i wrong and need to bind antway???) can any one help me out here?
P.S. the save function recives the productID do i have the right product when i will need it.
Don't have a code to send for the save function becouse i don't know how to start it and every thing i tried doesn't work....sorry :-(
It might be easier if you simply had both buttons on the page and toggled between them depending on the page state.
<a id="editButton" href="http://example.com/widget/edit/1">Edit</a>
<a id="saveButton" href="http://example.com/widget/update/1" style="display: none;">Save</a>
$(function(){
$('#editButton').click( function() {
// set up the form as edit...
$(this).hide();
$('#saveButton').show();
return false;
});
$('#saveButton').click( function() {
var button = $(this);
var href = button.attr('href');
$.post(href,$('form').serialize(), function() {
// change form back to readonly...
button.hide();
$('#editButton').show();
}
});
});