Reload after update in modal

alexpr25 · October 4, 2021, 7:53pm

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?

alexpr25 · October 4, 2021, 8:51pm

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)

sid · October 5, 2021, 8:10am

Hi. Can you please share the code used here?
Also, is it a SPA that you are building?

alexpr25 · October 5, 2021, 11:46am

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">

Email

<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>

alexpr25 · October 5, 2021, 11:47am

the problem is when I hit this button in order to open the update modal:
Actualizar

sid · October 6, 2021, 10:55am

I don’t see the code for this button in the code shared above. Just need code for the button.

alexpr25 · October 7, 2021, 4:48pm

Hello, sorry for the late replay:
Actualizar

alexpr25 · October 7, 2021, 4:49pm

Actualizar

alexpr25 · October 7, 2021, 4:50pm

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

Teodor · October 7, 2021, 4:57pm

Please check:

alexpr25 · October 7, 2021, 5:00pm

(Actualizar)

bpj · October 7, 2021, 5:38pm

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.