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中移除的原因是：當您在服務器端代碼和前端代碼之間創建這些不必要的連接時，會讓您的應用程序變得更脆弱並且難以維護。您的控制器不應該依賴於您的模板中的標記。