javascript - Twitter Bootstrap Rails ボタンのドロップダウンが AJAX に応答しない

Question

Bootstrap を使用する Rails 4 アプリがあります。ツールのステータスを表すために色分けされたボタンを表示するダッシュボードページを作成しています。ページ内の HTML は次のようになります。

<div class="btn-group">
   <a class="btn custombutton dropdown-toggle btn-success" data-toggle="dropdown" href="#" id="btn0" >
      706-Hydraulic Ram<br> 98061841
   </a>

   <ul class="dropdown-menu">
       <li><a data-method="post" data-remote="true" href="/update_in_service?id=32" id="in_service" rel="nofollow">In Service</a></li>
       <li><a data-method="post" data-remote="true" href="/update_out_service?id=32" id="out_service" rel="nofollow">Out of Service</a></li>
       <li><a href="/tools/32">view Details</a></li>
   </ul>
</div>

リンクされた 2 つのメソッドは次のようになります。

def in_service
 @tool.update(:in_service => true)
 respond_to do |format|
   format.html { redirect_to(root_path) }
   format.js
   end
end


def out_service
  @tool.update(:in_service => false)
  respond_to do |format|
    format.html { redirect_to(root_path) }
    format.js
  end
end

"format.js" の後には何もないため、Rails はメソッドと同じ名前で .js.erb が続くファイルを自動的に実行する必要があります。in_service.js.erb と out_service.js.erb ファイルがあります。それらは次のようになります。

$('.in_service').bind('ajax:success', function() {
    $(this).closest('.btn').addClass('.btn-success').removeClass('.btn-warning');
});


$('.out_service').bind('ajax:success', function() {
    $(this).closest('.btn').addClass('.btn-warning').removeClass('.btn-success');
});

ドロップダウンリンクをクリックしても、ブラウザの JS コンソールでエラーが発生しません。コントローラー部分は完璧に動作しています。ページをリロードすると、変更された色のボタンが表示されます。Railsサーバーログはこれを示しています：

SQL (8.3ms)  UPDATE "tools" SET "in_service" = $1, "updated_at" = $2 WHERE "tools"."id" = 32  [["in_service", false], ["updated_at", Wed, 28 Aug 2013 22:28:11 PDT -07:00]]
   (1092.8ms)  COMMIT
  Rendered tools/out_service.js.erb (0.6ms)
Completed 200 OK in 1383ms (Views: 259.3ms | ActiveRecord: 1104.3ms)

したがって、実際には JS ファイルを「レンダリング」していますが、ページは決して変更されません。それが問題であるかどうかを確認するために、さまざまなjqueryセレクターを試しましたが、同じ結果になりました。私のapplication.jsファイルには次のものが含まれています：

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require bootstrap-datepicker
//= require server-time
//= require jquery-table
//= require_tree .

考えられることはすべて検索しましたが、まだ困惑しています。私は JS が苦手で、JS についての私の理解はかなり初歩的です。ありがとう。

編集 - -

そこで、HAWK から提案された変更を行いましたが、私の設定ではうまくいきません。Chrome JS コンソールでこれを取得します。

POST http://localhost:3000/update_in_service?btn_id=btn0&id=29&in_service=false 500    (Internal Server Error)                          jquery.js?body=1:8725
send                           jquery.js?body=1:8725
jQuery.extend.ajax                           jquery.js?body=1:8155
$.rails.rails.ajax                           jquery_ujs.js?body=1:73
$.rails.rails.handleRemote                           jquery_ujs.js?body=1:149
(anonymous function)                           jquery_ujs.js?body=1:299
jQuery.event.dispatch                           jquery.js?body=1:5117
elemData.handle                           jquery.js?body=1:4788

および Web サーバーログ:

Completed 400 Bad Request in 10ms

ActionController::ParameterMissing - param not found: tool:

Rails 4で強力なパラメーターを使用しているため、必要な :tool パラメーターを取得できなくなったようです。すべてのデータ側は私の古いコードの下で機能していました.唯一起こっていなかったのは、要素のcssスタイルのjavascriptの更新でした. コードを元に戻し、ドロップダウンメニューをクリックすると、Web サーバーに次のように表示されます。

Started POST "/update_in_service?id=29" for 127.0.0.1 at 2013-08-29 10:28:11 -0700
Processing by ToolsController#in_service as JS
Parameters: {"id"=>"29"}
Tool Load (0.5ms)  SELECT "tools".* FROM "tools" WHERE "tools"."id" = $1 LIMIT 1  [["id", "29"]]
(0.2ms)  BEGIN
SQL (0.7ms)  UPDATE "tools" SET "in_service" = $1, "updated_at" = $2 WHERE "tools"."id" = 29  [["in_service", true], ["updated_at", Thu, 29 Aug 2013 10:28:11 PDT -07:00]]
(1245.5ms)  COMMIT
Rendered tools/in_service.js.erb (0.6ms)
Completed 200 OK in 1266ms (Views: 6.1ms | ActiveRecord: 1249.5ms)

