I have a form submission that call an API like
<button
class="btn btn-primary w-100"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
onclick="Send();"
>
Invia
</button>
Where the Send() function is
function Send() {
var select_file = document.getElementById("formFile").files[0];
var select_project_name = document.getElementById("selec-div").value;
var pacchetto_id = document.getElementById("pacchetto").value;
var versione_id = document.getElementById("versione").value;
var file_string =
"https://<xxxx>.it/api/;
console.log(file_string);
var formData = new FormData();
formData.append("file", select_file);
fetch(file_string, {
method: "PUT",
headers: {
"PRIVATE-TOKEN": TOKEN,
},
body: formData,
})
.then((response) => response.json())
.then((data) => {
console.log("File uploaded successfully:", data);
if (data["message"] == "201 Created") {
modal.show();
}
})
.catch((error) => {
console.error("Error uploading file:", error);
});
}
My issue is that the modal pops open just after I clicked the button, instead of being shown after the data["message"] == "201 Created"
Basically even if I see the console.log("File uploaded successfully:", data); when the file is actually uploaded, instead the modal shows right after the button click
You need to remove data-bs-* attributes from button, as they trigger modal automatically, and show/hide modal only with JS:
<button
class="btn btn-primary w-100"
onclick="Send();"
>
Invia
</button>
JS modal instance:
const modal = new bootstrap.Modal('#exampleModal');
demo:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="p-3 m-0 border-0 bd-example m-0 border-0">
<!-- Example Code -->
<form abineguid="06622E9DA1A84EF183141C48C5CDF885">
<div class="mb-3">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="mb-3">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
<button
class="btn btn-primary w-100"
onclick="Send(event);"
>
Invia
</button>
</button>
</form>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script>
const modal = new bootstrap.Modal('#exampleModal');
function Send(e) {
e.preventDefault()
var file_string = "https://jsonplaceholder.typicode.com/todos";
console.log(file_string);
fetch(file_string)
.then((response) => response.json())
.then((data) => {
console.log("File uploaded successfully:", data);
setTimeout(()=>{
modal.show();
}, 1000);
})
.catch((error) => {
console.error("Error uploading file:", error);
});
}
</script>
</body>
</html>