Level 12
Fixed it.
Adding
$('#addFlashModal').modal('hide');
did the trick.
1 like
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I have a small modal to add some data to a table. When the data is successfully submitted I want to close the modal.
<template>
<div>
<div class="modal fade" tabindex="-1" id="addFlashModal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form @submit.prevent="submitForm()">
<div class="modal-header">
<h5 class="text-uppercase">Add New Ticker Message</h5>
<br>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body p-3">
<div class="form-group">
<input type="text" class="form-control" placeholder="New Ticker Message" v-model="newMessage">
</div>
<button class="button-top btn btn-bold btn-block btn-primary" type="submitForm()">
Save
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "addFlash",
data() {
return {
newMessage: "",
errors: [],
}
},
methods: {
submitForm() {
axios.post('/api/new-ticker-message', {
message: this.newMessage
}).then(resp => {
/** Code here to close modal*/
}).catch(error => {
this.errors = error.response.data.errors
console.log("Errors= " + this.errors)
})
}
}
}
</script>
<style scoped>
.modal {
color: black;
max-width: 100% !important;
}
</style>
I have used location.reload() but this refreshes the page.
I also tried this.$emit('hide', true); and added a v-if to the component. This does close the modal bu the background remains faded and un selectable.
Thanks Paul.
Fixed it.
Adding
$('#addFlashModal').modal('hide');
did the trick.
Please or to participate in this conversation.