Hello to all;
I am using modal in order to update a record. everything works fine but after modal close and hide the detail page where is the record that was updated stay grayout and I can’t do anything, also the notification that the record was updated stay there too. Any clue?
If I hit F12 the following error appear when I hit the button that open the update modal. The notification also says that has been updated fine but is not.
bootstrap.bundle.min.js:6
Uncaught TypeError: Illegal invocation
at Object.findOne (bootstrap.bundle.min.js:6)
at De._showElement (bootstrap.bundle.min.js:6)
at bootstrap.bundle.min.js:6
at b (bootstrap.bundle.min.js:6)
at bootstrap.bundle.min.js:6
at b (bootstrap.bundle.min.js:6)
at v (bootstrap.bundle.min.js:6)
at ke._emulateAnimation (bootstrap.bundle.min.js:6)
at ke.show (bootstrap.bundle.min.js:6)
at De._showBackdrop (bootstrap.bundle.min.js:6)
Hi. Can you please share the code used here?
Also, is it a SPA that you are building?
sure:
<!doctype html>
<base href="/alliancenetwork/asegurados/">
<script src="../dmxAppConnect/dmxAppConnect.js"></script>
<meta charset="UTF-8">
<title>Expedientes Asegurados</title>
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="../bootstrap/5/css/bootstrap.min.css" />
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><i><b>Expediente</b></i></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
</div>
Card ID
<input type="text" class="form-control" id="inp_CARDID" name="CARDID" dmx-bind:value="mostrardetalles.data.detallesaactualizar.CARDID" aria-describedby="inp_CARDID_help">
Relación
<input type="text" class="form-control" id="inp_RELATIONSHIP" name="RELATIONSHIP" dmx-bind:value="mostrardetalles.data.detallesaactualizar.RELATIONSHIP" aria-describedby="inp_RELATIONSHIP_help">
SS
<input type="text" class="form-control" id="inp_SS" name="SS" dmx-bind:value="mostrardetalles.data.detallesaactualizar.SS" aria-describedby="inp_SS_help">
DOB
<input class="form-control" id="inp_DOB" name="DOB" dmx-bind:value="mostrardetalles.data.detallesaactualizar.DOB" aria-describedby="inp_DOB_help" placeholder="Enter DOB">
Genero
<input type="text" class="form-control" id="inp_GENERO" name="GENERO" dmx-bind:value="mostrardetalles.data.detallesaactualizar.GENERO" aria-describedby="inp_GENERO_help">
Nombre
<input type="text" class="form-control" id="inp_NOMBRE" name="NOMBRE" dmx-bind:value="mostrardetalles.data.detallesaactualizar.NOMBRE" aria-describedby="inp_NOMBRE_help">
Inicial
<input type="text" class="form-control" id="inp_INICIAL" name="INICIAL" dmx-bind:value="mostrardetalles.data.detallesaactualizar.INICIAL" aria-describedby="inp_INICIAL_help">
Apellidos
<input type="text" class="form-control" id="inp_APELLIDOS" name="APELLIDOS" dmx-bind:value="mostrardetalles.data.detallesaactualizar.APELLIDOS" aria-describedby="inp_APELLIDOS_help">
Dirección
<input type="text" class="form-control" id="inp_DIRECCION1" name="DIRECCION1" dmx-bind:value="mostrardetalles.data.detallesaactualizar.DIRECCION1" aria-describedby="inp_DIRECCION1_help">
Dirección
<input type="text" class="form-control" id="inp_DIRECCION2" name="DIRECCION2" dmx-bind:value="mostrardetalles.data.detallesaactualizar.DIRECCION2" aria-describedby="inp_DIRECCION2_help">
Pueblo
<input type="text" class="form-control" id="inp_PUEBLO" name="PUEBLO" dmx-bind:value="mostrardetalles.data.detallesaactualizar.PUEBLO" aria-describedby="inp_PUEBLO_help">
Estado
<input type="text" class="form-control" id="inp_ESTADO" name="ESTADO" aria-describedby="input1_help" dmx-bind:value="mostrardetalles.data.detallesaactualizar.ESTADO">
Zipcode
<input type="text" class="form-control" id="inp_ZIPCODE" name="ZIPCODE" dmx-bind:value="mostrardetalles.data.detallesaactualizar.ZIPCODE" aria-describedby="inp_ZIPCODE_help">
Telefono
<input type="text" class="form-control" id="inp_TELEFONO" name="TELEFONO" dmx-bind:value="mostrardetalles.data.detallesaactualizar.TELEFONO" aria-describedby="inp_TELEFONO_help">
Telefono
<input type="text" class="form-control" id="inp_TELEFONO2" name="TELEFONO2" dmx-bind:value="mostrardetalles.data.detallesaactualizar.TELEFONO2" aria-describedby="inp_TELEFONO2_help">
<input type="text" class="form-control" id="inp_EMAIL" name="EMAIL" dmx-bind:value="mostrardetalles.data.detallesaactualizar.EMAIL" aria-describedby="inp_EMAIL_help">
Grupo
<input type="text" class="form-control" id="inp_GRUPO" name="GRUPO" dmx-bind:value="mostrardetalles.data.detallesaactualizar.GRUPO" aria-describedby="inp_GRUPO_help">
Nombre del grupo
<input type="text" class="form-control" id="inp_NOMBREGRUPO" name="NOMBREGRUPO" dmx-bind:value="mostrardetalles.data.detallesaactualizar.NOMBREGRUPO" aria-describedby="inp_NOMBREGRUPO_help">
Status
<input type="text" class="form-control" id="inp_STATUS" name="STATUS" dmx-bind:value="mostrardetalles.data.detallesaactualizar.STATUS" aria-describedby="inp_STATUS_help">
Cobra
<input type="text" class="form-control" id="inp_cobra" name="cobra" dmx-bind:value="mostrardetalles.data.detallesaactualizar.cobra" aria-describedby="inp_cobra_help">
<button type="submit" class="btn btn-primary" dmx-bind:value="mostrardetalles.data.detallesaactualizar.Save">Guardar</button>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
Dashboard
Expedientes
Actualizar
Comentar
Comentarios
Archivos
Utilización
Contabilidad
Información general
Pertenece al grupo: {{recibirinfo.data.nombregrupo}}
Numero de grupo: {{recibirinfo.data.grupo}}
Status: {{recibirinfo.data.status}}
Card ID: {{recibirinfo.data.cardid}}
Nombre: {{recibirinfo.data.nombre+' '+recibirinfo.data.inicial+' '+recibirinfo.data.apellidos+' / Relación: '+recibirinfo.data.relacion+' / DOB: '+recibirinfo.data.dob+' / Genero: '+recibirinfo.data.genero+' / SS: '+recibirinfo.data.ss+' / Cobra: '+recibirinfo.data.cobra}}
Información de contacto
Dirección: {{recibirinfo.data.direccion+' '+recibirinfo.data.direccion2}}
Ciudad: {{recibirinfo.data.pueblo+' '+recibirinfo.data.estado+' '+recibirinfo.data.zipcode}}
Telefono: {{recibirinfo.data.telefono+' / '+recibirinfo.data.telefono2+' / email: '+recibirinfo.data.email}}
<script src="../bootstrap/5/js/bootstrap.bundle.min.js"></script>
the problem is when I hit this button in order to open the update modal:
Actualizar
I don’t see the code for this button in the code shared above. Just need code for the button.
Hello, sorry for the late replay:
Actualizar
Actualizar
button id=“btn3” class=“btn btn-warning btn-lg text-center fw-bolder fst-italic” data-bs-toggle=“modal” data-bs-target="#actualizar" dmx-on:click=“actualizar.show();mostrardetalles.load({cardid: recibirinfo.data.cardid})”>Actualizar
I erase the < at the begin because was showing the code
Please check:
(Actualizar)
You don’t need the toggle property and an an on click event to show the modal just use one or the other. I suspect because it is triggering twice, there’s 2 background layers and only one is being removed on modal close.