.js.erb ファイルを変更して、ボタンの 1 つを ID で直接ターゲットにして、セレクターの問題ではないことを確認しました。

$('#btn7').addClass('.btn-success').removeClass('.btn-warning');

ブートストラップまたはレールで、ブートストラップドロップダウンで JS が実行されないようにする何かに関するリンクを見ましたが、まだリンクを見つけようとしています。これまでご協力いただきありがとうございました。

score 2 · Accepted Answer

だから私は最終的にこれを理解しました。重要なのは、ワークフローをダウンさせることでした。コントローラーのメソッドに:remote => true接続し、それが最終的に呼び出すファイルを呼び出します。また、Bootstrap で作業する場合は、ブートストラップコードの一部を別の div にラップするのではなく、既存のものを置き換えてターゲットにするのがおそらく最善であることもわかりました。それについてはわかりませんが、それは重要なようでした。動作したコードは次のとおりです。toggle_in_servicetoggle_in_service.js.erbtoggle_button.html.erb<div>

dashboard.html.erb ビュースニペット:

 <% status_link = tool.in_service ? "Put Out of Service" : "Put In Service" %>
 <% button_link = "#{tool.location}-#{tool.name.singularize}"+'<br>'+" #{tool.serial}" %>
 <div class="btn-group" id="btn<%= tool.id %>" >

    <a class="btn custombutton dropdown-toggle <%= (tool.in_service  ? 'btn-success' : 'btn-warning') %>" data-toggle="dropdown" href="#"  >
      <%=  raw(button_link) %>
    </a>

    <ul class="dropdown-menu">
      <li><%= link_to status_link, toggle_in_service_path(:id => tool.id), :method => :post, :remote => true %></li>
      <li><%= link_to "view Details", tool_path(tool.id) %></li>
    </ul>
 </div>

これにより、ツールのステータスによって色分けされたボタンにアタッチされた Bootstrap ドロップダウンメニューが作成されます。

ドロップダウンメニューの最初のリンクは、コントローラへのリモート ajax 呼び出しでtoggle_in_service、tool.id パラメータを渡します。コントローラメソッドは次のようになります。

def toggle_in_service
   status_change = @tool.in_service ? false : true
   @tool.update(:in_service => status_change)
   respond_to do |format|
     format.html { redirect_to(@tool) }
     format.js
  end
end

tool.in_service のブール値が反転され、次のように呼び出されますtoggle_in_service.js.erb。

<% btn_id = "btn#{@tool.id}" %>

$('#<%=btn_id%>').html('<%= escape_javascript(render :partial => "toggle_button") %>');

_toggle_button.html.erbパーシャルのAJAXレンダリングはどれですか：

<% button_link = "#{@tool.location}-#{@tool.name.singularize}"+'<br>'+" #{@tool.serial}" %>
<% status_link = @tool.in_service ? "Put Out of Service" : "Put In Service" %>

<a class="btn custombutton dropdown-toggle <%= (@tool.in_service  ? 'btn-success' : 'btn-warning') %>" data-toggle="dropdown" href="#"  >
  <%=  raw(button_link) %>
</a>
<ul class="dropdown-menu">
  <li><%= link_to status_link, toggle_in_service_path(:id => @tool.id), :method => :post, :remote => true %></li>
  <li><%= link_to "view Details", tool_path(@tool.id) %></li>
</ul>

よく働く！ドロップダウンとボタン全体divが AJAX によって更新されます。誰かが似たようなものを探している場合に備えて、これを投稿しています。Web や Stack Overflow で何時間も検索しましたが、必要なものが見つかりませんでした。Rails AJAX を読んで、何が間違っていたのかを突き止めました。

score 1 · Accepted Answer

おそらくこれは答えではありませんが、私は私の提案をします。まず第一に、同じことをする 2 つのアクションは必要ありません。これを試して

コントローラ

def in_service
 @tool.update(:in_service => params[:in_service])
 @success = params[:in_service]
 respond_to do |format|
   format.html { redirect_to(root_path) }
   format.js
   end
end

ビューでクエリにパラメータを追加

意見

<ul class="dropdown-menu">
    <li><a data-method="post" data-remote="true" href="/update_in_service?id=32&in_service=true" id="in_service" rel="nofollow">In Service</a></li>
    <li><a data-method="post" data-remote="true" href="/update_in_service?id=32&in_service=false" id="out_service" rel="nofollow">Out of Service</a></li>
    <li><a href="/tools/32">view Details</a></li>
</ul>

ajax バインディングをリッスンする必要はありません

js.erb

<% if @success %>
  $('.btn').addClass('.btn-success').removeClass('.btn-warning');
<% else %>
    $('.btn').addClass('.btn-warning').removeClass('.btn-success');
<% end %>

javascript - Twitter Bootstrap Rails ボタンのドロップダウンが AJAX に応答しない

2 に答える 2

Related

Reference