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

Question

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">&times;</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.

Answer 1

$(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">&times;</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>

Answer 2

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