Bootstrap modal - close modal, refresh modal, reopen modal-CodePudding

I am working on upgrading a photo gallery (the standard ones don't allow the amount of text I need for some photos). Everything works, but when I run code on buttons to navigate to the previous or next photo, the modal closes, the code to update the modal for the new photo runs, but the modal does not re-open. However, if I insert an alert after closing the modal, everything works as expected.

I have tried a variety of things including writing to the console, but that doesn't affect anything. I tried a "sleep" function where the alert is in the example above, but it executed before the modal was closed, so did not have a positive effect (other than waiting for the modal to close). Commenting out the alert in the code above runs the code in "open_gallery_form()", but the code that displays the modal does not fire.

function nav_button_click(event_code, ep_id) {
  // close current version of modal form:
  $("#imageModal").modal('hide');

  // the form won't re-open without this which is frustrating ...
  // tried a "sleep" routine but that fires before the form is closed (above),
  // so is useless ... 
  // console.log("navigating"); console log doesn't do anything
  alert("navigating"); // please don't change the code

  // call code to refresh with new image and text, updated buttons, etc.
  // and display modal
  open_gallery_form(event_code, ep_id);
}

// More code here, please.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">

More markup here, please.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

CodePudding user response：

Based on comments from isherwood the following:

setTimeout(() => {  open_gallery_form(event_code, ep_id) }, "1000");

Works to delay and then call the function, a 1 second delay seems to be enough. I am calling this done and working.