Hide modal not working after async fetch error

async/await fetch example
fetch async/await error handling
async/await fetch react
fetch synchronous
node-fetch async await
angular modal wait for response
await fetch error
await fetch post

I have a process in my page that needs to fetch data from an API using async and fetch. while the data is being fetch, a loading modal is displayed and remove (using $id.modal.('hide)) after the data is fetched.

When the fetched correctly the data, the modal is removed without any problem. However if there is any sort of error while fetching the data (eg 404) the modal won't hide.

here is a link which simulates the problem on JSFiddle

$(document).ready(function() {

  $('#btn-modal').click(function() {
    $('#myModal').modal('show');
    getData("https://jsonplaceholder.typicode.com/todos/1");
  });
  $('#btn-modal2').click(function() {
    $('#myModal').modal('show');
    getData("https://jsonplaceholder404.typicode.com/todos/1");
  });

});

async function getData(url) {
  try {

    const response = await fetch(url);
    if (response.status != 200) {
      throw new Error(response);
    }
    const data = await response.json();
    closeDialog();
		alert("got data");

  } catch (error) {
    closeDialog();
		alert("error");
  }
}

function closeDialog() {
  $('#myModal').modal('hide');
};
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>



<div id="myModal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false" tabindex="-1">
  <div class="modal-header">
    <h3 id="myModalLabel">TEST.</h3>
  </div>
  <div class="modal-body">
    <p>test</p>
  </div>
</div>
<br />
<button id="btn-modal" class="btn">VALID</button>
<button id="btn-modal2" class="btn">INVALID</button>

It's just a typo. Call closeDialog(); instead of closeDialogue(); and it will work.

Implementing Modal Dialog Functions with Promise-based Dialog , The problem with the native alert/confirm/prompt functions is that they are in a single function call, and asynchronous processing of dialog results could be an XMLHttpRequest has failed), it calls the rejectCallback with error data. piece of functionality – it has to close the popup after the dialog result is  The issue is that .modal() is async, so those three calls will be fired one after another without waiting the other one to finish, thus causing issues. Even using toggle causes issue in this scenario. The most sane thing would be to patch the modal proto to add a callback.

There is a typo-error in closeDialog()

$(document).ready(function() {

  $('#btn-modal').click(function() {
    $('#myModal').modal('show');
    getData("https://jsonplaceholder.typicode.com/todos/1");
  });
  $('#btn-modal2').click(function() {
    $('#myModal').modal('show');
    getData("https://jsonplaceholder404.typicode.com/todos/1");
  });

});

async function getData(url) {
  try {

    const response = await fetch(url);
    if (response.status != 200) {
      throw new Error(response);
    }
    const data = await response.json();
    closeDialog();
		alert("got data");

  } catch (error) {
    closeDialog();
		alert("error");
  }
}

function closeDialog() {
  $('#myModal').modal('hide');
};
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>



<div id="myModal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false" tabindex="-1">
  <div class="modal-header">
    <h3 id="myModalLabel">TEST.</h3>
  </div>
  <div class="modal-body">
    <p>test</p>
  </div>
</div>
<br />
<button id="btn-modal" class="btn">VALID</button>
<button id="btn-modal2" class="btn">INVALID</button>

JavaScript Fetch API and using Async/Await, It was a fun post and a little bit of work, and I actually learned a little bit Using Async/Await is not fully supported across all browsers, so you  I have a aspx page that calls a long-ish running piece of code. My intent was to launch a modal popup with some verbiage or a hourglass-ish animation. Once the long running piece of code finished,

If you check your browser console, there is an error

Uncaught (in promise) ReferenceError: closeDialogue is not defined
    at getData ((index):58)

Use the correct name.

"Synchronous" fetch with async/await - DEV Community ‍ ‍ , const response = await fetch('https://api.com/values/1'); const json = await This is a more intuitive way of working with requests. await will return the value only after the Promise is resolved. async. But wait, there's more! Not really, but there's something I haven't told you yet. Close modal button. My modal div's have .modal class. I have a standard close button bottom right of the dialog as well as the 'X' button. However, I removed the .close class from the button as the font was too large (presumably for the big 'X').

iOS: UI will be blocked when show Alert while closing Modal · Issue , [doc] update Modal.js to fix #10662 #10669 finally, I decide to hide Modal after I close the Alert dialog, and that works! code likes following: Fixed Modal buttons not responsive when we show an error dialog … FWIW a modification to @​fengyouchao's workaround if you are using async/await is async / await allows us to program using asynchronous requests in a "synchronous" manner using the modern versions of Javascript. A hypothetical introduction. As web developers, we make requests to APIs a lot – not only to our own APIs but to others’, too. As we all know, they can be a real pain in the ass.

Modal Dialogs in React, Then the modal will wait for its “Close” button to be clicked. The root of the problem is this: How do you make something appear onscreen,  Handling Failed HTTP Responses With fetch() work this way? Per MDN, the fetch() you might not know that you can use fetch()

Modal · Bootstrap, Clicking on the modal “backdrop” will automatically close the modal. Bootstrap You'll likely run into issues when nesting a .modal within another fixed element. Modal not working #876. Closed ModalTrigger passes its hide function to Modal, and OverlayInstance directly into the playground in our docs does not give me