bootstrap modal $ (...). Modal не является функцией

Question

Я пытаюсь открыть диалоговое окно bootstrap modal при нажатии пробела, я искал в Интернете решения для своей проблемы bootstrap modal $ (. ..) modal не является функцией, но единственным решением, которое я нашел, является «положить сценарии jQuery перед сценариями начальной загрузки, потому что bootstrap зависит от jQuery», поэтому я сначала поставил jQuery, и он все равно дает мне такую ​​же ошибку: самозагрузки модальных $ (...) модальный не является функцией

Вот код, который я пытался с до сих пор:.

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") { 

        } 
       } 
      } 
     }); 
    }); 
} 

Сценарии

<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> 

Если у кого есть решение этой проблемы, или просто так, чтобы свежий взгляд и может помочь меня найти про blem, было бы весьма полезно.

Answer 1

Вы используете jQuery.noCoflict

Вот jsFiddle

Использование

jQuery.noConflict(); 
jQuery('#myModal') .... 

Пожалуйста, скажите мне, если он работает или нет.

UPDATE

Как @dashtinejad точки на другую вещь в своем комментарии после конфликта нет:

Другие части сценария, которые полагаются на $ должен измениться jQuery также

Answer 2

$(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>