Simple situation. I have form with textboxes, bound to observables. Observables has subscriptions to do some logic (server validation, whatever, just some ajax call).
There is also a button on form with some "save data" logic. Data should be saved only when all callbacks are finished.
Subscribtions are fired when value changed, mostly on focus lost, not just on every change.
Now you can simply type anything to textbox then immediately click on save button. What happens? Click event is called, and data are saved. But it is sometimes faster then subscribtion event is fired and server returns data.
How to "synchronize" click with "done" promise of subscriptions? I need to prevent to save data before everything is done. But there is no relation between subscription of textbox value and button. Everything is async, so I can't just call something like "wait for function" in click event. Other problem should be that subcription is fired later then click event.
Any solution for this?
Add a variable to manage the button state -
<button data-bind="disable: serverSideCheckInProgress">Save Data</button>
Within your ajax call -
//declare serverSideCheckInProgress false on init
saveData = function(){
serverSideCheckInProgress(true);
$.ajax({
url: "test.html",
context: document.body
}).done(function() {
serverSideCheckInProgress(false);
});
}
Related
I have an angular component that subscribes to ofActionSuccessful. This action is dispatched as the user clicks on a button on the page. It is possible that the user may click on this button multiple times resulting in multiple dispatch events for this action
this.actions$.pipe(ofActionSuccessful(UpdateCommunicationPreferences)).subscribe(() => {
console.log('Action Successful');
});
this.store.dispatch(
new UpdateCommunicationPreferences(this.communicationPreferenceForm.value)
);
The issue that I am running into is ofSuccessful is triggered in an accumulated manner. In other words, the first time the user clicks on the button, the "Action Successful" is printed once. Second time the user clicks on the button, it is printed twice and so forth.
Can anyone help if there is a way to not get duplicate ofSuccessful events for the past actions?
Appreciate any insight.
This package was developed with your issue in mind:
https://www.npmjs.com/package/#ngxs-labs/actions-executing
#Select(actionsExecuting([UpdateCommunicationPreference])) myActionIsExecuting$: Observable;
you can use myActionIsExecuting$ in your template with async pipe. you can also simply subscribe to myActionIsExecuting to familiarize yourself with what is returned. null will be returned when all instances of that particular action are finished.
I hope that helps!
Take a look this: https://www.ngxs.io/advanced/cancellation
Extracted from the link: "If you have an async action, you may want to cancel a previous Observable if the action has been dispatched again. This is useful for canceling previous requests like in a typeahead."
Alternatively, you can consider a pattern that disables the UI when the button is clicked (e.g. via 'in progress' dialog) before triggering the action dispatch. When the action is done processing, close the dialog.
Hope this helps.
I need to create a custom click event that fires off an ajax call on a date entry within the Scheduler. (The "event" holds data I need to perform the ajax call). This part is easy enough.
The problem is that the "change event" triggers for anything and everything including selecting the different day, week and month views. Resulting in a rather annoying popup for every little click.
I need to find a way of knowing what was clicked, so that I only fire off the ajax call on actual date entry clicks. How would I go about doing that?
EDIT
The reason the event is fired for the day, week and month view clicks as well as a scheduled entry click is that when selecting a scheduled entry, that entry remains selected regardless of the view been clicked resulting in the "changed event" containing the same data for that selected scheduled entry.
So the solution is possibly to deselect the selected entry or know what clicked element triggered the event. If the event was triggered by clicking on the "day" view for example. Don't do the ajax call, if the event was triggered by a click on a scheduled event this Monday for example, then do the ajax call.
The function I am working with is here:
http://docs.telerik.com/kendo-ui/api/web/scheduler#events-change
Altho I would have preferred to use the event change functions. The solution is to use an "event template" instead that holds an anchor tag that can trigger the modal window and ajax call when clicked on:
<script id="event-template" type="text/x-kendo-template">
<a onclick="calendarCall(#: id #);">#: title #</a>
</script>
<script>
function calendarCall(id){
$("#modal").modal("toggle");
$.ajax({
url: 'someurl' + id,
success: function(data){
$("#modal .modal-body").html(data);
}
})
}
</script>
Is is possible to use AJAX on an onblur event from a textfield. I'd like html (inside a div container) to change whenever I tab out of a textfield. I see a lot of questions/tutorials using AJAX with forms but not on the individual components such as textfield or checkbox.
You can do it using plain JQuery. Assuming your form element has the ID of my_element:
$("#my_element").blur(function(){
$.ajax({url: '/my/data', type: 'GET'})
.done(function(response){
$("#my_div").html(response);
})
})
I am using jqgrid 3.8. I have a grid which is having some editable columns.I also have an update button to save the grid contents on the server.
If user clicks on editable cell and changes the content and then clicks on update button, i am doing the following things.(after clicking on cell user directly clicks on update button)
first i am calling jqGrid 'savecell' method with iRow, iCol.
here the cell is being saved/ showing popup for validations.
but i want a callback to know whether cell is saved/not so that i can stop or continue my save functionality.
my sample code is like this
function updateGrid(){
// i have iRow, iCol references in beforeEditCell event as grideditRow, grideditCol.. these values r not getting modified nowhere else..
$(gridid).jqGrid('saveCell', grideditRow, grideditCol);
//logic to get grid data using getchangedcells and send ajax call to server.
var changedCells = $(gridid).jqGrid('getChangedCells', 'dirty');
}
how can i stop update logic after saveCell call if savecell is failed. saveCell is returning only jqgrid element.
is there any mechanism to get true/false from savecell or can i pass some callback to savecell?
There are afterSaveCell and errorCell events. One of the events will be called after saving the cell on the server. If you implement the corresponding event handler, you will be notified whether the saving of the new cell value was successful or not.
My page is divided into two parts vertically.Left part is like a menu section. Clicking on
any menu brings the proper data related to that menu in the right part of the page. I am
doing it using ajax call and the only div on the right part get refreshed. I am using jquery click event for that ..
say:
$("#left_part").click(function() { // ajax call here });
Now I have some more jquery action on the right part. (say Show hide some div which also work on click event.)
But when new div reloads on the right part those click event on the right part is not working.
But when I bind the click event it works.
say:
$("#some_right_part").click(function() {/ some hide show here )}; Not working
$("#some_right_part").bind('click', function(event){ // some hide show here )}; works fine
Important: When I am on fresh page (no ajax call yet to bring right part) $("#some_right_part").click(function() {/ some hide show here )}; works fine.
But what I know is: $().click(function) calls $().bind('click',function)
So, What is the reason behind this? Or What is the perfect way to solve such problem
Thanks
When you assign a click event via $().click when the page loads, the click event is bound to all matching elements. However, when you do the ajax call and recieve new markup - the new elements are not bound to the click event because they did not exist when you first called $().click.
There is a way to get a click event to be bound to all elements and all future elements that may be created. You must use the live method like so:
$('#elements').live('click', function() {
// do logic
});