deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-05-21 06:56:34 +02:00
Code Issues Projects Releases Wiki Activity

Resolve ajax choices not showing

Browse source
This commit is contained in:
Josh Johnson 2016-06-28 14:27:25 +01:00
parent c1278e8f0d
commit a862e4a00a
3 changed files with 40 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
assets/scripts/dist/choices.min.js vendored
View file

File diff suppressed because one or more lines are too long

66
assets/scripts/src/choices.js
View file

@ -417,27 +417,31 @@ export class Choices {
* @public * @public
*/ */
ajax(fn) { ajax(fn) {
this.containerOuter.classList.add('is-loading'); if(this.passedElement.type === 'select-one' || this.passedElement.type === 'select-multiple') {
// this.input.placeholder = this.options.loadingText; this.containerOuter.classList.add('is-loading');
// this.input.placeholder = this.options.loadingText;
const placeholderItem = this._getTemplate('item', { id: -1, value: 'Loading', label: this.options.loadingText, active: true}); const placeholderItem = this._getTemplate('item', { id: -1, value: 'Loading', label: this.options.loadingText, active: true});
this.itemList.appendChild(placeholderItem); this.itemList.appendChild(placeholderItem);
const callback = (results, value, label) => { const callback = (results, value, label) => {
if(results && results.length) { if(results && results.length) {
this.containerOuter.classList.remove('is-loading'); this.containerOuter.classList.remove('is-loading');
this.input.placeholder = ""; this.input.placeholder = "";
results.forEach((result, index) => { results.forEach((result, index) => {
// Add each result to option dropdown // Select first choice in list if single select input
if(index === 0) { if(index === 0 && this.passedElement.type === 'select-one') {
this._addItem(result[value], result[label], index); this._addChoice(true, false, result[value], result[label]);
} } else {
this._addChoice(false, false, result[value], result[label]); this._addChoice(false, false, result[value], result[label]);
}); }
} });
}; }
};
fn(callback);
}
fn(callback);
return this; return this;
} }
@ -1296,7 +1300,7 @@ export class Choices {
groupFragment.appendChild(dropdownGroup); groupFragment.appendChild(dropdownGroup);
this.renderOptions(groupOptions, groupFragment); this.renderChoices(groupOptions, groupFragment);
} }
}); });
@ -1305,26 +1309,26 @@ export class Choices {
/** /**
* Render options into a DOM fragment and append to options list * Render options into a DOM fragment and append to options list
* @param {Array} options Options to add to list * @param {Array} choices Options to add to list
* @param {DocumentFragment} fragment Fragment to add options to (optional) * @param {DocumentFragment} fragment Fragment to add options to (optional)
* @return {DocumentFragment} Populated options fragment * @return {DocumentFragment} Populated options fragment
* @private * @private
*/ */
renderOptions(options, fragment) { renderChoices(choices, fragment) {
// Create a fragment to store our list items (so we don't have to update the DOM for each item) // Create a fragment to store our list items (so we don't have to update the DOM for each item)
const optsFragment = fragment || document.createDocumentFragment(); const choicesFragment = fragment || document.createDocumentFragment();
options.forEach((option, i) => { choices.forEach((choice, i) => {
const dropdownItem = this._getTemplate('option', option); const dropdownItem = this._getTemplate('option', choice);
if(this.passedElement.type === 'select-one') { if(this.passedElement.type === 'select-one') {
optsFragment.appendChild(dropdownItem); choicesFragment.appendChild(dropdownItem);
} else if(!option.selected) { } else if(!choice.selected) {
optsFragment.appendChild(dropdownItem); choicesFragment.appendChild(dropdownItem);
} }
}); });
return optsFragment; return choicesFragment;
} }
/** /**
@ -1380,11 +1384,11 @@ export class Choices {
render() { render() {
this.currentState = this.store.getState(); this.currentState = this.store.getState();
// Only render if our state has actually changed // Only render if our state has actually changed
if(this.currentState !== this.prevState) { if(this.currentState !== this.prevState) {
// Options // Options
if((this.currentState.options !== this.prevState.options || this.currentState.groups !== this.prevState.groups)) { if((this.currentState.choices !== this.prevState.choices || this.currentState.groups !== this.prevState.groups)) {
if(this.passedElement.type === 'select-multiple' || this.passedElement.type === 'select-one') { if(this.passedElement.type === 'select-multiple' || this.passedElement.type === 'select-one') {
// Get active groups/options // Get active groups/options
const activeGroups = this.store.getGroupsFilteredByActive(); const activeGroups = this.store.getGroupsFilteredByActive();
@ -1399,7 +1403,7 @@ export class Choices {
if(activeGroups.length >= 1 && this.isSearching !== true) { if(activeGroups.length >= 1 && this.isSearching !== true) {
choiceListFragment = this.renderGroups(activeGroups, activeChoices, choiceListFragment); choiceListFragment = this.renderGroups(activeGroups, activeChoices, choiceListFragment);
} else if(activeChoices.length >= 1) { } else if(activeChoices.length >= 1) {
choiceListFragment = this.renderOptions(activeChoices, choiceListFragment); choiceListFragment = this.renderChoices(activeChoices, choiceListFragment);
} }
if(choiceListFragment.children.length) { if(choiceListFragment.children.length) {

5
assets/scripts/src/store/index.js
View file

@ -89,6 +89,7 @@ export class Store {
*/ */
getChoicesFilteredByActive() { getChoicesFilteredByActive() {
const choices = this.getChoices(); const choices = this.getChoices();
const values = choices.filter((choice) => { const values = choices.filter((choice) => {
return choice.active === true; return choice.active === true;
},[]); },[]);
@ -128,8 +129,8 @@ export class Store {
const values = groups.filter((group) => { const values = groups.filter((group) => {
const isActive = group.active === true && group.disabled === false; const isActive = group.active === true && group.disabled === false;
const hasActiveOptions = choices.some((option) => { const hasActiveOptions = choices.some((choice) => {
return option.active === true && option.disabled === false; return choice.active === true && choice.disabled === false;
}); });
return isActive && hasActiveOptions ? true : false; return isActive && hasActiveOptions ? true : false;
},[]); },[]);