I am trying to display a bootstrap modal in Vue3
import { Modal } from 'bootstrap';
mounted() {
var galleryModal = new Modal(document.getElementById('waitingModal'));
galleryModal.show();
}
<div class="modal fade" tabindex="-1" role="dialog" id="waitingModal">
<div class="modal-dialog modal-dialog-centered justify-content-center" role="document">
<span class="fa fa-spinner fa-spin fa-3x"></span>
</div>
</div>
But it always gives me this error
Uncaught (in promise) TypeError: Cannot read properties of undefined
(reading 'backdrop')
Related
'My vue code like this :'
<teleport to="body">
<div v-show="success" id="msgModal" class="modal fade" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header bg-light">
<h5 class="modal-title">applyed successed!</h5>
<button type="button" data-bs-dismiss="modal" aria-label="Close">
<font-awesome-icon icon="times" />
</button>
</div
</div>
</div>
</div>
</teleport>
<script>
function callBackEndFunc(){
if(condition){
api.apiMethod1({})
.then(() => {
alert("success!");
//want to call data-bs-target="#msgModal"
});
}
}
</script>
When callBackEndFunc was called and after ajax success
want to want to call data-bs-target="#msgModal" to show div message in #msgModal.
Can anyone give me some advisor how to solve this problem?
Anyone can help me to fixed my issue, display select option in modal is not working while when i run my console its working fine but don't know why is not working when displaying my modal form. See attach photo below.
Here is my ajax code.. i pass it through html return it in to my detail blade. i use Bootstrap-select v1.13.1
my index blade...
<div class="modal fade bd-example-modal-lg" id="mymodal" role="dialog" >
<div class="modal-dialog modal-lg col-md-12" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body col-md-12 mt--4">
<div class="defectcontainer"></div>
</div>
</div>
</div>
my script....
$('#mymodal').on('shown.bs.modal',function(e){
$.ajax({
url:'{{{ URL::to("getdefectsdataJson") }}}',
data:
{
'coordinate_id':$("#coordinate_id").val(),
}
}).done(function(defectdatahtml){
$(".defectcontainer").html(defectdatahtml);
});
});
Thanks to this documentation https://github.com/snapappointments/bootstrap-select . I found the answer to my question.
$('#mymodal').on('shown.bs.modal',function(e){
$.ajax({
url:'{{{ URL::to("getdefectsdataJson") }}}',
data:
{
'coordinate_id':$("#coordinate_id").val(),
}
}).done(function(defectdatahtml){
$(".defectcontainer").html(defectdatahtml);
//------------- i add this funtion to my script. -------------------------------------------------//
$('.selectpicker').selectpicker();
});
});
In my MVC view, I am opening a modal dialog which renders a PartialView as RenderAction. The view is opened when user click Add button for the specific row like below.
From the main view, I want to pass the current row's (select row) ProjectNo, DrawingNo and RevisionNo. Also, preferrably I want to pass this into the respective ViewBag's fields. How can I achieve this?
Here is the source code where I am calling the dialog.
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Enter Fabrication Information</h4>
</div>
<div class="modal-body">
<div>
#{Html.RenderAction("Create", "Fabrication", new BPs.Entities.FABRICATION { });}
</div>
</div>
</div>
</div>
Update: Adding html for each row
#foreach(var info in #Model)
{
<tr>
<td>info.ProjectNo</td>
<td>info.DrawingNo</td>
<td>info.RevisionNo</td>
<button >Add</button>
</tr>
}
Bind Add to a jquery event and send values to event function('','') and then open partial view with load function
function Add(parameters)
{
$("<div></div>")
.addClass("dialog")
.appendTo(".modal-body")
.dialog({
title: 'xx',
close: function () { $(this).remove() },
closeText: "Close",
modal: true
})
.load("url?"yourparameters);
}
I have a calender after I click on date I need to show all data related to that day in a bootstrap model.I used fullcalender as my calender. I manage to pass data to controller through ajax and get the result. But my problem is how to show this data inside specific div.
dayClick: function (date, jsEvent, view) {
$.ajax({
url: 'TodayCases',
type: 'GET',
cache: false,
data: { id: date.format() }
}).done(function (result) {
$('#TodayCaseContainer').html(result);
});
}
if I use $('#Detail').modal('show'); it open the model without data how to combine that html respond to this model
My Model is
<div class="modal fade" id="Detail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<div id="TodayCaseContainer">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
From the controller you could return a partial view with the content of the modal. The trick is to call a JavaScript function "onsuccess" from the ajax to toggle the modal. I used the built-in ajaxhelper from asp.net MVC 5 for a similar purpose.
Markup Modal:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
#Html.Action("_partialModal", "Home")
</div>
</div>
Modal Partial View:
#Using Ajax.BeginForm("_partialModal", "Home", New AjaxOption With {
.HttpMethode = "Post",
.UpdateTargetID = "ModalCont",
.OnSuccess = "toggleModal()"},
New With {.id = "ModalCont"})
... Your modal content with Razor ...
End Using
JavaScript to Toggle the modal
function toggleModal() {
$('#myModal').modal('toggle');
}
Hope it helps.
I have this link
<a href='' data-toggle='modal' data-target='#modalC'>Book Now</a>
And i have this code which opens a bootstrap modal popup.
<div class="modal fade" id="modalC" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Cantidad reservas mensuales</h4>
</div>
<div class="modal-body" id="content">
</div>
</div>
</div>
</div>
Everything appearing inside div with id content is what appears inside modal popup, so my question is is there a way to show my already created aspx webform inside the modal popup without having to copy all the html and codebehind to this div?
I've heard something about window.open but i think it is not the case, Thank you in advance.
You can add an iframe into the modal body and load the url of your page inside it.
<div class="modal fade" id="modalC" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Cantidad reservas mensuales</h4>
</div>
<div class="modal-body" id="content">
<iframe src="your new page url">
</div>
</div>
</div>
</div>
if you want to load the page everytime you open the modal, you can add the iframe src when you click on the button you use to open the modal (or whichever method you use to open it).
Maybe this code can help you:
Add jquery and bootstrap
$(document).ready(function () {
initializeEvents();
});
var initializeEvents = function () {
$("#btnCarga").click(function () {
//agregas el aspx que quieres mostrar, el titulo y el pie de página pueden ser opcionales
ShowModalIframe('OtherPage.aspx', 'Tittle', 'Footer');
});
};
//Crea un modal con un iframe en el contenido donde se mostrará el aspx
var ShowModalIframe = function (uriContent, tittle = 'Titulo', footer='Carga completada') {
var html = '<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">\
<div class="modal-dialog modal-xl">\
<div class="modal-content">\
<div class="modal-header">\
<h5 class="modal-title">'+tittle+'</h5>\
<button type="button" class="close" data-dismiss="modal" aria-label="Close">\
<span aria-hidden="true">×</span>\
</button>\
</div>\
<div id="modal-body" class="modal-body">\
<div class="embed-responsive embed-responsive-21by9">\
<iframe id="iframe-modal" class="embed-responsive-item" src="'+document.location.origin+'/'+uriContent+'"></iframe>\
</div>\
</div>\
<div class="modal-footer">\
'+footer+'\
</div>\
</div>\
</div>\
</div>';
var dialog = $(html);
dialog.modal({
backdrop: 'static',
keyboard: false
});
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<button id="btnCarga" type="button" class="btn btn-primary" >
Mostrar modal
</button>