0

私は持っている： 

<p id="click">Click here</p>

コントローラで: 

@details=Family.find_by(famid: params[:famid])
respond_to do |format|
   format.html
   format.json {render :json => @details}
end

と：

$('#click').on('click',function(){
 $.ajax({
          type: "GET",
          data: 'famid='+id,
          dataType: "json",
          url: "/map",
          success: function(data){                
            document.getElementById('myModal').innerHTML = data.famid
          }
      });
}  

<div id="myModal"></div>

これはうまくいきます。div タグにはmyModal正しいfamid値が入力されます。しかし、ajaxを介してコントローラーにデータを投稿し、データベースにクエリを実行して、代わりに変数を使用し@detailsたいだけです。だから私は試しました：

$('#click').on('click',function(){
     $.ajax({
              type: "POST",
              data: 'famid='+id,
              dataType: "json",   //do I need this? should it be html?
              url: "/map"  
          });
    }

@details今、私は次のような変数 を使用したいと思います:

<div id="#myModal"> <%= @details.famid %> </div>

それ、どうやったら出来るの？

更新: わかりました、私は次のことをしましたが、部分的なものを除いてすべて正常に動作します(@Rich & @NitinJのおかげです)。正しくレンダリングされていません。

map.js.erb 

$("#myModal").html("<%= escape_javascript(render(@details))%>");

_details.html.erb

<h3><%= @details.famid %></h3>

map.html.erb 

    <div id="myModal">
      <%= render @details %>
    </div>

更新：

パーシャルがブラウザ コンソールで正しくレンダリングされるようになりました。#myModaldiv が正しく設定されていることがわかります。しかし、それはブラウザコンソールにのみ表示され、map.html.erbページには表示されません. ここで何が問題なのですか？

4

2 に答える 2

2

アヤックス

$('#click').on('click',function(){
     $.ajax({
         type: "POST",
         data: {famid: id}, //you need to serialize your data
         dataType: "json",   //do I need this? should it be html?
         url: "/map"  
     });
}

AJAX は非常に単純です。ユーザーに代わってリクエストを送信します。この$.ajax関数は JQuery からのものであるため、正しく行うには、正しい引数を渡すだけです。

ルート

#config/routes.rb
post "map", to: "your_controller#map"

POST(ではなく) リクエストを送信しているため、GETリクエストを処理するためのルートが必要になります。に送信しているので/map、そのリクエストをキャッチして適切なコントローラーに送信することを確認する必要があります

コントローラ

#app/controllers/your_controller.rb
def map
   @details = Family.find_by(famid: params[:famid])
   respond_to do |format|
       format.html
       format.json {render :json => @details} 
   end
end

応答

JSON を扱っているため、次のように、ビューで直接応答を処理するのが最善だと思います。

$('#click').on('click',function(){
     $.ajax({
         type: "POST",
         data: {famid: id}, //you need to serialize your data
         dataType: "json",   //do I need this? should it be html?
         url: "/map",
         success: function(data) {
             details = jQuery.parseJSON(data)
             $('#modal_body').html(details.famid);
         }
     });
}

私の知る限りでは、JSON はデータを簡潔に (可能な限り可動部分を少なくして) 渡すことを目的としているため、常に Ajax 要求からの JSON 応答を処理します。別ファイルではなく

jQuery.parseJSON関数を使用してこれを処理し、ページに追加できるオブジェクトを作成できます。

アップデート

あなたの問題はあなたが使用していることだと思いますJSON

.jsRailsファイルを JSON でロードすることはできません。ロードする.json.erbか、フロントエンド ビューで処理する必要があります。リクエストを標準の JS に変更したい場合があります。

#JS
$('#click').on('click',function(){
 $.ajax({
          type: "POST",
          data: {famid: id},
          url: "/map"
      });
}  

 #Controller
 def map
    @details = Family.find_by(famid: params[:famid])
    respond_to do |format|
       format.js
       format.html
    end
 end

 #app/views/controller/map.js.erb
 $("#myModal").html("<%=j render(@details) %>");
于 2014-01-04T12:30:10.430 に答える
1

このテンプレートをレンダリングするには、js.erb テンプレートを作成する必要があります。*.js.erb テンプレートでこの変数にアクセスできるようになりました

alert("<%=@details.famid%>")

pタグのテキストを更新することもできます

$("modal-body").text("<%=@details.famid%>")
于 2014-01-04T07:21:26.467 に答える