I've form with some input fields, upon submit I make a $http call and populate a model object that binds data to a table on my view. Once user saw the result, they may change the data in the form and submit the same once again, I'm trying to clear the result and populate the data with the new result. Some time the result can be same, in such cases user is not able to understand whether the form was submitted and new results has been updated or not. I'm setting my model object to undefined expecting that the data on the table will get wiped. I also have an ng-if for null check of the object and control the display of the table, I expect it to hide the table, but unfortunately it is not happening. How can I do that? $scope.apply() is the only way for me to do that. I hate to use it as it causes full digest cycle. Please advise.
You can create a separate scope for clearing the data and call that using model on button click.
Example
$scope.clearData = function () {
$scope.ApplicationFormName = "";
$scope.FirstName="";
//put your logic for clearing the form here
};
in HTML
<button title="Clear" ng-click="clearData()"></button>
Related
Hi I have a form in Angular, that i build with values from an Observable from API.
.subscribe((res) => {
this.data = res['attributes'];
});
//this.data is array of objects!!
this.attribs = modifyClean(this.data);
this.attribsOriginal = this.attribs;
Object.freeze(this.attribsOriginal);
After the form is built with this.attribs. If the user edits its original form values and Clicks save, the api saves it.
But if the API fails to save (500 error or something) I want the form to go back to its original values.
I am not using Reactive forms on purpose. But here is what i am doing when the api fails in error code
,error {
this.attribs = this.attribsOriginal;
}
But this is not replacing the form values with original values. It is retaining the values. I console.log both this.attribs and this.attribsOriginal in error block. Both of them are same values. How is this possible. I froze attribsOriginal.
If i say this.attribs = []; the form is completely removed as expected.
But why doesnt this.attribs = this.attribsOriginal, replace the form values with orginal values.
I thought freezing this.attribsOriginal will have no impact no matter what you do to this.attribs.
what can be done to avoid this situation?
It looks like this.attribs is a reference to data returned by modifyClean(this.data), and this.attribsOriginal is also a reference to the same data. If you're trying to clone an object this looks helpful
Angular uses change detection to decide when to build/rebuild the portion of the dom using your "this.attribs" data. Since nothing is changing it isn't building/rebuilding the dom.
I think you could try arbitrarily changing the data in the component.ts file, and changing it back, or this might be helpful
I currently list a set of options for ng-options from a resource that contains JSON.
[
{
id:23,
name:"Other"
},
{
id:24,
name:"Crew"
},
{
id:25,
name:"Announcer"
},
{
id:26,
name:"Producer"
},
{
id:27,
name:"Cameraman"
},
{
id:28,
name:"Monitor"
}
]
This is all added into my scope at $scope.broadcaster = response.data. I then loop through everything in my options by a simple ng-options.
<select ng-model="selectedrole" ng-options="roles as roles.name for roles in broadcaster" ng-init="selectedrole=broadcaster[0]">
</select>
Everything goes good once the page loads up. I can select from my list of names and the ng-init starts on the first selection as anticipated. However I have a few issues that I can't seem to resolve.
1) In my doc I set up {{selectedrole}} and I expected to see the contents of my model on the page reflected by my current selection. Instead I see no output at all. I can't tell if the model is even being updated properly so I'm not sure if I can use it in my formdata.
2) This select is generated on click so users can select a role for more than one person. However since the model is the same, any selection is copied over which ever one is changed. I need to find a way to output the model to check the data, but make that model dynamic so i can get a list of results from all the different selections.
EDIT:
Now this is really crazy. I mocked it up in a plunker and its at least showing the model just fine. Are there some conflictions I should worry about that would stop the model from updating? I literally copy pasted my data and its working in plunker but not my project.
http://plnkr.co/edit/GbdOmdjj1M3OuZKO5cSq?p=preview
EDIT2:
Even more info. As I stated before, the select is created when a user clicks on a function that creates an ng-repeat with user information and a new select option for role. If I place the {{selectedrole}} within that ng-repeat I actually get all the data returned when I user selects it. It seems that since the click creates a push of new data, it will not work outside each item. The issues now is that every instance has its own model so i need to figure out how to gather all this data from each ng-repeat and post it to the form. I'll try to update as I work through the issue.
I have a view called mapsView that contains a map which is generated in a controller function called maps(). In this view I also have a radio button form which is used to filter the markers on the map.
The form is sent via jquery and ajax to another controller function called get_markers() which queries the database successfully and returns an array of values including lng, lat and name which I need to pass back to my view.
The array is called markerDetails and when I do a var_dump($query->result()); I can see that my query was a success.
I am new to using Codeigniter and the problem I have is caused because the form handling and database query are done in a separate controller function to the one that loads the map view. The maps() function creates the maps and get_markers()deals with the database query based on the form data submitted from the mapsView page.
I have tried moving all the code from the get_markers() controller function into the maps() controller function but when I do the var_dump($query->result()); returns everything in the table and not just the results of my query.
My main problem is that I need the results from my database query in the mapsView page but I cant reload the page because I will lose all the settings for my map.
The form is on the mapView page and is a standard radio button form with a hidden field that has a value for the location. on submit the form passes a value for the location and also for a type that has been picked via the radio buttons.
I am unsure how to approach this problem because the MVC method of doing things is new to me and am wondering if someone could point me in the right direction.
What I understood is that you need to pass data retrieved in a Model to a View.
I implement this by keeping data retrieved from Model in an array and and pass it to view as follows
In controller
function map(){
$this->load->model('maps');
$data['marker_details']=$this->maps->get_marker_details();
$this->load->view('map_view',$data);
}
The data passed would be received as a new variable eg $data['abc'] in controller could be accessed as $abc in view
Thus all your markers could be accessed as $marker_details in map_view
Hope this was needed
I am using knockout in my project. I have multiple viewmodel, each viewmodel have its own save function implemented in it. Now whenever user clicks on save button the viewmodel data post to the server, i want to block the save button until the response came back from server.
Currently i am handling this by creating an extra observable property saving in each viewmodel. So when user click over the save button i am setting saving observable to true and in callback i am setting it to false. And i have bind this saving property with the button using knockout disable binding.
But i feel that this approach is not good and it contains the following big drawbacks:
For this i have to add an extra property in each viewmodel.
I have to add multiple line of code like setting it to true and again set it to false.
The approach is not centralize, the code for this approach is scattered.
So i want to know is there any other better way to handle this, a plugin or some standard way ??
Edit
Just to clarify, my question has nothing to do with asp.net postback, the question is how i can handle efficiently the ajax, like block the save button, displaying the response message etc
??
This is generally what makes a viewmodel a viewmodel. In a pattern like MVC, your controller shouldn't really have any idea what your view looks like, what controls it has, or what it's state is, and your model only contains data for the view to model. In an MVVM pattern, as knockout is, your viewModel actually does have knowledge of the current states of controls on the view. This isn't to say your viewmodel should directly update the view, but it usually will contain properties that are bound to states of the view. Things like SaveButtonEnabled or IsSavingData or even things like StatusLabelColor are accepted in a viewmodel.
Perhaps use $.ajaxSetup(). You call this in your document ready function.
$.ajaxSetup({
beforeSend: function(jqXHR)
{
//this will be called before every
//ajax call in your program
//so perhaps, increment an observable viewmodel variable
//representing the number of outstanding requests
//if this variable is > 0 then disable
//your button
},
complete: function(jqXHR)
{
//this will be called after every
//call returns
//decrement your variable here
//if variable is zero, then enable button
}
});
I'd recommend you take a look at http://durandaljs.com/, a framework using Knockout and has some great data patterns, even if you don't use it directly.
I have a dijit Select widget and need to do something when the user clicks one of the dropdown items. Meaning I need access to the clicked item, to retrive some information, and call one of my own functions.
I've tested to attach an onChange on the select and I can get the text value selected fine. But I need the object and not the value. The object holds more values in a data-info-attribute.
Basically what I'm trying to achieve is to show one value in the list but send along more values to populate other fields when selected.
Background: This is a typeahead field populated thru AJAX by a server function. There IS a store attached but it's empty (as far as I can tell) so I've been unsuccessful trying with: .store.fetchItemByIdentity - always returns nothing.
ta.store.fetchItemByIdentity({
identity: ta.getValue(),
onItem: function(item, request){
console.log(item),
console.log(request)
}
})
I expect the log to show item- and request-object, but they're both undefined.
ta.getValue() get's the selected value as expected.
What's the best way to achieve this?
Have a look at my answer to onChange not sufficient to trigger query from Dojo Combobox and also to jsFiddle mentioned there. I added code specific for your needs there:
select.dropDown.on("itemClick", function(dijit, event) {
var node = dijit.domNode;
console.log(domAttr.get(node, "data-info-attribute"));
// or
console.log(node.dataset.infoAttribute);
});