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>

这工作正常。myModaldiv 标签由正确的值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），除了部分。它没有正确渲染。

地图.js.erb 

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

_details.html.erb

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

地图.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

您无法.js使用 JSON 加载 rails 文件 - 您必须.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 回答