Estoy teniendo un problema al trabajar con el componente dialog de Metro UI en un proyecto web. Utilizo este dialog para mostrar un formularío cargado mediante una solicitud AJAX. Pero, cuando intento abrir los elementos select, obtengo el siguiente error en la consola de JavaScript:
VM79 metro.min.js:1 Uncaught TypeError: Cannot read properties of undefined (reading '_toggle')
at Object._open (VM79 metro.min.js:1:302477)
at HTMLLabelElement.<anonymous> (VM79 metro.min.js:1:301774)
at HTMLLabelElement.func_event_click_45 (VM79 metro.min.js:1:49416)
Estoy utilizando la siguiente solicitud AJAX, para cargar el formulario:
function CheckIODetailAddDialog() {
$.ajax({
method: "POST",
url: window.$AddRecordCheckInOut,
success: function (result) {
var dialog = Metro.getPlugin('#CheckInOutAddDialog', 'dialog');
dialog.setContent(result);
setTimeout(function () { dialog.open(); }, 100);
}
});
}
La ejecución de la función anterior la realizo desde un botón en la vista CheckInOut.cshtml , en esta misma vista esta parte del dialog:
<div data-overlay="true" data-width="1500" data-default-action="false" data-close-button="true" data-overlay-click-close="true" id="CheckInOutAddDialog" name="CheckInOutAddDialog" class="dialog" data-role="dialog">
</div>
Visualmente el contenido se añade bien al dialog CheckInOutAddDialog
, pero al interactuar con los elementos select lanza el error en consola, al interactuar con los elementos DateFor
y TimeFor
no se presenta ningun error.
La forma en la que estoy construyendo los select es la siguiente:
<div class="cell-md-6">
<div class="row mb-2">
<div class="cell-md-6">
<div class="row">
<div class="container">
<label for="DateFor">Date for:</label>
<input type="text" class="selector active w-100 dotted-border" id="DateFor" name="DateFor" placeholder="Date" autocomplete="off" readonly data-input />
</div>
</div>
</div>
<div class="cell-md-6">
<div class="row">
<div class="container">
<label for="TimeFor">Time for:</label>
<input type="time" class="w-100" id="TimeFor" name="TimeFor">
</div>
</div>
</div>
</div>
<div class="row mb-2">
<div class="cell-md-6">
<select data-role="select" data-prepend="Type" data-validate="required not=-1" id="Type" name="IdType">
<option value="-1" class="d-none"></option>
@foreach (var optiontype in types)
{
<option value="@optiontype.IdType">@optiontype.DescriptionType</option>
}
</select>
</div>
<div class="cell-md-6">
<select data-role="select" data-prepend="Salary" data-validate="required not=-1" id="IdSalary" name="IdSalary">
<option value="-1" class="d-none"></option>
<option value="1">Sin Goce</option>
<option value="2">Con Goce</option>
</select>
</div>
</div>
<div class="row mb-2">
<div class="cell-md-12">
<select data-role="select" data-prepend="Motive" data-validate="required not=-1" id="IdMotive" name="IdMotive">
<option value="-1" class="d-none"></option>
@foreach (var optionmotive in motives)
{
<option value="@optionmotive.IdMotive">@optionmotive.DescriptionMotive</option>
}
</select>
</div>
</div>
</div>
He inspeccionado los select desde el navegador y me doy cuentan que si contienen datos:
<ul class="option-list" style="max-height: 200px;"><li data-text="" data-value="-1" class="d-none active"><a></a></li><li data-text="Ingresar a planta (Work income)" data-value="1"><a>Ingresar a planta (Work income)</a></li><li data-text="Cambio de turno (Shift Change)" data-value="2"><a>Cambio de turno (Shift Change)</a></li><li data-text="Retirarse de planta (Repair)" data-value="3"><a>Retirarse de planta (Repair)</a></li><li data-text="Salir de planta por tiempo fraccionado (Get out a fraction time)" data-value="6"><a>Salir de planta por tiempo fraccionado (Get out a fraction time)</a></li></ul>
Segun veo en la documentación de Metro UI,el uso de los elementos select y dialog están creados de forma correcta.
Lo que he echo para corregir el problema es:
Cargar el contenido utilizando .html(result) en lugar de .setContent(result).
Agregar un retraso en la apertura del diálogo con setTimeout.
Reinstanciar los selectores dentro del dialog después de cargar el contenido:
Metro.makePlugin($('#CheckInOutAddDialog select[data-role="select"]'), "select");
El error sucede con los tres elementos select.