Автоматическое обновление значения с помощью coffeescript

#javascript #ruby-on-rails #ruby #ajax #coffeescript

#javascript #ruby-on-rails #ruby #ajax #coffeescript

Вопрос:

я новичок в использовании JS, поэтому у меня возникают проблемы здесь rsrs

мне нужно автоматически обновить поле результата, как только пользователь начнет вставлять значение в поле суммы

 $(document).ready ->
$('form').submit ->
if $('form').attr('action') == '/convert'
  $.ajax '/convert',
      type: 'GET'
      dataType: 'json'
      data: {
              source_currency: $("#source_currency").val(),
              target_currency: $("#target_currency").val(),
              amount: $("#amount").val()
            }
      error: (jqXHR, textStatus, errorThrown) ->
        alert textStatus
      success: (data, text, jqXHR) ->
        $('#result').val(data.value)
    return false;
 

прямо сейчас у меня есть кнопка отправки, которая вызывает /convert
, но как я могу стереть ее и просто вызвать API только тогда, когда получу значение, незавершенное или нет

    class ExchangeService
  def initialize(source_currency, target_currency, amount)
    @source_currency = source_currency
    @target_currency = target_currency
    @amount = amount.to_f
  end


def call
    value = get_exchange
    value * @amount
  rescue RestClient::ExceptionWithResponse => e
    e.response
  end

def get_exchange
  exchange_api_url = Rails.application.credentials[Rails.env.to_sym][:currency_api_url]
  exchange_api_key = Rails.application.credentials[Rails.env.to_sym][:currency_api_key]
  url = "#{exchange_api_url}?token=#{exchange_api_key}amp;currency=#{@source_currency}/#{@target_currency}"
  result = RestClient.get url
  JSON.parse(result.body)['currency'][0]['value'].to_f
end
end
 

Комментарии:

1. Вы можете использовать remote: true в своей форме и пропустить и код AJAX, а после этого использовать представление, подобное .js.erb, для добавления ваших данных.

2. извините, я не понял, не могли бы вы привести пример?

3. Да, я дам ответ внизу

4. Вы можете прослушивать input события или change события из вашего элемента ввода и использовать это для запуска AJAX-запроса. $('#my-input').on 'input', -> вместо $('form').submit ->

Ответ №1:

Вы можете использовать remote: true из Rails для выполнения AJAX-запроса:

Простой пример с ресурсами Car:

cars_controller.rb

 def create
  @car = Car.new(car_params)

  respond_to do |format|
    if @car.save
      format.js
    else
      format.js
    end
  end
end
 

_form.html.erb

 <%= form_with(model: car, local: false) do |form| %>
  <% if car.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(car.errors.count, "error") %> prohibited this car from being saved:</h2>

      <ul>
        <% car.errors.each do |error| %>
          <li><%= error.full_message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= form.label :name %>
    <%= form.text_field :name %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>

 

create.js.erb

 console.log('<%= @car.name  %>');
 

Итак, когда вы отправляете свою форму rails, запрос будет выглядеть как JS. Ваш контроллер должен принимать этот формат (format.js ) и когда данные обрабатываются контроллером, поток продолжает действие, но с расширением js (create.js.erb) в этом файле вы можете создавать то, что хотите, добавлять данные, заменять данные, изменять значения и использовать Ruby JS
Я надеюсь, что это послужит вам, простите мой плохой английский