I am using Knockout with jQueryUI's autocomplete (and Pixel Admin bootstrap template).
I have created the input and bound that to my data:
<input data-bind="autoComplete: userSearch, value: userSearch, optionsText: 'fullName', optionsValue: 'userID', autoCompleteOptions: { autoFocus: false, appendTo: '#user-panel' }"" >
userSearch is a ko.computed that returns the data-set (array of objects).
This works fine.
My question is, how do I use the value that is returned by the autocomplete to filter the original data-set by the userID of the data returned?
I'm not really sure why the value property needs to be set to the dataset, but if I don't do this, when I select an option it only returns the userID (because that is the options value set).
Related
This is my html
<select class="compare-tag1">
</select>
this is the array i want to be there as option values in the above select class:
optionVal = ["1","2","3"];
and this is how I am trying to do it with select2
$(".compare-tag1").select2({
val: tagValuesArray
});
Im getting no-error,but no values are shown in the dropdown. How can I get the values of the array as option values using select2?
It sounds like you might be looking for the data option, which will convert a an array of data objects (or single strings) into <option> tags.
$(".compare-tag1").select2({
data: tagValuesArray
});
I am using knockout.js to populate a dropdown:
<select data-bind="options: AvailableUsers, optionsText: 'DisplayName', value: SelectedUser, optionsCaption: '-- Select a User --'" data-val="true" data-val-required="You must select a user." id="SelectedUser" name="SelectedUser"></select>
<span class="field-validation-valid" data-valmsg-for="SelectedUser" data-valmsg-replace="true"></span>
and I am registering the validator to the form and having it called on the submithandler (I dont think this is related to the problem since the validation is executing):
$.validator.unobtrusive.parse("#UserProfileCreation");
$("#UserProfileCreation").data("validator").settings.submitHandler = mappedModel.save;
However when trying to submit the page, it always acts like the dropdown has no selected value. Even when I confirm via console that SelectedUser has a value. I have successfully done the same thing in other pages for textareas like so:
<textarea style="width: 100%; height: 50px; min-height: 30px;" name="GroupReply" id="GroupReply" data-bind="value: GroupReply" data-val="true" data-val-required="You must enter a reply."></textarea><br/><span class="field-validation-valid" data-valmsg-for="GroupReply" data-valmsg-replace="true"></span>
And that works fine. So I am not sure what I am missing for the dropdown, but whether I select an option or not, it keeps acting like it's blank and bringing up the validation error message. What am I missing?
I figured it out and it was quite simple due to my lack of understanding of how knockout handles dropdown's selected values.
My AvailableUsers in the KO View Model consisted of a list of KeyValueModels which were based off a C# MVC class (converted using the KO mapping plugin):
public class KeyValueModel{
public Guid Id {get; set;}
public string DisplayName {get; set;}
}
I simply needed to add optionsValue: 'Id' to the data-bind attribute of the dropdown. However it should be noted that this only works because I am passing a Guid as the SelectedUser property of the MVC View Model in the action parameter.
There have been times where I wanted to pass an entire javascript object that the dropdown selection represents to the MVC view model, in those cases this solution wouldn't work.
Note in console, if you do NOT have the optionsValue: 'Id' you select an option from the dropdown and type mappedModel.SelectedUser() you get:
Object {Id: "adb9ae2d-01c8-468d-96e6-06ec39039e29", DisplayName: "Johnson, John"}
Because knockout can store the whole selected object. HOWEVER, knockout does not set ANY value to the options in the dropdown in the actual HTML markup, they are all null (which is why the validation was failing).
If you do add optionsValue: 'Id' and type mappedModel.SelectedUser() into console, then you would simply get:
"adb9ae2d-01c8-468d-96e6-06ec39039e29"
Which for my purposes on this page is fine. As mentioned if you wanted to pass an entire object to the MVC action based on that selection, this setup would not work. You would probably have to do something like setup a hidden field and set it's value to the SelectedUser().Id and put the validation on that hidden field.
We know that in MVC, a CheckBoxFor will generate a checkbox with a value="true" and a hidden with a value=false. Both input controls will share the same name.
It is very reasonable because the form will be able to POST a false value if the box is unchecked. And the model binder will ignore the hidden input when the checkbox return a true.
But now i have overridden the form submit event in order to send the form data into a WebAPI controller in JSON format.
When serializing the form data, there is no mechanism to parse the relationship between the checkbox and the hidden correctly. Therefore, when unchecked, it returns a false, which is okay. But when checked, it returns a {true, false} instead of true, because the serializeArray() function goes through every input and find two values goes to a same name.
The question is: What is the best way to correct it?
My solution to this problem was to write my own HtmlHelper method that renders a single <input type="checkbox" /> tag. Any other solution just seemed too hacky.
You can use dotPeek or .NET Reflector to look at how the Microsoft Team created the HtmlHelper.CheckboxFor method if you need any help accomplishing that task.
The 2 tag approach was taken to prevent MVC action parameters from throwing an exception when a "bool" parameter did not have a matching parameter sent to the controller (an unchecked checkbox doesn't send any value).
Using jqGrid (4.4) with Grails (2.0.3).
I have a grid with checkbox columns. Data is local and not using Grails editUrl property to submit data. I'm submitting the entire page to the backend controller using a regular submit button.
Here's the rub ...
Say the grid contains 5 rows and the 5 checkboxes (indexes 0-4) have values of (true, false, true, true, false). What gets to the controller via the params map is an array of 3 checkbox values, all true with indexes 0, 1, 2. So, only the 'true' values are passed to the controller, but I have no idea which row they belong to.
Please advise. Thanks in advance.
Not specific to grails, this is just a common html/webdevelopment question.
Unchecked checkboxes aren't sent to the server when form is submitted.
And you dont have to keep the submitted value of a checkbox to true, you can use any custom value (the value attribute) and then on server you can identify which checkboxes where checked based on the values
See this thread as well
I am testing out the very awesome Knockoutjs. I am facing a peculiar problem.
I found a similar question: Binding initial/default value of dropdown (select) list, but it is not helping, as mine are cascading lists.
I make my initialModel as follows, using data from server.
var initialModel = #Html.Raw(JsonConvert.SerializeObject(Model)) ;
Then I define my viewModel as follows.
var viewModel = {
evaluationGroups :ko.observableArray(initialModel.EvaluationGroups),
SelectedEvaluationArea:ko.observable(initialModel.selectedEvaluationArea ? initialModel.selectedEvaluationArea.Id :null ),
SelectedEvaluationGroup :ko.observable(initialModel.selectedEvaluationGroup)
}
Now, I want cascading select lists. Hence my binding is as under.
<fieldset>
<legend>Evaluation Group and Area</legend>
<p>
<select id="EvaluationGroupId" name="EvaluationGroupId" data-bind='options: evaluationGroups, optionsText:"Title", value:SelectedEvaluationGroup, optionsCaption: "Select Group..."'></select>
</p>
<p>
<select id="EvaluationAreaId" name="EvaluationAreaId" data-bind='options: SelectedEvaluationGroup()? SelectedEvaluationGroup().EvaluationAreas:null, optionsValue: "Id", optionsText:"Title", value:SelectedEvaluationArea, optionsCaption: "Select Area..."'></select>
</p>
</fieldset>
The problem is, I am unable to extract the initial value from my server data. If I see, the value of viewModel.SelectedEvaluationGroup, when the page has just loaded, with default values, I see undefined. However, if I see initialModel.selectedEvaluationGroup, it is the full object, as expected. What am I doing wrong? Is this not the correct way to initialize Knockout's observables?
Maybe you have forgotten to run the applyBindings command?
i.e.
ko.applyBindings(viewModel);
Update
I have had a play with your jsfiddle. Seems it is happy to bind to initial values when it is manually set to ones from the main array.
http://jsfiddle.net/ZMvNM/5/