AJAX调用不工作在rails 3中
我想让我的AJAX调用与rails 3工作,但我很希望困惑。 我有一个索引页,其中列出了一个小表中的所有对象,并在其后面有一个详细链接。该HAML页面看起来是这样的:AJAX调用不工作在rails 3中
%h1
Step 1: Create/upload your CV
#europasslogo
%table.index
%tr
%th.bottom_border= 'CV ID'
%th.bottom_border= 'CV Title'
%th.bottom_border= 'Links'
- @cvs.each do |cv|
%tr
%td.cell= cv.id
%td.cell= cv.name
%td.cell
= link_to 'Matching', match_resume_url(cv.id)
= link_to "Details", cv_path(cv.id), {:remote => true, :method => :get}
.clear
#details
它,当用户点击“详细信息”链接,响应需要的想法在底部的#details DIV来显示。这是非常基本的,因为我只想在该div中输出一个CV作为纯文本。
在我的控制器中我已经创建了以下内容:
class CvsController < ApplicationController
def new
@cvs = Cv.all
end
def show
cv = Cv.find params[:id]
@data = IO.readlines("public/cvs/#{cv.id}.xml", "").to_s
render :layout => false
end
def match
@cv = Cv.find params[:id]
@language = Language.find_or_create_by_code :en
@vacancies = Vacancy.joins(:vacancy_occupations).where('vacancy_occupations.concept_id' => @cv.occupations.collect{|o| o.id}).uniq
end
end
获取的简历和读取匹配的文件。迄今为止没有特别的。 当我打开网页,我点击链接,我看到了AJAX请求击中服务器,像这样:
Started GET "/cvs/2" for 192.168.33.82 at Fri May 13 00:55:49 -0700 2011
Processing by CvsController#show as JS
Parameters: {"id"=>"2"}
Cv Load (0.1ms) SELECT `cvs`.* FROM `cvs` WHERE `cvs`.`id` = 2 LIMIT 1
Rendered cvs/show.js.haml (2.1ms)
Completed 200 OK in 69ms (Views: 4.3ms | ActiveRecord: 0.1ms)
所以我知道AJAX调用由服务器接收并产生响应。使用Firebug,我可以看到服务器在控制台中的响应:
$('details').html(<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="http://europass.cedefop.europa.eu/xml/cv_en_GB.xsl" type="text/xsl"?>
<europass:learnerinfo xsi:schemaLocation="http://europass.cedefop.europa.eu/Europass/V2.0 http://europass.cedefop.europa.eu/xml/EuropassSchema_V2.0.xsd" xmlns:europass="http://europass.cedefop.europa.eu/Europass/V2.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" locale="en_GB">
<docinfo>
<issuedate>2011-05-05T11:31:55+02:00</issuedate>
<xsdversion>V2.0</xsdversion>
<comment>Automatically generated Europass CV</comment></docinfo>
<prefs>
<field name="step1.firstName" before="step1.lastName"></field>
<field name="step1.addressInfo" keep="true"></field>
<field name="step1.telephone" keep="false"></field>
<field name="step1.mobile" keep="false"></field>
<field name="step1.fax" keep="false"></field>
<field name="step1.email" keep="true"></field>
<field name="step1.nationality" keep="true"></field>
<field name="step1.birthDate" keep="true" format="/numeric/long"></field>
<field name="step1.gender" keep="true"></field>
<field name="step1.photo" keep="false"></field>
<field name="step1.application.label" keep="true"></field>
<field format="/numeric/long" name="step3List[0].period"></field>
<field name="step3List" keep="true" before="step4List"></field>
<field keep="false" name="step3List[0].company.sector.label"></field>
<field keep="false" name="step3List[0].company.addressInfo"></field>
<field keep="false" name="step3List[0].company.name"></field>
<field keep="true" name="step3List[0].activities"></field>
<field keep="true" name="step3List[0].position.label"></field>
<field name="step4List" keep="false"></field>
<field name="step5.motherLanguages" keep="false"></field>
<field name="step5.foreignLanguageList" keep="false"></field>
<field name="step6.socialSkills" keep="false"></field>
<field name="step6.organisationalSkills" keep="false"></field>
<field name="step6.technicalSkills" keep="false"></field>
<field name="step6.computerSkills" keep="false"></field>
<field name="step6.artisticSkills" keep="false"></field>
<field name="step6.otherSkills" keep="false"></field>
<field name="step6.drivingLicences" keep="false"></field>
<field name="step7.additionalInfo" keep="false"></field>
<field name="step7.annexes" keep="false"></field>
<field name="grid" keep="false"></field></prefs>
<identification>
<firstname>Wouter</firstname>
<lastname>ESCOmatch</lastname>
<contactinfo>
<address>
<addressLine>Haachtstesteenweg</addressLine>
<municipality>Kampenhout</municipality>
<postalCode>1910</postalCode>
<country>
<label>BElgium</label></country></address>
<telephone></telephone>
<fax></fax>
<mobile></mobile>
<email>[email protected]</email></contactinfo>
<demographics>
<birthdate>1975-01-26</birthdate>
<gender>M</gender>
<nationality>
<label>belgium</label></nationality></demographics></identification>
<application>
<code>71110</code>
<label>Miner</label></application>
<workexperiencelist>
<workexperience>
<period>
<from>
<year>2000</year>
<month>--02</month>
<day>---02</day>
</from>
<to>
<year>2004</year>
<month>--02</month>
<day>---02</day>
</to>
</period>
<position>
<code>82121</code>
<label>Quartermaster staff, military</label>
</position>
<activities>
process control
diving
military
</activities>
<employer>
<name></name>
<address>
<addressLine></addressLine>
<municipality></municipality>
<postalCode></postalCode>
<country>
<label></label>
</country>
</address>
<sector>
<label></label>
</sector>
</employer>
</workexperience>
</workexperiencelist>
<languagelist>
<language xsi:type="europass:mother">
<label> </label></language></languagelist>
<skilllist>
<skill type="social"></skill>
<skill type="organisational"></skill>
<skill type="technical"></skill>
<skill type="computer"></skill>
<skill type="artistic"></skill>
<skill type="other"></skill>
<structured-skill xsi:type="europass:driving"></structured-skill></skilllist>
<misclist>
<misc type="additional"></misc>
<misc type="annexes"></misc></misclist></europass:learnerinfo>);
对不起,但文件相当大。所以我看到很多Javascript beeing生成。 show.js.haml文件如下所示:
= "$('details').html(#{@data});"
我做错了什么?我不是很擅长这个JavaScript的东西,但我所问的不是那么难吗? 所有我想要的是,当我点击链接时,@data变量中的所有内容都放置在我的详细信息div中...
感谢所有的反馈人员,但我设法得到它在我的一个朋友的帮助下排序。
在控制器我有以下代码:
此加载所有我所需要的数据并呈现的局部视图。该命令的其余部分执行我需要的魔法,并触发JavaScript更新事物。我个人觉得这种方法很容易理解。
与= "$('details').html(#{@data});"
代码在HAML中被转义。
使用!= "$('details').html(#{@data});"
然后代码应该执行并替换内容。
但是我不确定'details'是否是正确的选择器。据我所知,如果它是一个ID,你应该使用'#details'。
我想你会发现,当你将JS从服务器端代码中分离出来,并且从来没有遇到过这样的麻烦时,你会发现更少的麻烦。您的控制器基本上只是读取文件并将其加载到页面上。我们能做到这一点完全JS:
CV链接
= link_to "Details", cv_path(cv.id), :'data-cv-id' => cv.id
JS wireup
$('table.index').delegate('a[data-cv-id]', 'click', function (e) {
var id = $(e.target).data('cv-id');
$.ajax({
type: 'GET',
url: '/cv/' + id + '.xml',
dataType: 'xml',
success: function (xml) {
$('#detail').html(xml);
}
});
e.preventDefault();
});
(无耻的插头)我jquery plugin可以更轻松地进行:
$('table.index').delegate('a[data-cv-id]', 'click', function (e) {
$.read('/cv/{id}.xml', { id: $(e.target).data('cv-id') })
.then(function (xml) {
$('#details').html(xml);
});
e.preventDefault();
});
JS接线 - 原型
下面是使用Prototype的示例。js
var table = $$('table.index')[0];
$(table).on('a[data-cv-id]', 'click', function (event, element) {
new Ajax.Request('/cv/' + event.getAttribute('data-cv-id') + '.xml', {
method: 'get',
onSuccess: function (transport) {
//do something with transport.responseXML
//not sure how to write Prototype code for this bit
}
});
Event.stop(event);
});
您可以更进一步,将请求/提示问题与amplify.request分开。另外看看JS模板系统,如Handlebars。
我知道它很容易将Rails模板与Javascript结合起来...但是根据我的经验,这真的没有什么用处。将控制器编写为JSON/XML服务API并在Javascript中执行请求/模板化的数据会更容易。
RJS从Rails中移除的原因是:当您在服务器端代码和前端代码之间创建这些不必要的连接时,会让您的应用程序变得更脆弱并且难以维护。您的控制器不应该依赖于您的模板中的标记。
原始文章看起来像jQuery,但现在看起来它可能是Prototype/RJS。我的代码是在jQuery中。 – 2011-05-13 09:07:39
原来是原型是。对不起,没有提到这一点 – 2011-05-15 08:04:05
没有这样的函数.to_html。而且响应如何格式化并不重要。我只是想得到什么是返回可见我的div元素 – 2011-05-13 08:16:53
什么是'细节'?它是一个类还是一个id?它似乎是错误的选择。如果'details'是一个id,那么尝试$('#details')如果它是一个类,请尝试$('。details')。我没有进入HAML,但你应该可以添加一个id为':id =>'details' – 2011-05-13 08:21:50
这是一个ID。按照您在show.js.haml文件中所述更改它,但仍然没有任何内容 – 2011-05-13 08:24:00