We have added a Select2 to a modal popup menu which does not allow the user to type or select any options. Almost as if the Z-index is lower than that of the overlay. We resolved the problem by setting the tab index to -1 on the modal, but this disables the ability to close the modal with the escape key.
Here it the relevant code, any ideas on how to keep the escape key functionality?
--------------------------ModalManager.js---------------------------------
function _createContainer(modalId) {
_removeContainer(modalId);
var _containerId = modalId + 'Container';
return $('<div id="' + _containerId + '"></div>')
.append(
'<div id="' + modalId + '" class="modal fade" tabindex="-1" role="modal" aria-hidden="true">' +
' <div class="modal-dialog modal-lg">' +
' <div class="modal-content"></div>' +
' </div>' +
'</div>'
).appendTo('body');
}
-----------------------_LocationSelectionModal.cshtml---------------------------
<div class="form-group m-form__group row">
<label for="LocationSelect" class="col-lg-12">@L("SelectLocation")</label>
<div class="col-lg-12">
<select id="LocationSelect" class="form-control m-select2" style="width:100%;"></select>
</div>
</div>
<input class="form-control" value="" type="text" name="locationId" required hidden />
-----------------------_LocationSelectionModal.js-----------------------------
(function ($) {
app.modals.LocationSelectionModal = function () {
var _ticketsService = abp.services.app.tickets;
var _modalManager;
var _$ticketInformationForm = null;
var _LocationLookupModal = new app.ModalManager({
viewUrl: abp.appPath + 'Crm/Devices/LocationLookupTableModal',
scriptUrl: abp.appPath + 'view-resources/Areas/Crm/Views/Devices/_LocationLookupTableModal.js',
modalClass: 'LocationLookupModal'
});
var _serialNumberLookupModal = new app.ModalManager({
viewUrl: abp.appPath + 'Crm/Devices/SerialNumberLookupModal',
scriptUrl: abp.appPath + 'view-resources/Areas/Crm/Views/Devices/_SerialNumberLookupModal.js',
modalClass: 'SerialNumberLookupModal'
});
this.init = function (modalManager) {
_modalManager = modalManager;
var modal = _modalManager.getModal();
_$ticketInformationForm = _modalManager.getModal().find('form[name=TicketInformationsForm]');
_$ticketInformationForm.validate();
};
$('#OpenLocationLookupButton').click(function () {
var ticket = _$ticketInformationForm.serializeFormToObject();
_LocationLookupModal.open({ id: ticket.locationId, displayName: ticket.locationName }, function (data) {
_$ticketInformationForm.find('input[name=locationName]').val(data.device.locationName);
_$ticketInformationForm.find('input[name=locationId]').val(data.device.locationId);
});
});
$('#ClearLocationNameButton').click(function () {
_$ticketInformationForm.find('input[name=locationName]').val('');
_$ticketInformationForm.find('input[name=locationId]').val('');
});
$('#OpenSerialNumberLookupButton').click(function () {
var ticket = _$ticketInformationForm.serializeFormToObject();
_serialNumberLookupModal.open({ id: ticket.serialNumberId, displayName: ticket.serialNumberName }, function (data) {
_$ticketInformationForm.find('input[name=serialNumberName]').val(data.device.serialNumber);
_$ticketInformationForm.find('input[name=serialNumberId]').val(data.device.id);
});
});
$('#ClearSerialNumberNameButton').click(function () {
_$ticketInformationForm.find('input[name=serialNumberName]').val('');
_$ticketInformationForm.find('input[name=serialNumberId]').val('');
});
this.save = function () {
if (!_$ticketInformationForm.valid()) {
return;
}
var ticket = _$ticketInformationForm.serializeFormToObject();
};
};
//
// select2 initialize
//
$(".m-select2").select2({
placeholder: 'Jason',
ajax: {
url: abp.appPath + "api/services/app/Tickets/GetAllLocationsForLookupTable",
dataType: 'json',
delay: 250,
data: function (params) {
return {
searchTerm: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
params.page = params.page || 1;
return {
results: $.map(data.result, function (item) {
return {
text: item.name,
id: item.value
}
}),
pagination: {
more: (params.page * 30) < data.result.length
}
};
},
cache: true
},
minimumInputLength: 1,
language: abp.localization.currentCulture.name
});
})(jQuery);
When I try it says that I don't have permission.
I got the app up and running. Started up, it was working fine. I checked in the code, and when another developer started the app (database is created and tables exist) he gets the following error:
There is no tenant with given id: 1 Abp.MultiTenancy.TenantCache<TTenant, TUser>.Get(int tenantId) in TenantCache.cs, line 35
I don't remember doing anything specific when I first started the app. When I look in my database, I have a record in AbpTenant, when he looks in his, there is no record. Any ideas?
Thanks,
Matt