Вызов AJAX не работает в рельсах 3

Question

Я пытаюсь заставить мой вызов AJAX работать с рельсами 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.

В моем контроллере я создал следующее:

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

Получает CV и читает соответствующий файл,Пока ничего особенного.Когда я открываю страницу и нажимаю на ссылку, я вижу, что запрос 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.Файл show.js.haml выглядит следующим образом:

= "$('details').html(#{@data});"

Я что-то не так делаю?Я не очень хорош в этом JavaScript, но то, что я спрашиваю, не может быть таким сложным, верно?Все, что я хочу, это когда я нажимаю на ссылку, все, что находится внутри переменной @data, помещается в мои данные div ...

Answer 1

Я думаю, вы обнаружите, что гораздо меньше головной боли, когда вы отделяете 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 может сделать это еще проще:

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

Вы можете сделать этот шаг дальше и отделить запрос / представление проблем с помощью ampify.request . Также обратите внимание на системы шаблонов JS, такие как Handlebars .

Я знаю, что заманчиво комбинировать шаблоны Rails с Javascript ... но по моему опыту это никогда не сработало. Проще написать ваши контроллеры как API службы JSON / XML и выполнять запрос / шаблон данных в Javascript.

Существует причина, по которой RJS был удален из Rails: когда вы создаете такого рода ненужные соединения между серверным и внешним кодом, вы делаете свое приложение более хрупким и трудным в обслуживании с течением времени. Ваш контроллер не должен зависеть от разметки в ваших шаблонах.

Answer 2

При = "$('details').html(#{@data});" код экранируется в HAML.

Используйте != "$('details').html(#{@data});", тогда код должен быть выполнен и заменить содержимое.

Однако я не уверен, что «детали» - правильный выбор. Насколько я знаю, вы должны использовать '#details', если это ID.

Answer 3

Спасибо за все отзывы, ребята, но мне удалось разобрать его с некоторой помощью от моего друга.

В контроллере у меня есть следующий код:

@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}

Это загружает все нужные мне данные и частично отображает. Остальная часть команды выполняет магию, которая мне нужна, и запускает JavaScript для обновления. Я лично считаю, что этот подход намного легче понять.