I am not sure if this is possible, but I have a scenario where I have a validation system which notifies my validation system when something has become valid/invalid via a dependant observable. Now this works great when a user is filling out a form as the dependantObservable is driven off the underlying observables value changing. (i.e if the Name property changes, it will re-evaluate the isValid dependant observable, which will in turn notify my binding which hooks into the validation system).
Now my problem is that if the user doesn't touch the form at all and just goes straight to submission, it will not trigger the binding, as the underlying values have not changed for any observables, so no subscribers will know about any validation changes happening. Ideally I do not want to go through each observable and re-assign it its current variable to push a validation evaluation through, which would in turn trigger a change in the validation state. So as really all I want to do is get this isValid dependantObservable to refresh for lack of a better word.
It seems quite nasty either way, but my options seem to be either:
1) Force a value change on all observables being validated against (horrible)
2) Force a re-evaluation of the isValid dependantObservable to trigger the subscriber (less horrible, but still bad)
3) Re-write the validation library to expose a forceValidation() function which would somehow trigger everything to be re-evaluated, bypassing the need for the underlying observables to trigger the validation pipeline.
Any ideas?
On your computed observable (isValid) you can call notifySubscribers(currentValue), which will notify any subscribers with the current value. It will not re-evaluate the computed and will simply notify subscribers with the current value.
Add binding enable: formValid where formValid = ko.computed(return true if all values are valid) to submit button. This way user can not submit until form is filled properly.
Use ko.validation.validateObservable(yourDependentObservable) to revalidate field manually
or use yourObsevable.notifySubscribers() if yourDependentObservable depends on yourObservable.
Related
On my modal view I have two datePicker elements. I know that payload with action information is sent after each interaction, but is it possible to pass all selected values after form submission?
I only came up with solution where after each interaction selected value is cached on the server side and bound to view_id.
Hi you can achieve this by placing your interaction component inside input block type. Slack documentation says.
Any interactive components used within input blocks will not send this block_actions payload. They are included in view_submission payloads only.
https://api.slack.com/reference/interaction-payloads/block-actions
An example I have created in block kit
If you do not need to receive the block_actions events, then use input blocks like GJoshi suggests.
But if you do need the block_actions events, then you cannot use input blocks (per https://api.slack.com/surfaces/modals/using#interactions). In that case, you can add the value to the private_metadata field via the views.update call. When the user clicks the submit button, the view_submission event payload will contain the private_metadata field.
For folks who stumble upon this as I did, the answers above are no longer up to date since now slack allows input blocks to dispatch block actions. The approach of using private_metadata is still relevant in some scenarios, but just receiving block actions makes life much easier.
Simply set "dispatch_action" to true when defining a specific input block to receive a payload whenever it gets updated.
Once the user submits, you will still have access to all the values of the input data
Need to have selectors update when action handler does not update model due to invalid data.
Looking for a strategy to handle actions that would invalidate state so are dismissed. Components often fire actions with data and the state action handler determines invalid so does not update state with invalid data. However, without the update, selectors do not fire so component is left in invalid state. Memoization is great but need a mechanism to force a selector update so that components will bind correctly.
Looked at binding to the entire state, double updates, wrapping values in complex objects but all seem like hacks to a common cross cutting concern. Any patterns out there i might be missing.
I have a React.js application that I am refactoring to use the Flux architecture, and am struggling to figure out how error handling should work while sticking to the Flux pattern.
Currently when errors are encountered, a jQuery event 'AppError' is triggered and a generic Error Handling helper that subscribes to this event puts a Flash message on the user's screen, logs to the console, and reports it via an API call. What is nice is I can trigger an error for any reason from any part of the application and have it handled in a consistant way.
I can't seem to figure out how to apply a similar paradigm with the Flux architecture. Here are the two particular scenarios I'm struggling with.
1) An API call fails
All of my API calls are made from action creators and I use a promise to dispatch an error event (IE 'LOAD_TODOS_FAILED') on failure. The store sees this event and updates it's state accordingly, but I still dont have my generic error behavior from my the previous iteration (notifications, etc).
Possible resolution:
I could create an ErrorStore that binds to the 'LOAD_TODOS_FAILED' action, but that means every time I have a new type of error, I need to explicitly add that action to the ErrorStore, instead of having all errors be automatically handled.
2) Store receives an unexpected action
This is the one I'm really confused about. I want to handle cases when an action is dispatched to a Store that does not make sense given the Store's current state. I can handle the error within the Store to clean up the state, but still may want to trigger an error that something unexpected happen.
Possible resolutions:
Dispatch a new action from the store indicating the error.
I believe Stores are not suppose to dispatch actions (let me know if I'm wrong), and I still have the same issue as with an API error above.
Create a ControllerView for Error Handling that subscribes to every Store
I could define an errors property on every store, then have a View watching every Store and only act on the errors property. When the errors property is not null, it could dispatch new actions, etc. The disadvantages are that I need to remember to add every Store to this view whenever new ones are created, and every store has to have an error property that behaves the same way. It also does nothing to address API call failures.
Does anyone have a suggested approach for a generic Error Handler that fits into the Flux architecture?
TL;DR
I need to handle errors in most Action Creators and Stores. How do I setup consistent error handling that will occur for any type of generic error?
API call fails
If you want to avoid listing every error action in the ErrorStore, you could have a generic APP_ERROR action, and have properties of that action that describe it in more detail. Then your other stores would simply need to examine those properties to see if the action is relevant to them. There is no rule that the registered callback in the stores needs to be focused on the action's type, or only on the type -- it's just often the most convenient and consistent way of determining if an action is relevant.
Store receives an unexpected action
Don't issue a new action in response to an action. This results in a dispatch-within-a-dispatch error, and would lead to cascading updates. Instead, determine what action should be dispatched ahead of time. You can query the stores before issuing an action, if that helps.
Your second solution sounds good, but the dangerous thing you mentioned is "When the errors property is not null, it could dispatch new actions, etc" -- again, you don't want to issue actions in response to other actions. That is the path of pain that Flux seeks to avoid. Your new controller-view would simply get the values from the stores and respond by presenting the correct view.
I have a page which fires Ajax requests for validations at server side. I need to perform an action when all the ajax requests have finished loading or are completed.
For this, I am using Ext.Ajax.isLoading() in a recursive function in following way:
function chechValid(){
if(Ext.Ajax.isLoading()){
checkValid();
}else{
//Code for Action 1
}
}//EOF
checkValid();
//Code for Action 2
The problem is that when I do this, browsers give the following errors:
Mozill FF - too much recursions
IE - Stack overflow at line:18134
If this recursion is a heavy thing for the browsers, then how to perform a task when all the Ajax requests have finished loading?
Using delay is not what I want as, if delay is used then browser begins executing the other code (like 'Code for Action 2' as shared above) which is not what is expected.
The main aim is that the browser shouldn't execute anything unless all the Ajax requests are complete and once completed then it should perform a particular action.
Any suggestions/help on this one?
Thanks in Advance.
PS: Using ExtJs 4.0.7
(Updated)More Detail about the actual situation:-
Here is brief description of the situtaion being faced - There is a form, in which I need to perform server side validations on various fields. I am doing so by firing an ajax request on blur event. Depending upon the server response of validation Ajax fired on blur, fields are marked invalid and form submission is not allowed. (Avoiding 'change' event as that causes alot of overhead on server due to high number of Ajas requests and also leads to fluctuating effects on a field when response from various such Ajax requests are received).
Things are working fine except in one case - when user modifies the value of a field and instead of 'tab'bing out from the field she directly clicks at the save button. In such a case, though, the blur event gets fired but the processing of 'Save' doesn't wait for Ajax Validation response and submits the form. Thus, I somehow need to check if Ajax requests have finihed loading and the process the saving of form. requestComplete would unfortunately not serve the purpose here. And if try using the recursion, then of course, the browser is hung due to high usage of resources. Same case occurs if I try using a pause script work around ( as shared here - Javascript Sleep).
Any possible workaround for this one?
TIA
Your method will lead to infinite recursion.
A better way is to register a callback function in Ext.Ajax.requestcomplete, something like this (not tested):
Ext.Ajax.on('requestcomplete', function(conn, response, options) {
if (!Ext.Ajax.isLoading()) {
//your action...
}
}
};
Unless I am misunderstanding the issue couldn't you create a couple of globals. I know globals are bad, but in this case it will save you quite a bit of headache. One global would be "formReady" and initially set it to false, the other would be "ajaxActive" and set to false. You would also add an onSubmit method that would validate that "formReady" was true and if not alert the user that validation was occurring (or you could set a timeout for form submission again and have a second validation that checks to see if "ajaxActive" is true). When the AJAX call is made it would set the variable "ajaxActive" to true and once complete would set formReady to true. You could also potentially resubmit the form automatically if the response from the AJAX was that the form was good.
Ext.Ajax.request() returns a transaction object when you call it, which is unique and allows you to recognise and abort specific Ajax requests.
By just calling Ext.Ajax.isLoading() without a specified transaction object, it defaults to the last request, which is why you have to call it recursively at the moment.
If it were me, I'd create an array of these transaction objects as you fire them off, and pass each of those in as optional parameters to the Ext.Ajax.isLoading() function to check if a particular request has finished. If it has, you can remove that transaction object from the array, and only progress with the save when your array is empty.
This would get round your recursion problem, since you've always got a finite number of requests that you're waiting on.
if (Object.keys(Ext.Ajax.requests).length === 0) console.log("No active requests");
I have an object that is updated from a polling loop on a thread. This object fires particular events when data changes, etc.
I'm trying to use this object in conjunction with a windows form, where I create event handlers on the form to update the UI. Of course, this causes cross-thread operation exceptions if I try to manipulate the UI directly in these handlers.
I can get it to work by going through the standard procedure of checking InvokeRequired, using a delegate, blah blah blah. But I want to publish this object as a library, and I don't want end-users to have to worry about all that.
I want my object to somehow take care of synchronizing those event callbacks with the form so that end-users can manipulate the UI elements in those handlers worry-free.
Is there a way to do this??
If your object is always related to a single form, there is a simple trick indeed. The important fact here is, that you instanciate your object from the thread you like to affect the form later.
The trick is to instanciate a simple Control (new Control()) in your object in the constructor. When you perform logic on your form, use the Invoke/BeginInvoke methods on this simple control, to dispatch the action to the correct calling thread. So you have the dispatching logic directly in your object and there is no need for other users of your object to take care about this.