Rails 3 Редактирование на месте

Question

Я пытаюсь реализовать редактирование на месте в приложении Rails 3, которое принимает отредактированное значение и пересматривает расчет на основе этого значения. Например:

Перед редактированием поля "кредиты для пожертвования":
У вас осталось 10 кредитов. Кредиты для пожертвования: 0.

После редактирования поля «Кредиты для пожертвования»:
У вас осталось 5 кредитов. Кредиты для пожертвования: 5.

Я рассмотрел различные варианты, и похоже, что jquery-in-place-editor делает то, что я ищу. Для справки:

• Код редактора jQuery-in-place
• Пример приложения Rails
• Приложение Github Repo Sample Rails

Демо работает. Но я думаю, что мне нужно использовать функцию обратного вызова для вызова сценария ruby, чтобы я мог еще немного обработать. Я не совсем уверен, что это то, что мне нужно делать, поэтому я ищу какое-то руководство.

Вот javascript jQuery (из / public / javascripts / application.js в приложении Sample), который, на мой взгляд, актуален:

// Using a callback function to update 2 divs
$("#editme4").editInPlace({
    callback: function(original_element, html, original){
        $("#updateDiv1").html("The original html was: " + original);
        $("#updateDiv2").html("The updated text is: " + html);
        return(html);
    }
});

Похоже, мне нужно взять original и html и немного поиграть с ними, а затем передать их обратно в соответствующие div. Вопрос в том, как мне это сделать? Я думаю о двух возможностях:

A. В редакторе jquery-in-place есть возможность вызывать URL. Могу ли я использовать это, чтобы вызвать скрипт ruby ​​и получить результат? Как бы я сделал это в рельсах? Вот код для вызова url (снова с /public/javascripts/application.js); но он вызывает скрипт php.

$("#editme1").editInPlace({
    // callback: function(unused, enteredText) { return enteredText; },
    url: 'server.php',
    show_buttons: true
});

B. Измените обновленный текст непосредственно в javascript и передайте его в соответствующие div. Я бы предпочел использовать скрипт ruby, но, возможно, это будет проще.

Answer 1

Решение этой проблемы довольно сложное, но я нашел способ сделать это. Меня удивляет, что решение недоступно, поскольку, как говорит r-dub, оно кажется довольно распространенным. В итоге я не использовал никакие средства редактирования на месте плагина jQuery и вместо этого изменил текстовое поле напрямую с помощью jQuery на основе текстового поля формы. Иными словами, я следовал (B) выше.

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

Available: <span id="available_cr"><%= @available_credits %></span>
Remaining: <span id="remaining_cr"><%= @remaining_credits %></span>

<%= form_for(@page, :html => { :id => 'do_fvalue' }, :remote => true) do |f| %>
  <div class="field">
    How many to buy at <%= @cost %> credits per unit? <%= f.text_field :fvalue, :autocomplete => :off %>
  </div>
  <div class="field">
    How many to buy at <%= @cost_20 %> credits per unit? <%= f.text_field :gvalue, :autocomplete => :off %>
  </div>
  <div class="actions">
    <%= f.submit "Update" %>
  </div>
<% end %>

Затем я вставляю переменные rails @ в партиал .html.erb (отображается в начале моей страницы .html.erb), чтобы javascript / jQuery мог получить к ним доступ:

<script type="text/javascript">
  var cost = parseInt(<%= @cost %>)
  var cost_20 = parseInt(<%= @cost_20 %>)
  var available_credits = parseInt(<%= @available_credits %>)
  var remaining_credits = parseInt(<%= @remaining_credits %>)
</script>

Затем в public / javascripts / Applications.js у меня есть следующий код:

function checkFields(){
  var to_buy_f = $("#page_fvalue").val();
  var to_buy_g = $("#page_gvalue").val();
  var subtract_f = to_buy_f * cost;
  var subtract_g = to_buy_g * cost_20;
  var remain = available_credits - subtract_f - subtract_g;
  $("#remaining_cr").text(remain);
};

$("#page_fvalue").keyup(function () {
   checkFields();
}).keyup();

$("#page_gvalue").keyup(function () {
   checkFields();
}).keyup();

Функция checkFields обновляет #remaining_cr на основе значений, найденных в #page_fvalue и #page_gvalue. Обратите внимание, что он использует available_credits, cost и cost_20, которые мы вставили в переменные javascript выше. Последние две функции сообщают jQuery контролировать #page_fvalue и #page_gvalue для событий keyup. Когда пользователь нажимает клавишу, он вызывает checkFields () для обновления # оставающегося_кр.

Все это в стороне, когда пользователь нажимает «отправить» в форме, вся форма отправляется с текущими значениями. Я не знаю, является ли это наиболее эффективным способом сделать то, что я пытался сделать, но это работает!

Answer 2

То, что вы пытаетесь сделать, довольно часто.Что вы хотите сделать, это сделать запрос AJAX в этом обратном вызове, отправив исходные данные в ваше приложение rails и вернув измененный html на вашу страницу.Вот справочная страница jQuery AJAX .Прокрутите вниз, чтобы увидеть несколько примеров.