Rails 4 - welche Reihenfolge jQuery und Bootstrap?

Question

Ich versuche herauszufinden, wie Sie Assets in meiner application.js laden.

Ich habe diese erforderlichen Dateien (unter anderem) in meiner application.js.

//= require bootstrap-sprockets 
//= require jquery 
//= require jquery-ui 
//= require jquery_ujs 

Mein Juwel Datei hat:

gem 'jquery-rails' 
gem 'jquery-ui-rails' 

Wenn Bootstrap-Zahnräder vor jQuery ist, dann meine Bootstrap-Drop-Down-Menü (siehe unten) funktioniert gut.

Allerdings funktioniert in diesem Fall meine Registerkarte Show Funktion auf der folgenden Einrichtung nicht. Ich kann nicht auf die Tabs klicken. Wenn ich jQuery über Bootstrap-Kettenräder verschiebe, funktioniert es, aber dann funktioniert das Dropdown-Menü, das sonst funktioniert, nicht mehr.

<div class="row"> 
       <div class="col-md-10 col-md-offset-1"> 
        <div class="dp-tab-1"> 
         <ul class="dp-tab-list row" id="myTab"> 
          <li class="col-md-3 col-xs-6 active" > 
           <a href="#tab-guag-content-first"> 
            <span>MOTIVATION</span> 
           </a> 
          </li> 
          <li class="col-md-3 col-xs-6"> 
           <a href="#tab-guag-content-second"> 
            <span>OBJECTIVES</span> 
           </a> 
          </li> 
          <li class="col-md-3 col-xs-6"> 
           <a href="#tab-guag-content-third"> 
            <span>VISION</span> 
           </a> 
          </li> 

         </ul> 

         <div class="dp-tab-content tab-content"> 
          <div class="tab-pane row fade in active" id="tab-guag-content-first"> 

           <div class="col-md-12"> 
            <div class="tab-inner"> 

             <p class='medium-text'> 
              <%= @project.motivation %> 
             </p> 
             <br/> 
            </div> 
           </div> 
          </div> 

          <div class="tab-pane row fade" id="tab-guag-content-second"> 
           <div class="col-md-12"> 
            <div class="tab-inner"> 
             <p class='medium-text'> 
              <%= @project.objective %> 
             </p> 
             <br/> 
            </div> 
           </div> 
           <div class="col-md-6"> 
            <img class='wow fadeInUp img-responsive' src="images/iphone-mockup.png" alt=""/> 
           </div> 
          </div> 

          <div class="tab-pane row fade" id="tab-guag-content-third"> 

           <div class="col-md-12"> 
            <div class="tab-inner"> 
             <div class='services-content'> 
              <strong>Long Term Research Vision</strong> 
              <p class='medium-text'> 
               <%= @long_term %> 
              </p> 
             </div> 
             <div class='services-content'> 
              <strong>Immediate Challenge</strong>  
              <p class='medium-text'> 
               <%= @immediate_challenge %> 
              </p> 
             </div>  
             <br/> 
             <!-- <a class='btn btn-primary'>READ MORE</a> --> 
            </div> 
           </div> 
          </div> 

         </div> 
        </div> 
      <!- 

Wenn ich versuche, die Seite in dem Fall zu machen, wenn Bootstrap vor jQuery geladen wird, bekomme ich diesen Fehler in der Chrom-Inspektoren Konsole Registerkarte:

main.self-9711b4c….js?body=1:56 Uncaught TypeError: dp(...).tab is not a function(anonymous function) @ main.self-9711b4c….js?body=1:56dispatch @ jquery.self-660adc5….js?body=1:5227elemData.handle @ jquery.self-660adc5….js?body=1:4879 

Wie kann ich dieses Problem lösen, so dass ich kann sowohl das Dropdown als auch die Tabs funktionieren?

Meine ganze application.js ist:

