0

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.

Metro.makePlugin($('#CheckInOutAddDialog select[data-role="select"]'), "select");

1 respuesta 1

1

El problema era el tipo de vista que retornaba el metodo del controlador:

Antes:

public ActionResult AddCheckInOut()
{
    try
    {
        return View("~/Areas/YMMHRSystem/Views/EntryExitAuthorization/CheckInOutAddDialog.cshtml");
    }
    catch (Exception ex)
    {
        throw ex;
    }
}

Ahora:

return PartialView("~/Areas/YMMHRSystem/Views/EntryExitAuthorization/CheckInOutAddDialog.cshtml");

El método CheckIODetailAddDialog() estaba intentando renderizar toda la estructura de la página principal, incluyendo el menú y otros elementos de la vista completa y eso proviocaba que el DOM perdiera estructura.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.