Backbone Forms Update Select Box Values - javascript

( i am using the backbone forms extension to create my forms: https://github.com/powmedia/backbone-forms)
I have two select boxes and when the first is changed it should change the values of the second. I have got the filtering sorted and have an array of objects that need to be used as the new values for the second select box, i have placed these in a new collection.
After ready the documentation i assumed i could do this:
var newProducts = new App.Collections.Products(correct);
form.setValue({ ProductUsed : newProducts});
Where correct is an array of objects, however my select box just goes blank and allows me to select the other options when focused.
Any advice would be great?
Cheers,
Tom

evilcelery shared this fiddle: jsfiddle.net/evilcelery/c5QHr
This resolves the issue i had.

Related

Selecting one object and printing it's attributes AngularJS

I am using angular-auto-complete for an Airports list.
Basically is a list of objects each with the following attributes: name, city, iata, etc. I have two identical "dropdowns", one for Arrival airport, one for Departure.
Inside my controller I can get the attributes of "this" model but I don't know how to store it to be able to output it later.
As it is now the binding is just echoing the text value of the input model, obviously.
Here the code:
https://jsfiddle.net/udkys1eo/8/
From the controller I can do
$scope.arrivalAirport = selectedObject.
But that doesn't make sense since the event is triggered for both auto-complete fields.
Ideally I want to achieve:
thisModel = selectedObject;
{{thisModel.name}}
{{thisModel.city}}
But I don't know how, I have googled and tried for hours.
Thanks, I am new in Angular.

AngularJS Select List doesnt match selected Item

I have a global controller in my AngularJS application which provides me with a array containing Attendee objects. Want i want is to modify my CourseRegistration Model which contains one specific attendee object. In the edit window I d like to get a dropdown with all possible attendees whereas there should be the current attendee selected.
I have the following code in my html:
<select ng-model="courseRegistration.attendee" ng-options="attendeeSelectItem.name for attendeeSelectItem in attendeeSelectItems"></select>
If I print out courseRegistration.attendee with JSON.stringify and do the same with the corresponding option they print out the same object (same id, same name etc.). But if I do something like (courseRegistration.attendee == attendeeSelectItem) for the two identical objects, then I get false.
So my question is how can I make sure that the currently selected item (stored in courseRegistration.attendee) gets matched with the corresponding object in my list (which is used by options) ?
Thanks a lot in advance.
JSFiddle: http://jsfiddle.net/2ddCy/
Greets
Marc
Essentially when you use an array of objects to populate a select, it selects the entire object, not just the one item you're seeing in the select list.
See this question for detail and example code: Problems when using ng-options and ng-switch together
I'm assuming that you've got something like the following in your controller?
$scope.courseRegistration = {attendee: {id: 2, name: "A Person"}}
If so, the reason the comparison fails is that although the object may have the same properties as the one currently selected, it refers to a different object in memory and therefore isn't classed as equal.
Now as a quick hack you could stringify them and then compare, however the correct approach would be either to set the current value by key:
$scope.courseRegistration = {attendee: attendeeSelectItems[1]};
Or just store the id/name and set your ng-options condition to bind to just that value:
$scope.courseRegistration = {attendee: 1};
<select ng-model="courseRegistration.attendee" ng-options="attendeeSelectItem.id as attendeeSelectItem.name for attendeeSelectItem in attendeeSelectItems"></select>

Populating a drop down based on a text field Javascript/Coldfusion 8

I have a page that has around 30 different entry fields, one of the top fields is a textfield and after this is filled in, I want to populate a dropdown and a textfield. I currently have it calling a javascript function, however my main problem is that I need to query the database to find out what value to populate the fields with.
Here is the type of thing I was trying to do:
function populateState(){
<cfquery name="getState" datasource="#application.dsn#">
SELECT STATE_CODE, CODE_ID
FROM LERG_LATA_V1 LEFT OUTER JOIN Code ON STATE_CODE = CHAR1_TX
WHERE NPX = #NPANXX#
</cfquery>
}
And then after that I would need to read the result and select that element. Any suggestions on how to do this? Most of what I am finding on my google searches are saying you cannot mix cf and js since they execute at different times.
You need to either create a state JavaScript array with your query, and then reference that in your javascript, or use the built-in cfselect tag binding to make this happen. Here's a simple example of how I do this:
http://www.dansshorts.com/post/cfselect-binding-and-selectedvalues
Dan

ObservableArray child observable change monitoring

Consider this jsfiddle.
I can't think of a way to ensure that if row one in the above example has already been selected in the dropdown that the next row would be prevented from selecting the same value.
I think that my problem here is that when the dropdown click event fires, the subscriber does not monitor this change when the child value has changed. Anyone able to assist?
viewModel.actualMetrics.subscribe(function(newValue) {
if (newValue) {
$.each(viewModel.actualMetrics(), function(n, item) {
if (item.MetricTypeId() == newValue.MetricTypeId)
alert("already selected this Metric");
});
}
Here is a basic sample of one way to do what you want: http://jsfiddle.net/rniemeyer/3cpUp/
Here is your sample with it: http://jsfiddle.net/rniemeyer/8bQmq/
The basic idea is that you have your list of choices, then you create a dependentObservable that is an index of the currently used choices. This saves some looping through the current choices when building each rows options. This index could be an object or an array. I used an object, but you could use an array as well with the id as the index.
Then, on each item, you could have a dependentObservable to store the filtered choices for that item. However, I used a function instead, because it does not seem like a property that is really important to the view model and bindings are implemented using dependentObservables, so you get the same effect without having the choices show up when you send it toJSON. The function loops through all of the choices and includes only the choices that do not appear on another line by checking its own value and the index.

How to select a specific record from the store in a ComboBox (ExtJS)

I have a ComboBox with a remote json store.
It lets the user type in 3+ characters, then queries, displays list and lets user select one option. When the user selects an option, it uses the Ext.data.Record associated to the selected option to populate other fields elsewhere in the form. This works correctly.
Now I want to be able to pre-populate the said fields, by using the functions that I've already written as part of the combo box. What I have come up with, is to add an "artificial record" to the ComboBox's store, and then force its selection - which would trigger all the right functions and populate the other fields etc..
What I have is this function inside of the ComboBox (I've created a custom one by extending ComboBox):
loadRecord : function( record ){
var data = {
"results":1,
"rows":[
record
]
}
this.store.loadData( data ); // I realize I could just use store.add() instead.
alert( this.store.getCount() ); // returns 1, so the record is in
// Here is where I'd need to make a call to select this record.
}
I've tried this.select() and this.selectByValue() but to no avail. Knowing the record is in the store, what is the right way to select it from code?
Thank you in advance.
did you try combo.fireEvent('click', combo, record, index) ?
How about this:
record = this.store.getAt(1);

Categories