Javascript AJAX调用在rails 3中不起作用

我试图让我的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').html(#{@data});"

其想法是，当用户单击“详细信息”链接时，响应需要显示在底部的#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调用并生成响应。使用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被生成。show.js.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').html(#{@data});"

我做错什么了吗？我并不擅长javascript，但我要问的不会那么难吧？ 我只想在单击链接时，@data变量中的所有内容都放在我的details div.

中，

=“$（'details'）.html（#{@data}）；”

代码在HAML中转义

使用

！=“$（'details'）.html（#{@data}）；”

然后应该执行代码并替换内容

---

然而，我不确定“细节”是否是正确的选择。据我所知，如果它是一个ID，你应该使用“#details”。

我想你会发现，当你将JS与服务器端代码分离时，麻烦会少很多，而且两者永远不会相遇。控制器基本上只是读取一个文件并将其加载到页面上。我们完全可以在JS中实现这一点：

简历链接

= 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();
});

（无耻插头）my可以让这更容易：

$('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 wireup-原型

下面是一个使用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);
});

您可以更进一步，将请求/呈现关注点与分离。还可以看看JS模板系统，如

我知道将Rails模板与Javascript结合起来很有诱惑力。。。但以我的经验来看，这从来都不起作用。将控制器编写为JSON/XML服务API和使用Javascript进行数据请求/模板化更容易

---

RJS被从Rails中删除是有原因的：当您在服务器端和前端代码之间创建这种不必要的连接时，您的应用程序会变得更加脆弱，并且随着时间的推移，很难维护。您的控制器不应该依赖于模板中的标记。

感谢所有的反馈人员，但我在一位朋友的帮助下成功地将其排序

在控制器中，我有以下代码：

@cv = Cv.find params[:id]
doc = REXML::Document.new File.open "public/cvs/#{@cv.id}.xml"
@data = REXML::XPath.first(doc.root, "identification").text
@data << REXML::XPath.first(doc.root, "application").text
@data << REXML::XPath.first(doc.root, "workexperiencelist").text

# Render the partial
render(:update) { |page| page.replace_html 'details', :partial => 'cvs/show', :layout => false}

@cv=cv.find参数[：id]
doc=REXML:：Document.new File.open“public/cvs/#{@cv.id}.xml”
@data=REXML:：XPath.first（doc.root，“identification”）.text
@数据错误}

---

这将加载我需要的所有数据并呈现局部视图。命令的其余部分发挥了我所需要的魔力，并触发javascript来更新内容。我个人觉得这种方法更容易理解。

没有这样的功能。要使用html。而响应的格式并不重要。我只想让返回的内容在我的div元素中可见什么是“细节”？它是一个类还是一个id？这似乎是错误的选择。如果'details'是一个id，那么尝试$（'details'）如果它是一个类，那么尝试$（'details'）。我不喜欢HAML，但您应该可以添加一个id，其中包含“：id=>”details“这是一个id。正如您在show.js.HAML文件中所说的那样对其进行了更改，但仍然没有更改原始帖子看起来像jQuery，但现在看起来可能是Prototype/RJS。我的代码在jQuery中。原版是原型是的。很抱歉没有提到这一点