In ember, I have a form which ask the user their username and password for our remote server and then I want to verify the credentials by making an ajax call. Currently, I am using a custom made component which allows me to bind any action on clicking next or submit where I can verify the credentials and throw errors if needed. But once an error will occur, user cant click the next button (the way component is implemented) and hence second time validation is not happening. So, I thought to make a computed property which will look for username and password (and hence make ajax call when entered). But the problem with this approach is: every time something is entered in these boxes, computed property gets triggered which makes an ajax call (i dont want to make so many network calls for no purpose). Is there a way in ember where we can wait for user to finish the input and then invoke any kind of action?
Better approach is to use oninput with action:
<input oninput={{action "onInput" value="target.value"}}>
and then from action onInput debounce call to ajax function using debounceTask from ember-lifeline addon(this example), or using ember-concurrency:
actions: {
onInput(val){
debounceTask(this, 'sendAjax', val, 500);
}
}
Related
Browser native confirm dialog doesn't look good.
I have ember route wherein taking user confirmation to proceed if there are any unsaved changes.
I wanted to change the dialog with bootbox confirm dialog but that doesn't stop the execution as bootbox.confirm() method is async.
willTransition: function(transition){
// model dirty checking logic to set flag value
if(flag){
if(!confirm("Do you want to leave this page without save?")){
transition.abort();
}
}
}
Note: ES6 is not used in project
Since it doesn't block, the only way to do this is to:
Act as if the user said "No" then
If they click "Yes": programmatically restart whatever it was that was cancelled at step 1.
On my page a I have a PL/SQL process that updates the database. If the process is successful, I want to display a success message. The way I am doing this now is by setting a Success Message property of my process to a page item that contains success message - &P1_SUCCESS_MSG.
I also set Error property of my process to &P1_ERROR_MSG..
Both P1_SUCCESS_MSG and P1_ERROR_MSG gets set inside the process. Now the issue I have is when the user clicks the Save button, thus activating the process, without changing anything one the form. The success message is displayed regardless if any changes were made. I was wondering if there is an easy way to check if the form was changed and prevent the success message from being displayed if not changes were made to the database
If success message is displayed, it means that :P1_SUCCESS_MSG has value. Why? It should be empty by default and set only if procedure completes successfully and changes something.
For that purpose, I'd create a stored procedure with one (or two) OUT parameter(s); the same parameter might be used to inform user of what happened. That OUT parameter would be used to set :P1_SUCCESS_MSG item's value.
So, if something has been done, it would say e.g.
Procedure successfully completed.
Otherwise,
Nothing has been done.
I am extending Ember.TextField (which extends Ember.Component) in order to read a file. My intent is if the chosen file satisfies some conditions, send an action to the controller. But if it fails, send a different action. However when I try to do this, no action is called.
I created a jsbin of what I am trying to do.
You need to send in what the action should map to in that scope when you create the component, in your case they are the same action name, but in other cases, the component could be calling acceptChanges and it could be hitting the controller action acceptImageChanges where-as another may be acceptDocumentChanges. This allows you to use the component multiple times in the same scope, yet have the actions that are passed out of it be customized per instance.
{{view App.ImportFileView invalidFileType='invalidFileType' acceptChanges='acceptChanges' }}
http://emberjs.jsbin.com/tonorida/10/edit
I am trying to build out edit functionality for a Goal record. On the Goal index page, there is an edit button next to each goal. When clicked, each field becomes editable. Upon clicking Save, the changes are saved to the server. So far so good.
There is also a Cancel button. When a user clicks it, I need to reset the state of the model to what it was before they changed things. goal.rollback() in the controller works fine for this. Except, if the user has already clicked Save but there were server side validation failures. In this case, attempting to rollback() throws Uncaught Error: Attempted to handle event `reloadRecord` on <App.Goal:ember123:1234> while in state root.loaded.updated.invalid.
If instead I try to goal.reloadRecord I get Uncaught Error: Attempted to handle event `reloadRecord` on <App.Goal:ember123:1234> while in state root.loaded.updated.invalid.
Same deal with goal.unloadRecord. I have tried massaging the state like this:
state = goal.get('currentState') #this code makes me sad.
state.isValid = true
state.isError = false
And like this:
goal.transitionTo('loaded.saved')
To no avail. Is make zero sense to me the reloading or unloading a record should be statefull.
Any assistance would be greatly appreciated. Again, I'm trying to take a dirty, invalid record in ember and get it back to a happy state either by rolling back changes, or just reloading it from the server.
EDIT: Ember-data v1.0.0-beta.3-4-g169793e, ember Version: 1.1.2
Here's a working example, change the color then hit save.
http://emberjs.jsbin.com/OxIDiVU/44/edit
PR submitted https://github.com/emberjs/data/pull/1590
I use Ember data with the REST Adapter. I want to make sure that in case of slow server responses, the application does not fail.
I have simulated this bij adding at server side a sleep method of 5 seconds before returning the JSON response.
If you have a form with a SAVE button, and you click this button while a previous save is still is progress, you receive a inFlight error and the whole Ember app freezes (only thing you can do is reload app). So, you can easily disable the save button by checking the isSaving state:
<button {{action 'save'}} {{bindAttr disabled="isSaving"}}>Save</button>
Now it also seems that when changing a form field while a previous save is still is progress, you receive a inFlight error. This would thus indicate that I also need to disable the complete form.
Uncaught Error: Attempted to handle event `willSetProperty` on
<App.Author:ember477:5203e34599808d1c6c000001> while in state
rootState.loaded.updated.inFlight. Called with {reference: [object Object], store:
<App.Store:ember541>, name: name}
Is there a known good practice to handle these cases ... I want to prevent that I need to add a lot of logic (disable buttons, set fields readonly, etc.) for these edge cases.
It may not be within the scope of what you are trying to do, but the Ember Persistence Foundation is designed to allow updating your models while a save is still in flight.
It is relatively trivial to migrate your models to EPF, but there are some changes required in the controller code, see "Migrating from Ember Data".