首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >Rails AJAX部分呈现不正确

Rails AJAX部分呈现不正确
EN

Stack Overflow用户
提问于 2014-01-03 23:11:59
回答 2查看 1.4K关注 0票数 0

我有:

代码语言:javascript
运行
AI代码解释
复制
<p id="click">Click here</p> 

在主计长中:

代码语言:javascript
运行
AI代码解释
复制
@details=Family.find_by(famid: params[:famid])
respond_to do |format|
   format.html
   format.json {render :json => @details}
end

以及:

代码语言:javascript
运行
AI代码解释
复制
$('#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>  

,这很好用。myModal famid div标记由正确的famid值填充。但是我只想通过ajax将数据发布到控制器,并查询数据库和,而不是使用变量。

代码语言:javascript
运行
AI代码解释
复制
$('#click').on('click',function(){
     $.ajax({
              type: "POST",
              data: 'famid='+id,
              dataType: "json",   //do I need this? should it be html?
              url: "/map"  
          });
    }  

现在,我想使用@details变量,如:

代码语言:javascript
运行
AI代码解释
复制
<div id="#myModal"> <%= @details.famid %> </div>

我该怎么做?

更新: Ok,我做了以下工作,一切都很好(感谢@Rich & @NitinJ),除了部分。它没有被正确渲染。

map.js.erb

代码语言:javascript
运行
AI代码解释
复制
$("#myModal").html("<%= escape_javascript(render(@details))%>");  

_details.html.erb

代码语言:javascript
运行
AI代码解释
复制
<h3><%= @details.famid %></h3>  

map.html.erb

代码语言:javascript
运行
AI代码解释
复制
    <div id="myModal">
      <%= render @details %>
    </div>  

更新:

现在,部分在浏览器控制台中正确呈现。我可以看到正确地填充了#myModal div。但是它只显示在浏览器控制台中,而不显示在map.html.erb页面上。这里怎么了?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-01-04 04:30:10

Ajax

代码语言:javascript
运行
AI代码解释
复制
$('#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,因此要使其正确,只需将正确的参数传递给它

路由

代码语言:javascript
运行
AI代码解释
复制
#config/routes.rb
post "map", to: "your_controller#map"

因为您发送的是POST请求(而不是GET),所以需要一个处理请求的路径。由于您要发送到/map,您需要确保您将捕获该请求&发送到正确的控制器

控制器

代码语言:javascript
运行
AI代码解释
复制
#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,所以我相信您最好直接处理视图中的响应,如下所示:

代码语言:javascript
运行
AI代码解释
复制
$('#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

您不能用JSON加载rails .js文件--您必须加载.json.erb,或者在前端视图中加载进程。您可能希望将请求更改为标准JS:

代码语言:javascript
运行
AI代码解释
复制
#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) %>");  
票数 2
EN

Stack Overflow用户

发布于 2014-01-03 23:21:26

您必须创建一个js.erb模板,而不是呈现此模板。现在您可以在*.js.erb模板中访问这个变量了。

代码语言:javascript
运行
AI代码解释
复制
alert("<%=@details.famid%>")

您还可以通过以下方式更新p标记的文本

代码语言:javascript
运行
AI代码解释
复制
$("modal-body").text("<%=@details.famid%>")
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/20918138

复制
相关文章
使用VBA将图片从一个工作表移动到另一个工作表
今天跟大家分享的技巧来自thesmallman.com,一个分享Excel技巧技术的网站。
fanjy
2022/11/16
4.1K0
使用VBA将图片从一个工作表移动到另一个工作表
从工作表函数到DAX!
👆关注“博文视点Broadview”,获取更多书讯 作者:ExcelHome创始人周庆麟 来源:《DAX权威指南》推荐序 在ExcelHome技术论坛上,经常会有这样的讨论话题:你希望下一个版本的Excel增加什么功能? 在2006年以前,很多人都说,希望Excel能提高单表处理数据的数量上限,最好能像Access那样可以建立多表查询。 自Excel 2007问世后,单表处理数据的量,从65,536行增加到了1,048,576行。 于是,很多人表示相当满意,但还是有一些人表示,只是简单增加单表的行数不够
博文视点Broadview
2023/05/06
1K0
从工作表函数到DAX!
Java从Object取值
在我们进行springboot的model、view、controller方式进行的时候,常常会遇到需要从请求的参数中去除具体值的业务,下面我们就提供了一种Java从Object对象中解析出对象属性和对象值之后并转换为实体的过程,示例代码如下:
问问计算机
2021/05/08
3.3K0
VBA实战技巧29:从一个工作表复制数据到另一个工作表
今天演示一个简单的例子,也是经常看到网友问的问题,将一个工作表中的数据复制到另一个工作表。
fanjy
2021/07/30
25.8K1
loadrunner动态从mysql取值
loadrunner动态从mysql取值 [需要下载跟数据库服务器一致的dll,32位或64位]
流柯
2018/08/31
9910
Excel应用实践16:搜索工作表指定列范围中的数据并将其复制到另一个工作表中
“在工作表Sheet1中存储着数据,现在想要在该工作表的第O列至第T列中搜索指定的数据,如果发现,则将该数据所在行复制到工作表Sheet2中。
fanjy
2019/07/19
6.3K0
yhd-VBA从一个工作簿的某工作表中查找符合条件的数据插入到另一个工作簿的某工作表中
【问题】我们在工作中有时要在某个文件(工作簿)中查找一些数据,提取出来。常用的方法是打开文件,来查找,再复制保存起来。如果数据少还是手工可以的,如果数据多了可能就。。。。
哆哆Excel
2022/10/31
5.7K0
python合并工作表 VS excel合并工作表,看看合并工作表哪家强!
在日常办公工作中,我们可能会碰到多个或者几百上千个数据结构都相同 sheet工作表需要你进行合并汇总。而excel和python都能进行工作表的合并,那你知道他们两个的操作谁更为好用的吗?今天就分别介绍excel和python合并工作表的方法,看看合并工作表那家强!
Python与Excel之交
2021/08/05
1.7K0
错误:该行已经属于另一个表
从一个TABLE中取一行放到另一个TABLE里报错: 该行已经属于另一个表。的解决办法  用下面来个方法就OK了。   DataTable dt = new DataTable();   dt = ds.Tables["All"].Clone();//克隆All的结构传递给dt   DataRow[] dr=this.dataSet31.Tables["Product"].Select("bc=1"); //通过条件得到符合条件的行 for(int i=0;i<dr.Length;i++) { //将数组元
跟着阿笨一起玩NET
2018/09/18
8360
将一个工作表拆分为多个工作表
最近已经不止一次被人问到:怎么将一个工作表拆分为多个工作表?一般这样的需求,是因为将1-12月的数据写在了一个工作表上,而现在又想将它拆分为12个单独的工作表,每个工作表单独一个月份.总结了一下,文艺
但老师
2022/03/22
4.5K0
将一个工作表拆分为多个工作表
SQL 复制表到另一个表
 INSERT INTO targetTableName SELECT COLUMNS FROM sourceTableName;
星哥玩云
2022/08/18
9910
从N个数组分别取值,穷尽全部情况
有N个数组,每个数组元素不定,从每个数组都中取出一个,组成长度为N的序列,求穷尽序列的所有情况。
ZONGLYN
2019/08/08
8520
错误:该行已经属于另一个表
从一个TABLE中取一行放到另一个TABLE里报错: 该行已经属于另一个表。的解决办法 用下面来个方法就OK了。 DataTable dt = new DataTable(); dt = ds.Tables["All"].Clone();//克隆All的结构传递给dt DataRow[] dr=this.dataSet31.Tables["Product"].Select("bc=1"); //通过条件得到符合条件的行 for(int i=0;i<dr.Length;i++) { //将数组元素加入表.
hbbliyong
2018/03/05
7980
Java保护Excel工作簿和工作表
出于安全原因,你可能需要保护整个工作簿或工作表。 有时,你甚至可能还需要保护某个工作表,但却保留指定的单元格进行编辑。 本文将介绍如何使用Free Spire.XLS for Java来实现这些操作。
崔笑颜
2020/06/08
1.6K0
使用VBA合并工作表
从多个Excel工作表(子工作表)中获取信息,并用子工作表中的所有数据填充汇总工作表(父工作表),这是很多朋友会提到的常见要求。如果部分数据是从添加新工作表到工作簿中而增长的,那么获得这些数据的汇总非常方便,例如,添加单独的工作表,包含新月份的数据。
fanjy
2022/11/16
2K0
使用VBA合并工作表
Excel破解工作表保护
宏运行 Public Sub Password_cracking() Const DBLSPACE As String = vbNewLine & vbNewLine Const AUTHORS As String = DBLSPACE & vbNewLine & _ "" Const HEADER As String = "Password_cracking" Const VERSION As String = DBLSPACE & " Version 1.0"
步履不停凡
2019/09/11
9290
Worksheet工作表对象方法
两段代码中activate和select方法的结果相同。都是将workshets(1)工作表对象激活。
无言之月
2019/10/13
2.2K0
Worksheet工作表对象基础
大家好,前面介绍了最常用的单元格Range对象,本节开始介绍Worksheet工作表对象的相关内容(基础内容已有涉及),后续会再分别介绍它的属性、方法以及事件等内容。
无言之月
2019/10/13
2.7K0
Worksheet工作表对象属性
大家好,本节主要介绍工作表对象的相关属性。上节大部分已经涉及到,下面主要汇总复习下。
无言之月
2019/10/13
2.8K0
点击加载更多

相似问题

从另一个工作表中提取值之和。

23

从Excel工作表中提取值

21

从多个工作表中获取值

10

如何使循环从另一个工作表拉取值?

10

基于多个条件从另一个工作表提取值

213
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档