Recentemente ho aggiornato il mio sito per il Bootstrap 3 e sono in procinto di passare attraverso tutti i layout per aggiornare i nomi delle classi e varie funzionalità per funzionare correttamente. Il mio problema più recente è che i drop down non sembrano funzionare. All'inizio pensavo di non aver implementato il codice correttamente per la barra di navigazione, ma dopo essermi frustrato, in realtà ho provato a sbarazzarmi della barra di navigazione e ad usare quella direttamente dallo BS 3 documentation. Anche quel codice non funziona. Ho esaminato questo aspetto e sono abbastanza sicuro di avere tutte le librerie .js corrette. Ecco il mio application.js:Bootstrap 3 a discesa non funziona con Rails 4 & Turbolinks
//= require jquery
//= require bootstrap-sprockets
//= require jquery.ui.datepicker
//= require jquery.timepicker.js
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require jquery.remotipart
//= require chosen-jquery
//= require_tree .
Ecco quello che appare nel mio <head>:
<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/affix.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/alert.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/button.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/carousel.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/collapse.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/dropdown.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/tab.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/transition.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/scrollspy.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/modal.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/tooltip.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/popover.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap-sprockets.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.core.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.datepicker.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.timepicker.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.iframe-transport.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.remotipart.js?body=1"></script>
E devo popovers e altri elementi pieghevoli sulla stessa pagina, e tutto funziona bene, quindi sono abbastanza certo tutto il .js è intatto.
Ho letto altrove che i turbolinks possono creare problemi per Bootstrap 3 e hanno persino provato (e poi abbandonato e ripristinato) la gemma jquery.turbolinks senza alcun risultato. Inutile dire che non ho idea di come riprodurlo su jsfiddle (mi dispiace).
Infine, ho verificato che le seguenti quattro funzioni js sono chiamati ogni volta che clicco un menu a discesa, presumibilmente nel seguente ordine:
jquery.js: 4306
eventHandle = elemData.handle = function(e) {
// Discard the second event of a jQuery.event.trigger() and
// when an event is called after a page has unloaded
return typeof jQuery !== strundefined && (!e || jQuery.event.triggered !== e.type) ?
jQuery.event.dispatch.apply(eventHandle.elem, arguments) :
undefined;
};
// Add elem as a property of the handle fn to prevent a memory leak with IE non-native events
eventHandle.elem = elem;
turbolinks. js: 324
installClickHandlerLast = function(event) {
if (!event.defaultPrevented) {
document.removeEventListener('click', handleClick, false);
return document.addEventListener('click', handleClick, false);
}
};
tujquery.js: 4306 (ancora)
turbolinks. js: 324
handleClick = function(event) {
var link;
if (!event.defaultPrevented) {
link = extractLink(event);
if (link.nodeName === 'A' && !ignoreClick(event, link)) {
visit(link.href);
return event.preventDefault();
}
}
};
Qualsiasi indizio su cosa potrebbe accadere qui e su come risolverlo?
Se si utilizza Rails 4.2.0, utilizzare questa gemma può causare strani comportamenti di bootstrap, sembrare come rails 4.2.0 i turbolinks funzionano bene bootstrap al volo. – zw963