ruby-on-rails - Ruby on Rails と json と jquery を使用してパーシャルをレンダリングする方法

Question

Ruby on Rails の初心者で、混乱してイライラしています :) 私はこれに 1 日以上費やしましたが、おそらく自分自身を混乱させただけだと思います。

基本的に、ビューでパーシャルをレンダリングしようとしています。ここに私が具体的に持っているものがあります: 2 つの基本フィールドを持つフォーム: カテゴリとサブカテゴリ。SubCategory は、ユーザーが Category で選択したものに応じて変化します。アセットパイプラインを有効にして「JQuery」を使用しています。この部分は機能します：

 
    contact_infos.js.coffee

    jQuery(document).ready(->
        $("select#contact_info_category_id").change(->
          id_value_string = $(@).val()
          if id_value_string == ""
            # if the id is empty remove all the sub_selection options from being selectable     and do not do any ajax
            $("select#contact_info_subcategory_id option").remove()
            row = "" + "" + ""
            $(row).appendTo("select#contact_info_subcategory_id")
          else
            # Send the request and update sub category dropdown
            tmp = '/subcategories/for_categoryid/' + id_value_string + '.json'
          $.ajax(
            type: 'GET',
            dataType: 'json',
            url: tmp,
            timeout: 2000,
            error: (XMLHttpRequest, errorTextStatus, error) -> alert "Failed to submit : " + errorTextStatus + " ;" + error,
              success: (data) ->
                # Clear all options from sub category select
                $("select#contact_info_subcategory_id option").remove()
                # put in a empty default line
                row = "" + "" + ""
                $(row).appendTo("select#contact_info_subcategory_id")
                # Fill sub category select
                $.each(data, (i, j) ->
                  row = "" + j.name + ""
                  $(row).appendTo("select#contact_info_subcategory_id")
                )
          )
        )
      )

json 応答を正しく生成します。

フォームが読み込まれると、Category と SubCategory に加えて、2 つのテキストフィールド (previous_value と current_value) も表示されます。ただし、SubCategory == "Full" の場合は、previous_value と current_value を非表示にし、新しいフィールドでパーシャルを挿入する必要があります。

JQuery で previous_value フィールドと current_value フィールドを非表示にしても問題はありませんが、次のようになります (これは上記のコードに挿入されています)。

$("select#contact_info_subcategory_id").change(->
    id_text_string = $("#contact_info_subcategory_id option:selected").text()
    if id_text_string == "Full"
      $('#contact_info_previous_value_id').hide()
      $('#contact_info_current_value_id').hide()
    else
      $('#contact_info_previous_value_id').show()
      $('#contact_info_current_value_id').show()
  )

SubCategory が「Full」の場合に新しいフィールドを挿入するフォームに「test」という div を作成しました。もちろん、この行を contact_infos.js.coffee に挿入しても機能しません。

  $('#test').html('<%= escape_javascript render("contact_infos/_full_name_info") %>')

ページに表示されるのは文字列 "<%= escape_javascript render("contact_infos/_full_name_info") %>" だけです

次のことを試しましたが、何も動作しません:
1. 次のコードで new.json.erb ファイルを作成します:

<% self.formats = ["html"] %>
      test = {
        "html":"<%= raw escape_javascript(render :partial =>     'contact_infos/full_name_info',
                    :content_type => 'text/html')} 
                %>"
      }

この json ファイルはトリガーされませんでした。私のコントローラーには次の行があります：

format.json { render json: @contact_info }

これはこれを行うための最良の方法ですか？はいの場合、次に何を試すことができますか?

2. 昨日、application.html.erb レイアウトファイルに JavaScript 変数 (fullnamefield と呼びました) を作成し、js 変数を私がした new.html.erb ビュー。また、contacts_infos.js.coffee に次の行を追加しました。

('#test').html(fullnamefield)

そしてそれは働いた!! それを除いて、サイトの他の領域に行ったときにエラーが発生しました.
3. 回避策として、jquery が生成する json を js に変更してから、new.js.erb をトリガーしようと考えました。ajax 呼び出しを変換しようとして問題が発生しました。「json」と「text」のデータタイプを作成できましたが、スクリプトは作成できませんでした（理由はわかりません）。

それで...アイデア/助けはありますか？私は本当に検索してきましたが、JQueryから必要に応じてすべてのフィールドと非表示を作成/表示することを検討しているだけで十分にイライラしています。これは実装が非常に簡単ですが、間違っています.

更新:試行 4 (または 40 ですか?):

あなたが書いたことを考えさせられました... 私は近づいていると思いますが、まだそこにはいません.

_form.html.erb で、サブカテゴリフィールド data-remote、data-url、および data-type に追加しました。

<div class="field">
      <%= f.label :category_id %>
      <br/>
      <%= collection_select(:contact_info, :category_id, Category.all, :id, :name, options ={:prompt => "--Select a Category--"}) %>
    </div>
    <div class="field">
      <%= f.label :subcategory_id %>
      <br/>
      <%= collection_select(:contact_info, :subcategory_id, Subcategory.find_all_by_category_id(@contact_info.category_id), :id, :name, options ={:prompt => "--Select a SubCategory"}, "data-remote" => true, "data-url" => "/contact_infos/get_full_fields", "data-type" => :json ) %>
    </div>

次に contact_infos_controller.rb に以下を追加しました:

def get_full_fields
    @full_name = FullName.new
    respond_to do |format|
      format.js
    end
  end

私の routes.rb で、コレクションを追加して contact_infos を変更しました...

    resources :contact_infos do
        collection do
          get 'get_full_fields'
        end
      end

contact_infos\get_full_fields.js.erb を作成しました:

var full_fields_form = $('<%= j(render(:partial => "contact_infos/full_name_info"))%>');
$('#test').html(full_fields_form);

デバッガーを使用してブラウザーでこれをテストし、SubCategory を "Full" に変更すると、正しく動作することがわかります (と思います)。

リクエスト URL:http://localhost:3000/contact_infos/get_full_fields?contact_info%5Bsubcategory_id%5D=3 リクエスト方法:GET ステータスコード:200 OK

「タイプ」は「text/javascript」と表示されています。[応答] タブには JavaScript コードが表示されているだけですが、何も起こっていません/トリガーされていません。だけ置いても

alert('hello');

js ファイルでは何も起こりません。

理由はありますか？

ruby-on-rails - Ruby on Rails と json と jquery を使用してパーシャルをレンダリングする方法

1 に答える 1

Related

Reference