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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.