AJAX调用不工作在rails 3中

Question

我想让我的AJAX调用与rails 3工作，但我很希望困惑。 我有一个索引页，其中列出了一个小表中的所有对象，并在其后面有一个详细链接。该HAML页面看起来是这样的：

%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>wouter.dewanckel@tenforce.com</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中...

Answer 1

感谢所有的反馈人员，但我设法得到它在我的一个朋友的帮助下排序。

在控制器我有以下代码：

此加载所有我所需要的数据并呈现的局部视图。该命令的其余部分执行我需要的魔法，并触发JavaScript更新事物。我个人觉得这种方法很容易理解。

Answer 2

与= "$('details').html(#{@data});"代码在HAML中被转义。

使用!= "$('details').html(#{@data});"然后代码应该执行并替换内容。

但是我不确定'details'是否是正确的选择器。据我所知，如果它是一个ID，你应该使用'#details'。

Answer 3

我想你会发现，当你将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中移除的原因是：当您在服务器端代码和前端代码之间创建这些不必要的连接时，会让您的应用程序变得更脆弱并且难以维护。您的控制器不应该依赖于您的模板中的标记。