//= require jquery 
//= require jquery-ui 
//= require jquery_ujs 
//= require bootstrap-sprockets 
//= require html.sortable 
//= require disqus_rails 
//= require moment 
//= require bootstrap-datetimepicker 
//= require pickers 
//= require masonry.pkgd.min 
//= require multipleFilterMasonry 
//= require main 
//= require hammer.min 
//= require jquery.animate-enhanced.min 
//= require jquery.countTo 
//= require jquery.easing.1.3 
//= require jquery.fitvids 
//= require jquery.magnific-popup.min 
//= require jquery.parallax-1.1.3 
//= require jquery.properload 
//= require jquery.shuffle.modernizr.min 
//= require jquery.sudoSlider.min 
//= require jquery.superslides.min 
//= require rotaterator 
//= require smoothscrolljs 
//= require waypoints.min 
//= require wow.min 
//= require underscore 
//= require gmaps/google 
//= require markerclusterer 
//= require infobox 
//= require chosen-jquery 
//= require cocoon 
//= require imagesloaded.pkgd.min 
//= require isotope.pkgd.min 
//= require jquery.counterup.min 
//= require jquery.pjax 
//= require custom.js 
//= require slider 
//= require bootstrap-slider 
//= require_tree . 

NÄCHSTE VERSUCH

Ich habe alle Vorschläge in diesem Beitrag versucht: keiner von ihnen für mich arbeiten: https://github.com/twbs/bootstrap-sass/issues/714

Answer 1

Works perfekt.

Sie haben bootstrap.js vor der Jquery definiert. aber in jeder Anwendung sollten Sie jQuery oben definieren, also würde es zuerst geladen werden.

Answer 2

U r

data-toggle="tab" 

Das Beispiel der Arbeits Code fehlt:

<a href="#tab-guag-content-first" data-toggle="tab"> 
    <span>MOTIVATION</span> 
</a> 
... 
<a href="#tab-guag-content-second" data-toggle="tab"> 
    <span>OBJECTIVES</span> 
</a> 
... 
<a href="#tab-guag-content-third" data-toggle="tab"> 
    <span>VISION</span> 
</a> 

Answer 3

Erstens, ich werde Sie verwenden Edelsteine ​​zu übernehmen einen Teil der Vermögensgegenstände zu laden, wie jquery-rails . Ich sage das, denn wenn Sie die require_tree .-Anweisung haben, werden alle Dateien in Ihrer javascripts automatisch einbezogen. Zweitens, versuchen Sie application.js Einrichtung etwas wie folgt aussehen:

/* 
* This is a manifest file that'll be compiled into application.css, which will include all the files 
* listed below. 
* 
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, 
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path. 
* 
* You're free to add application-wide styles to this file and they'll appear at the bottom of the 
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS 
* files in this directory. Styles in this file should be added after the last require_* statement. 
* It is generally better to create a new file per style scope. 
* 
*= require_tree . 
*= require_self 
*= require misc-stuff 
*= require jquery-stuff 
*= require bootstrap-stuff 
*/ 

ich bemerkt, dass Sie keine require_self Aussage im Snippet haben haben Sie zur Verfügung gestellt, so dass auch etwas mit Ihrem Problem zu tun haben.

Drittens können Sie einige CSS-Probleme haben.

Answer 4

Das funktionierte für mich: https://stackoverflow.com/a/22977412/2860931 Es fühlt sich nicht wie eine tatsächliche Lösung - aber eher eine Arbeit um. Ich werde das jetzt für gut genug halten.Ich habe mindestens 30 verschiedene Lösungen ausprobiert, die an verschiedenen Stellen auf SO gepostet wurden.

Answer 5

Ok, was Sie dies brauchen, ist:

//= require jquery 
//= require jquery-ui 
//= require jquery_ujs 
//= require bootstrap-sprockets 

Jetzt Funktion funktioniert Ihre Registerkarte anzeigen und Ihr Menü nicht, lassen wir das aswell beheben.

dieses Skript zu Ihrer Seite hinzufügen:

<script> 
$('.dropdown-toggle').dropdown() 
</script>