mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-16 12:45:10 +02:00
Resolve ajax choices not showing
This commit is contained in:
parent
c1278e8f0d
commit
a862e4a00a
4
assets/scripts/dist/choices.min.js
vendored
4
assets/scripts/dist/choices.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -417,6 +417,7 @@ export class Choices {
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
ajax(fn) {
|
ajax(fn) {
|
||||||
|
if(this.passedElement.type === 'select-one' || this.passedElement.type === 'select-multiple') {
|
||||||
this.containerOuter.classList.add('is-loading');
|
this.containerOuter.classList.add('is-loading');
|
||||||
// this.input.placeholder = this.options.loadingText;
|
// this.input.placeholder = this.options.loadingText;
|
||||||
|
|
||||||
|
@ -428,16 +429,19 @@ export class Choices {
|
||||||
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) {
|
||||||
|
|
|
@ -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;
|
||||||
},[]);
|
},[]);
|
||||||
|
|
Loading…
Reference in a new issue