Mixing
Chosen field not populating with predefined selectedOptions
I'm having difficulty getting a chosen multi-select field to populate when setting the selected options and then updating the field.
In my application I'm using knockout.js to bind observables/observableArrays to my fields and in the chosen field the options are a list of objects. Based on the options selected in this field, I want to populate a separate drop down with the objects previously selected.
Everything works fine when I'm starting without any pre-selected options, however when I populate the selected options knockout observableArray using JavaScript and then call the chosen update command, the chosen field remains empty but the separate drop down is successfully updated.
Html:
<label>User(s):</label>
<select class="chosen form-control" multiple data-bind="options: userOptions, selectedOptions: selectedUsers,
optionsText: function (user){ return user.name}"></select>
<label>Primary User:</label>
<select class="form-control" data-bind="options: selectedUsers, optionsText: 'name', value: primaryUser></select>
Knockout Variables:
vs.userOptions: ko.observableArray();
vs.selectedUsers: ko.observableArray();
vs.primaryUser: ko.observable();
userOptions/selectedUsers Object:
{
id: -1,
email: "",
name: ""
}
JavaScript:
vs.selectedUsers.removeAll();
$.ajax({
url: url,
type: "GET",
success: function (data) {
for (var i = 0; i < data.length; i++) {
var object = {
id: data[i].id,
email: data[i].email,
name: data[i].name
};
vs.selectedUsers.push(object);
if (data[i].primaryUser) {
vs.primaryUser(object);
}
}
$(".chosen").trigger("chosen:updated");
},
error: function (xhr, status, error) {
//Handle error...
}
});
**Note: data from Ajax GET call returns an array of objects containing pkey, id, email, name, and primaryUser, where primaryUser is a boolean value identifying whether or not they were the primaryUser selected
jquery html knockout.js jquery-chosen
asked Dec 21 '18 at 18:39
Life761Life761
112
add a comment |
I'm having difficulty getting a chosen multi-select field to populate when setting the selected options and then updating the field.
In my application I'm using knockout.js to bind observables/observableArrays to my fields and in the chosen field the options are a list of objects. Based on the options selected in this field, I want to populate a separate drop down with the objects previously selected.
Everything works fine when I'm starting without any pre-selected options, however when I populate the selected options knockout observableArray using JavaScript and then call the chosen update command, the chosen field remains empty but the separate drop down is successfully updated.
Html:
<label>User(s):</label>
<select class="chosen form-control" multiple data-bind="options: userOptions, selectedOptions: selectedUsers,
optionsText: function (user){ return user.name}"></select>
<label>Primary User:</label>
<select class="form-control" data-bind="options: selectedUsers, optionsText: 'name', value: primaryUser></select>
Knockout Variables:
vs.userOptions: ko.observableArray();
vs.selectedUsers: ko.observableArray();
vs.primaryUser: ko.observable();
userOptions/selectedUsers Object:
{
id: -1,
email: "",
name: ""
}
JavaScript:
vs.selectedUsers.removeAll();
$.ajax({
url: url,
type: "GET",
success: function (data) {
for (var i = 0; i < data.length; i++) {
var object = {
id: data[i].id,
email: data[i].email,
name: data[i].name
};
vs.selectedUsers.push(object);
if (data[i].primaryUser) {
vs.primaryUser(object);
}
}
$(".chosen").trigger("chosen:updated");
},
error: function (xhr, status, error) {
//Handle error...
}
});
**Note: data from Ajax GET call returns an array of objects containing pkey, id, email, name, and primaryUser, where primaryUser is a boolean value identifying whether or not they were the primaryUser selected
jquery html knockout.js jquery-chosen
asked Dec 21 '18 at 18:39
Life761Life761
112
add a comment |
I'm having difficulty getting a chosen multi-select field to populate when setting the selected options and then updating the field.
In my application I'm using knockout.js to bind observables/observableArrays to my fields and in the chosen field the options are a list of objects. Based on the options selected in this field, I want to populate a separate drop down with the objects previously selected.
Everything works fine when I'm starting without any pre-selected options, however when I populate the selected options knockout observableArray using JavaScript and then call the chosen update command, the chosen field remains empty but the separate drop down is successfully updated.
Html:
<label>User(s):</label>
<select class="chosen form-control" multiple data-bind="options: userOptions, selectedOptions: selectedUsers,
optionsText: function (user){ return user.name}"></select>
<label>Primary User:</label>
<select class="form-control" data-bind="options: selectedUsers, optionsText: 'name', value: primaryUser></select>
Knockout Variables:
vs.userOptions: ko.observableArray();
vs.selectedUsers: ko.observableArray();
vs.primaryUser: ko.observable();
userOptions/selectedUsers Object:
{
id: -1,
email: "",
name: ""
}
JavaScript:
vs.selectedUsers.removeAll();
$.ajax({
url: url,
type: "GET",
success: function (data) {
for (var i = 0; i < data.length; i++) {
var object = {
id: data[i].id,
email: data[i].email,
name: data[i].name
};
vs.selectedUsers.push(object);
if (data[i].primaryUser) {
vs.primaryUser(object);
}
}
$(".chosen").trigger("chosen:updated");
},
error: function (xhr, status, error) {
//Handle error...
}
});
**Note: data from Ajax GET call returns an array of objects containing pkey, id, email, name, and primaryUser, where primaryUser is a boolean value identifying whether or not they were the primaryUser selected
jquery html knockout.js jquery-chosen
asked Dec 21 '18 at 18:39
Life761Life761
112
I'm having difficulty getting a chosen multi-select field to populate when setting the selected options and then updating the field.
In my application I'm using knockout.js to bind observables/observableArrays to my fields and in the chosen field the options are a list of objects. Based on the options selected in this field, I want to populate a separate drop down with the objects previously selected.
Everything works fine when I'm starting without any pre-selected options, however when I populate the selected options knockout observableArray using JavaScript and then call the chosen update command, the chosen field remains empty but the separate drop down is successfully updated.
Html:
<label>User(s):</label>
<select class="chosen form-control" multiple data-bind="options: userOptions, selectedOptions: selectedUsers,
optionsText: function (user){ return user.name}"></select>
<label>Primary User:</label>
<select class="form-control" data-bind="options: selectedUsers, optionsText: 'name', value: primaryUser></select>
Knockout Variables:
vs.userOptions: ko.observableArray();
vs.selectedUsers: ko.observableArray();
vs.primaryUser: ko.observable();
userOptions/selectedUsers Object:
{
id: -1,
email: "",
name: ""
}
JavaScript:
vs.selectedUsers.removeAll();
$.ajax({
url: url,
type: "GET",
success: function (data) {
for (var i = 0; i < data.length; i++) {
var object = {
id: data[i].id,
email: data[i].email,
name: data[i].name
};
vs.selectedUsers.push(object);
if (data[i].primaryUser) {
vs.primaryUser(object);
}
}
$(".chosen").trigger("chosen:updated");
},
error: function (xhr, status, error) {
//Handle error...
}
});
**Note: data from Ajax GET call returns an array of objects containing pkey, id, email, name, and primaryUser, where primaryUser is a boolean value identifying whether or not they were the primaryUser selected
jquery html knockout.js jquery-chosen
jquery html knockout.js jquery-chosen
asked Dec 21 '18 at 18:39
Life761Life761
112
asked Dec 21 '18 at 18:39
Life761Life761
112
asked Dec 21 '18 at 18:39
Life761Life761
112
asked Dec 21 '18 at 18:39
Life761Life761
112
asked Dec 21 '18 at 18:39
Life761Life761
112
112
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Update: came back to the problem and found a fix that worked. I had to adjust the code within the ajax success function:
vs.selectedUsers.removeAll();
$.ajax({
url: url,
type: "GET",
success: function (data) {
for (var i = 0; i < data.length; i++) {
for (var j = 0; j < vs.userOptions().length; j++) {
if (vs.userOptions()[j].id === data[i].id) {
vs.selectedUsers.push(vs.userOptions()[j]);
if (data[i].primaryUser) {
vs.primaryUser(vs.userOptions()[j]);
}
break;
}
}
}
$(".chosen").trigger("chosen:updated");
},
error: function (xhr, status, error) {
//Handle error...
}
});
answered Jan 2 at 22:22
Life761Life761
112
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53889417%2fchosen-field-not-populating-with-predefined-selectedoptions%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Update: came back to the problem and found a fix that worked. I had to adjust the code within the ajax success function:
vs.selectedUsers.removeAll();
$.ajax({
url: url,
type: "GET",
success: function (data) {
for (var i = 0; i < data.length; i++) {
for (var j = 0; j < vs.userOptions().length; j++) {
if (vs.userOptions()[j].id === data[i].id) {
vs.selectedUsers.push(vs.userOptions()[j]);
if (data[i].primaryUser) {
vs.primaryUser(vs.userOptions()[j]);
}
break;
}
}
}
$(".chosen").trigger("chosen:updated");
},
error: function (xhr, status, error) {
//Handle error...
}
});
answered Jan 2 at 22:22
Life761Life761
112
add a comment |
Update: came back to the problem and found a fix that worked. I had to adjust the code within the ajax success function:
vs.selectedUsers.removeAll();
$.ajax({
url: url,
type: "GET",
success: function (data) {
for (var i = 0; i < data.length; i++) {
for (var j = 0; j < vs.userOptions().length; j++) {
if (vs.userOptions()[j].id === data[i].id) {
vs.selectedUsers.push(vs.userOptions()[j]);
if (data[i].primaryUser) {
vs.primaryUser(vs.userOptions()[j]);
}
break;
}
}
}
$(".chosen").trigger("chosen:updated");
},
error: function (xhr, status, error) {
//Handle error...
}
});
answered Jan 2 at 22:22
Life761Life761
112
add a comment |
Update: came back to the problem and found a fix that worked. I had to adjust the code within the ajax success function:
vs.selectedUsers.removeAll();
$.ajax({
url: url,
type: "GET",
success: function (data) {
for (var i = 0; i < data.length; i++) {
for (var j = 0; j < vs.userOptions().length; j++) {
if (vs.userOptions()[j].id === data[i].id) {
vs.selectedUsers.push(vs.userOptions()[j]);
if (data[i].primaryUser) {
vs.primaryUser(vs.userOptions()[j]);
}
break;
}
}
}
$(".chosen").trigger("chosen:updated");
},
error: function (xhr, status, error) {
//Handle error...
}
});
answered Jan 2 at 22:22
Life761Life761
112
Update: came back to the problem and found a fix that worked. I had to adjust the code within the ajax success function:
vs.selectedUsers.removeAll();
$.ajax({
url: url,
type: "GET",
success: function (data) {
for (var i = 0; i < data.length; i++) {
for (var j = 0; j < vs.userOptions().length; j++) {
if (vs.userOptions()[j].id === data[i].id) {
vs.selectedUsers.push(vs.userOptions()[j]);
if (data[i].primaryUser) {
vs.primaryUser(vs.userOptions()[j]);
}
break;
}
}
}
$(".chosen").trigger("chosen:updated");
},
error: function (xhr, status, error) {
//Handle error...
}
});
answered Jan 2 at 22:22
Life761Life761
112
answered Jan 2 at 22:22
Life761Life761
112
answered Jan 2 at 22:22
Life761Life761
112
answered Jan 2 at 22:22
Life761Life761
112
112
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53889417%2fchosen-field-not-populating-with-predefined-selectedoptions%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
