bootstrap modal $(...).modal is not a function - javascript

I'm trying to open a bootstrap modal dialog when clicking the span, I've searched the internet for solutions to my problem bootstrap modal $(...).modal is not a function but the only solution I've found is " put jQuery scripts before bootstrap scripts because bootstrap depends on jQuery " so I've put jQuery first, and it still gives me the same error: bootstrap modal $(...).modal is not a function
Here's the code I've tried with so far:
HTML
<span value="${bean.getId(i)}" class="glyphicon glyphicon-remove spanRemoveTransaction" style="color:red; cursor: pointer; margin-top:8px;" nowrap="true" data-toggle="myModal" data-target="#modal"></span>
<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">Are you sure you want to delete this transaction?</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="delete">Delete</button>
</div>
</div>
</div>
</div>
jQuery
$(".spanRemoveTransaction").on('click', function (e) {
theTransactionId = $(this).attr("value");
e.preventDefault();
deleteTransactionModal(theTransactionId, e);
});
function deleteTransactionModal(theTransactionId, e) {
e.preventDefault();
$('#myModal').modal({
keyboard: false
}).on('click', '#delete', function (e) {
var url = config.deploymentIp + "/Controller?deleteTransaction";
var transactionId = "";
$.ajax({
dataType: "json",
type: "POST",
url: url,
data: {transactionId: theTransactionId},
success: function (data, textStatus, jqXHR)
{
if (!data["has_errors"]) {
$('table#transactionList tr#'+theTransactionId).remove();
} else {
transactionId = data.errors["transactionId"];
if (transactionId === "transactionIdError") {
}
}
}
});
});
}
Scripts
<script src="js/jquery/jquery.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/bootstrap-select.min.js" type="text/javascript"></script>
<script src="includes/selectpicker.js" type="text/javascript"></script>
<script src="js/currencyExchange.js" type="text/javascript"></script>
<script src="js/atbottom.js" type="text/javascript"></script>
<script src="js/config.js"></script>
<script src="includes/loadBottomScript.js" type="text/javascript"></script>
<script src="js/menuScript.js" type="text/javascript"></script>
<script src="js/bootstrap-datepicker.js" type="text/javascript"></script>
<script src="includes/datepicker.js" type="text/javascript"></script>
<script src="js/transfers.js" type="text/javascript"></script>
If anyone has a solution to this, or just happen to have fresh eyes and can help me locate the problem, it would be greatly appreciated.

You are using jQuery.noCoflict
Here is a jsFiddle
Use
jQuery.noConflict();
jQuery('#myModal') ....
Please tell me if it works or not.
UPDATE
As #dashtinejad point to another thing in his comment after the no conflict:
Other parts of script which rely on $ should change to jQuery also

