Is it possible using bootstrap and pure javascript to display a modal dialog after a fetch request is successful or also if it the fetch request failed? Form submission The HTML Form Answer You probably wanna use this inside your request callback: Here is an example of what bootstrap modal can look like: You can see more about bootstrap modals

Using pure javascript and Bootstrap : How to display a modal dialog confirm response from fetch operation from JSON API

Is it possible using bootstrap and pure javascript to display a modal dialog after a fetch request is successful or also if it the fetch request failed?

Form submission

/**
 * Event handler for form submission
 */
const formUpload = document.querySelector("#upload-form");

document
  .querySelector("#upload-form")
  .addEventListener("submit", async (event) => {
    console.log("FORM SUBMIT HANDLER");

    event.preventDefault();

    let txtArea = document.querySelector("#file-contents");

    const response = await sendJSON(txtArea.textContent);

    // how do I diplsay a modal bootstrap dialog here confirming success
    // or error message from json api request
    console.log(response);
  });

The HTML Form

<div class="container">        
  <form action="/upload" id="upload-form" enctype="multipart/form-data" method="POST">
    <div class="form-group">   
      <h1>Upload</h1>          
      <p>Use this form to upload a json file to the API.</p>
    </div>
    <div class="form-row">     
      <div class="form-group"> 
        <label for="file-input">JSON file</label>
        <input type="file" accept=".json" class="form-control-file" id="file-input" name="file-input" />
      </div>
    </div>
    <div class="form-row">     
      <pre id="file-contents" name="file-contents"></pre>
    </div>
    <button id="clear-button" type="reset" class="btn btn-primary" disabled="true">Clear</button>
    <button id="submit-button" type="submit" data-toggle="modal" data-target="#confirm-submit" class="btn btn-primary"
      disabled="true">Submit</button>
  </form>
</div>
      
<script src="/static/js/script.js"></script>

Answer

You probably wanna use this inside your request callback:

// Optional success message inside div.modal-content
$('.modal-content').text('My success or error message')

// open/close modal 
$('#myModal').modal('toggle')

Here is an example of what bootstrap modal can look like:

<div id="myModal" class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">

    <div class="modal-content"> 
      <!-- Div you want to update the content -->
      ...
    </div>

  </div>
</div>

You can see more about bootstrap modals with javascript here

Advertisement

Answer