Ajax Call с использованием jQuery в приложении Rails

Question

У меня уже есть форма с обычным сообщением HTTP.Теперь я хочу переписать эту форму с помощью запроса jQuery Ajax.Вот что у меня есть:

register_user.html.erb

<%= form_tag :action=> "register_user" %>
                               <label for="user_id_1">user_id_1:</label><br/>
                               <%= text_field "user", "user_id_1", :size => 20 %> 
                               <label for="user_id_2">user_id_2:</label><br/>
                               <%= text_field "user", "user_id_2", :size => 20 %>
<%= submit_tag "Submit" %>

users_controller.rb

def register_user

   #do something

end

Итак, я пытался следовать этому руководству, но не смог следовать тем же инструкциям в своем приложении.Так какие-нибудь предложения?Как я могу сделать вызов jQuery Ajax, используя вышеуказанную форму?

AFAIK, файл application.js (файл, включенный в заголовок register_user.html.rb) будет

jQuery.ajaxSetup({ 
  'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")}
})

jQuery.fn.submitWithAjax = function() {
  this.submit(function() {
    $.post(this.action, $(this).serialize(), null, "script");
    return false;
  })
  return this;
};

$(document).ready(function() {
  $("#new_review").submitWithAjax(); #WHAT SHOULD REPLACE #new_review?
})

Но как я могу связать действие отправки с формой?Я новичок в JS, jQuery и Rails.

ОБНОВЛЕНИЕ 1

Rails 2.3.8

ОБНОВЛЕНИЕ 2

<%= form_tag :action=> "register_user" , :html => {:id => "register_user" }%>

1. Запрос не идет по методу jQuery.fn.submitWithAjax = function() { }.

2. Как отобразить данные @final_value на той же странице?

На данный момент это мой код для отображения значения (в register_user.html.erb):

    <%=
    if @final_value != nil
        "<h2>The Output is " + @final_value.to_s</h2>" + 
    end
     %>

Спасибо за отличную помощь, ребята!

Answer 1

Вы на рельсах 3? Rails3 поддерживает ненавязчивый JavaScript (UJS). Посмотрите на файл public / javascripts / rails.js

Как это работает?

Чтобы создать удаленную форму, сделайте следующее:

<%= form_tag :action=> "register_user", :remote => true %>

это добавляет атрибут data-remote к вашей форме.

Теперь UJS, встроенный в рельсы, подключается и выполняет для вас функцию отправки. Это запускает события как:

ajax: до, ajax: завершено, ajax: успешно, ajax: сбой, ajax: после

Rails по умолчанию использует прототип, а не jQuery, так что вы можете (не обязательно) заменять прототип на jQuery. Читать http://www.railsinside.com/tips/451-howto-unobtrusive-javascript-with-rails-3.html

Важной частью сейчас является то, что вы можете отслеживать эти события в своей форме! Дайте вашей форме идентификатор для ее идентификации:

<%= form_tag :action=> "register_user", :remote => true, :html => { :id => 'myform' } %>

Теперь перехватите события (с помощью jQuery) следующим образом:

jQuery(document).ready(function() {
    jQuery('#myform').bind('ajax:complete', '', function(request) {
        alert("I got: " + request.responseText);
    });
});

вы также можете перехватывать другие события, такие как ajax: сбой и т. Д.

Редактировать

Для Rails 2.3.8 (убедитесь, что вы включили js-файлы rails по умолчанию)

Примечание Если вы хотите использовать только jquery и удалить стандартную библиотеку прототипов, вы можете использовать jRails (заменяет прототип на jQuery): http://github.com/aaronchi/jrails

Я не знаю, какое у вас @final_value, поэтому я сделал общий пример:

На ваш взгляд:

<h2 id="myoutput">
  <% if @final_value != nil %>
    <%= @final_value.to_s %>
  <% end %>
</h2>


<% form_remote_tag :url => { :action=> "register_user" } do %>

  <label for="user_id_1">user_id_1:</label><br/>
  <%= text_field "user", "user_id_1", :size => 20 %> 
  <label for="user_id_2">user_id_2:</label><br/>
  <%= text_field "user", "user_id_2", :size => 20 %>

  <%= submit_tag "Submit" %>

<% end %>

В вашем контроллере:

def register_user

  form_data = params['user']

  if form_data.is_a?(Hash)
    @final_value = form_data['user_id_1']
  end

  respond_to do |format|
    format.html
    format.js do

      render :update do |page|
        page.replace_html 'myoutput', @final_value
        page.visual_effect :highlight, 'myoutput'
      end

    end
end

Answer 2

Дайте вашей форме идентификатор, например:

<%= form_tag :action=> "register_user", :html => {:id => "form_name" } %>

, а затем в вашем application.js вы замените #new_review идентификатором формы:

$(document).ready(function() {
  $("#form_name").submitWithAjax();
})

[ОБНОВЛЕНИЕ: view]

Вы должны добавить файл с именем register_user.js.erb, который должен содержать JavaScript, необходимый для отображения того, что вы хотите показать.Так что этот javascript будет выполнен и изменит страницу.И в javascript вы используете представление, которое у вас сейчас есть.

Так что вы должны что-то вроде:

!= "$('#placeholder').replaceWith('#{escape_javascript(render :partial => 'render_user')}')"

Чтобы это работало, у вас должен быть какой-то элемент HTML, например DIV с id=placeholder (конечно, выберите подходящее для вас имя).