Skip to content

Commit

Permalink
Issue when used with multiple fields
Browse files Browse the repository at this point in the history 
When there are multiple fields of this field type, the AJAX is picking the last field’s attributes to process the data for all the fields. You would never see the issue if all the fields are set to use the same content types but you would see the problem only when different content types are set to each field. Always the last field’s content items are populated to all select fields in the page. 
It is because the for loop (which run through all selects in the page) finishes prior to the end of first AJAX call so the last select field is used in every AJAX call.
The fix is not to set the options array passed to select2() before AJAX and set it dynamically everytime the select2 is called.
  • Loading branch information
@fathimasmat
fathimasmat authored Jan 10, 2018
1 parent d05cf67 commit 4e47187
Showing 1 changed file with 66 additions and 74 deletions.
140 changes: 66 additions & 74 deletions web/ajax-multict-select-field.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,110 +2,102 @@
'use strict';

$.fn.extend({
customSelect2Sortable : function (options) {
var select = $(this);
customSelect2Sortable: function () {
var $select = $(this);

$(select).select2(options);

var ul = $(select).next('.select2-container').first('ul.select2-selection__rendered');
var ul = $select.next('.select2-container').first('ul.select2-selection__rendered');

ul.sortable({
items : 'li:not(.select2-search)',
tolerance : 'pointer',
items : 'li:not(.select2-search)',
tolerance: 'pointer',

stop : function () {
stop: function () {
$($(ul).find('.select2-selection__choice').get().reverse()).each(function () {
var id = $(this).data('data').id;
var option = select.find('option[value="' + id + '"]')[0];
var id = $(this).data('data').id;
var option = $(this).find('option[value="' + id + '"]')[0];

$(select).prepend(option);
$(this).prepend(option);
});
}
});

}
});

function modifySelect2 () {
var $buicSelects = $('.js-ajax-multi-ct-select');
var len = $buicSelects.length;
var options = {};
var len = $buicSelects.length;
var options = {};
var i;
var $buicSelect;
var $select;

for (i = 0; i < len; i++) {
$buicSelect = $($buicSelects[i]);
$select = $buicSelect.find('select');
options = $select.data('select2').options.options;

if (options.ajax === undefined || options.ajax === null) {
options = {
language : {
errorLoading : function () {
return 'Searching...'
}
},
placeholder : options.placeholder,
allowClear : options.allowClear || true,
minimumResultsForSearch : options.minimumResultsForSearch,
width : options.width,
ajax : {
select : $select,
url : function (params) {
var page = params.page || 1;

return '/bolt/ajax-multi-ct-select?page=' + page;
},
dataType : 'json',
delay : 500,
type : 'POST',
data : function (params) {
var $container = $select.closest('.js-ajax-multi-ct-select-container');

return {
q : params.term, // search term
page : params.page || 1,
field : $container.data('field')
};
},
processResults : function (data, params) {
// parse the results into the format expected by Select2
// since we are using custom formatting functions we do not need to
// alter the remote JSON data, except to indicate that infinite
// scrolling can be used
params.page = params.page || 1;

return {
results : data.results,
pagination : {
more : (data.pager.current * data.pager.limit) < data.pager.count
}
};
},
cache : true
$select = $buicSelect.find('select');
options = $select.data('select2').options.options;

$select.select2({
language : {
errorLoading: function () {
return 'Searching...';
}
};

if ($buicSelect.hasClass('js-ajax-multi-ct-select--sortable')) {
$select.select2('destroy');

options.createTag = function (params) {
return undefined;
};
$select.customSelect2Sortable(options);
} else {
$select.select2('destroy');
$select.select2(options);
},
placeholder : options.placeholder,
allowClear : options.allowClear || true,
minimumResultsForSearch: options.minimumResultsForSearch,
width : options.width,
ajax : {
select : $select,
url : function (params) {
var page = params.page || 1;

return '/bolt/ajax-multi-ct-select?page=' + page;
},
dataType : 'json',
delay : 500,
type : 'POST',
data : function (params) {
$select = $(this);
var $container = $select.closest('.js-ajax-multi-ct-select-container');
return {
q : params.term, // search term
page : params.page || 1,
field: $container.data('field')
};
},
processResults: function (data, params) {
// parse the results into the format expected by Select2
// since we are using custom formatting functions we do not need to
// alter the remote JSON data, except to indicate that infinite
// scrolling can be used
params.page = params.page || 1;

return {
results : data.results,
pagination: {
more: (data.pager.current * data.pager.limit) < data.pager.count
}
};
},
cache : false
}
});

$buicSelect.find('.select2-selection__placeholder').html('(none)');
if ($buicSelect.hasClass('js-ajax-multi-ct-select--sortable')) {
$select.customSelect2Sortable();
}

$buicSelect.find('.select2-selection__placeholder').html('(none)');

}

}

$('.repeater-add').on('click', function () {
modifySelect2();
});

$(window).on('load', modifySelect2);

}(jQuery));

0 comments on commit 4e47187

Please sign in to comment.