$(document).ready(function () {
// Attach Button click event listener
$('.glyphicon-remove spanRemoveTransaction').click(function(){
// show Modal
alert("pp")
$('#myModal').modal('show');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<span value="${bean.getId(i)}" class="glyphicon glyphicon-remove spanRemoveTransaction" style="color:red; cursor: pointer; margin-top:8px;" nowrap="true" data-toggle="modal" data-target="#myModal">click the span</span>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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">Are you sure you want to delete this transaction?</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="delete">Delete</button>
</div>
</div>
</div>
</div>

Related

how to Run code after Bootstrap Modal closes using modal name from a function

I have a Bootstrap Modal coded in html like so:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body><!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" id="button_exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<a onclick="Modal('test_exampleModal')">this is a test</a>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
when you click the "this is a test link" the modal shows using the function below:
<script>
function Modal(p1) { // p1 here is equal to button_exampleModal
var button = document.getElementById(p1);
var msg_id = p1.replace("button_",""); // remove the button_ from the p1 variable
button.click(); // this will trigger the click event
}
</script>
however I need to do something after the Modal closes. the documentation says to do the following, which works,
$('#exampleModal').on('hidden.bs.modal', function (e) {
alert('this is a test');
})
I need to pass the msg_id from the original function
and this does not work:
$(msg_id).on('hidden.bs.modal', function (e) {
alert('this is a test');
})
any suggestions? I feel like it is something easy, but i cant seem to figure it out

jQuery function don't run to show "Modal" element

I want put a button in a web page and show a modal when yo click on it .
i wrote OnClick event function with jQuery.
<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="modalbody">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
#section scripts{
<script src="~/Scripts/modal.js"></script>
<script>
$("btnNewGroup").on("click",function () {
$.get("/Admin/PageGroups/Create", function (result) {
$("Modal").modal();
$("ModalLabel").html("Create new group");
$("modalbody").html(result);
})
});
</script>
}
and there is references before render section :
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
#RenderSection("scripts", required: false)
The problem is with your jquery selector. You are missing ID selector.
Please check below.
$("#btnNewGroup").on("click",function () {
$.get("/Admin/PageGroups/Create", function (result) {
$("#Modal").modal();
$("#ModalLabel").html("Create new group");
$("#modalbody").html(result);
})
});

Modal Dialog is Loaded But Invisible

I tried to make a modal. I use AJAX to show the modal but the modal is invisible. When I use the button's trigger with data-toggle and data-target, the modal is showing up visible.
This is what I have tried to do
Check that all script is correctly loaded
Tried to reorder script
Delete fade class in modal and the modal visible but with bad UI
Change bootstrap version but result is same
This is my code
AJAX
$("body").on("click", ".btn-show", function (event) {
event.preventDefault();
var me = $(this),
url = me.attr("href"),
title = me.attr("title");
$("#modal-title").text(title);
$.ajax({
url: url,
dataType: "html",
success: function (response) {
$("#modal-body").html(response);
$("#modal").modal("show");
},
});
});
HTML Modal
<div class="modal fade" id="modal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" id="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="modal-title">Form Input</h4>
</div>
<div class="modal-body" id="modal-body">
</div>
<div class="modal-footer" id="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary" id="modal-btn-save">Save
changes
</button>
</div>
</div>
</div>
</div>
SS modal exists but is not visible:
There are no errors with the modal, and the $("#modal").modal("show"); displays the modal just fine (see code snippet below),
Since the code snippet below works fine, it seems clear that the original code's "success" function is never called:
success: function (response) {
$("#modal-body").html(response);
$("#modal").modal("show");
}
I suggest adding an error function to the ajax parameters:
error: function (jsXHR, textStatus, errorThrown) {
// handle error here
}
From the jQuery docs:
error
Type: Function( jqXHR jqXHR, String textStatus, String errorThrown )
A function to be called if the request fails.
function showModal() {
$("#modal-title").text('Sample Title');
$("#modal-body").html('Sample Response');
$("#modal").modal("show");
}
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- scripts needed by Bootstrap -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<body class="p-2">
<button onclick="showModal()">Show Modal</button>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header" id="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="modal-title">Form Input</h4>
</div>
<div class="modal-body" id="modal-body">
</div>
<div class="modal-footer" id="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary" id="modal-btn-save">Save
changes
</button>
</div>
</div>
</div>
</div>
</body>
I just fix this problem on Laravel Voyager Admin.
This is because I just declare two times bootstrap scripts.

Add class to the body when modal is open

I'm having a problem with my login modals. One modal open when someone click forgot password link on my sign in the modal. (One modal open in another modal) So I came everything clean by adding all necessary attributes.
Eg:
<span data-toggle="modal" data-target="#forgot-pin-popup" data-dismiss="modal">Forgot password?</span>
But I notice it won't add .modal-open class to the body when my second modal is open(styles are shown weird without this class). So I manually use this js script.
$('.modal').on('hidden.bs.modal', function () {
if($('.modal').hasClass('in')) {
$('body').addClass('modal-open');
}
});
Works perfectly BUT when I try switching models like 6 times. It won't work again. Can't imagine why. I can't show you an example because it's on my production site. Does anyone face the similar problem like this?
Try to do using modal id
On modal show
$('#forgot-pin-popup').on("shown.bs.modal", function() {
$("body").addClass("modal-open");
});
On modal hide
$('#forgot-pin-popup').on("hide.bs.modal", function() {
$("body").addClass("modal-open");
});
what about using a global event listeners:
$(document).on('hidden.bs.modal', '.modal', function () {
$('body').toggleClass('modal-open', $('.modal').hasClass('in'));
});
Try to use body instead of .modal
$('body').on('hidden.bs.modal', function() {
if ($('.modal.in').length) {
$('body').addClass('modal-open');
}
});
Also make sure that your modal should not be nested into .modal class
$('body').on('hidden.bs.modal', function() {
if ($('.modal.in').length) {
$('body').addClass('modal-open');
}
});
$(".btn-primary").on("click", function() {
console.log($("body").attr("class"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- Modal -->
<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">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1" data-dismiss="modal">
Open modal
</button>
</div>
</div>
</div>
</div>
<!-- Modal1 -->
<div class="modal fade" id="myModal1" 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">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

reCAPTCHA doesn't work in Twitter Bootstrap dialog

I am trying to put a reCAPTCHA in Twitter Bootstrap dialog. I found that it doesn't work. Nothing was shown in the dialog.
Here are my codes:
in body
<div class="modal fade" id="recaptchaModel" tabindex="-1" role="dialog">
<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">Enter the text below to continue</h4>
</div>
<div class="modal-body" id="recaptcha_div">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success" onclick="submitForm()">Continue</button>
</div>
</div>
</div>
</div>
at the button of body:
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
in JavaScript file
...
function buttonAction() {
showRecaptcha();
$('#recaptchaModel').modal();
};
function showRecaptcha(){
Recaptcha.create("my key(I am sure that I put the correct key", 'recaptcha_div', {
theme: "red",
callback: Recaptcha.focus_response_field});
};
Here is the result
Can anyone help me to fix my code? Thanks!

Categories