Rails 4 - jQueryとブートストラップを入れるために？

Question

私はapplication.jsでアセットを読み込む方法を理解しようとしています。

私のapplication.jsには、これらの必須ファイルがあります。

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

私の宝石のファイルがあります。

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

ブートストラップ・スプロケットは、jQueryの前で、その後（下）私のブートストラップドロップダウンメニューが正常に動作します。

<div class="row" style="margin-top:30px"> 
    <div class="col-md-3 col-md-offset-8"> 
     <% if policy(@project).show? %>  

      <div class="btn-group"> 
       <button type="button" style="color: black" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
       STATUS: <%= text_for_state(@project.current_state) %> <span class="caret"></span> 
       </button> 
       <ul class="dropdown-menu"> 
       <% if policy(@project).request_preapproval? %>  
        <%= link_to "REQUEST APPROVAL", request_preapproval_project_path(@project), method: :put, :style=>"padding-left:20px; padding-right: 10px" %> 
       <% end %> 
       <li role="separator" class="divider"></li> 
       <% if policy(@project).publish? %>  
        <%= link_to "PUBLISH", publish_project_path(@project), method: :put, :style=>"padding-left:20px; padding-right: 10px" %> 
       <% end %> 
       <li role="separator" class="divider"></li> 

       <!-- <a href="#" class='btn btn-primary'>REQUEST MORE INFORMATION</a> --> 
       <% if policy(@project).update? %> 

        <%= link_to "EDIT PROJECT", edit_project_path(@project), :style=>"padding-left:20px; padding-right: 10px" %> 
       <% end %> 

       <li role="separator" class="divider"></li> 
       <% if policy(@project).edit? %>  
        <%= link_to "REMOVE", edit_project_path(@project), :style=>"padding-left:20px; padding-right: 10px" %> 
       <% end %> 
       </ul> 
      </div> 


     <% end %> 
    </div>  
</div 

ただし、この場合、次の設定では、自分のタブショー機能が機能しません。私はタブをクリックすることはできません。 jQueryをブートストラップスプロケットの上に移動すると機能しますが、そうでない場合はドロップダウンメニューが機能しなくなります。

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 

私はなるようにどのように私はこの問題を解決することができます：ブートストラップはjQueryの前にロードされたとき、私はケースにページをレンダリングしようとすると、私はクロームインスペクタコンソール]タブで、このエラーを取得する

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

ドロップダウンとタブの両方を動作させることができますか？

マイ全体application.js

は次のとおりです。私はこの記事内の提案のすべてを試してみました

//= 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 . 

次の試み：それらのどれも私のために働くん：https://github.com/twbs/bootstrap-sass/issues/714

Answer 1

ワークス完全に。

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

jqueryの前にbootstrap.jsを定義しました。すべてのアプリケーションで、jqueryを一番上に定義しておく必要があります。

Answer 2

Uが動作するコードの例

data-toggle="tab" 

を忘れたr：

<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

はまず、私は、このようなjquery-railsとして、あなたは資産の一部をロードするために宝石を使用していると仮定するつもりです。あなたがrequire_tree .ステートメントをお持ちの場合、javascriptsにあるすべてのファイルが自動的にインクルードされるため、私はこれを言っています。第二に、このような何かを見て、あなたのapplication.jsを設定してみてください。それはまた、あなたの問題とは何かを持っているかもしれので

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

私は、あなたが提供するスニペットでrequire_self文を持っていませんでした気づきました。

第3に、いくつかのCSSの問題がある可能性があります。

Answer 4

これは私のために働いた：https://stackoverflow.com/a/22977412/2860931実際の解決策のように感じるのではなく、むしろ回避策です。私は今それを十分に取る。私は、SOの様々な場所に投稿された少なくとも30種類のソリューションを試しました。

Answer 5

あなたがこれであるために必要なものOK：

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

今すぐあなたのタブショーの機能が動作し、あなたのメニューは、のは、そのaswellを修正することはできません。

は、あなたのページにこのスクリプトを追加します。

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