显示在选择中选择其名称后的硬币价格。

huangapple go评论73阅读模式
英文:

Display the price of a coin after selecting its name in select

问题

你可以使用以下代码来实现在选择币种后显示其价格:

$(document).on('change', '.my-slim-select', function() {
  var selectedCoin = $(this).val();
  // 使用Ajax获取数据库中的价格
  $.ajax({
    url: '/get_coin_price', // 替换成实际的获取价格的路由
    type: 'GET',
    data: { coin_name: selectedCoin },
    success: function(response) {
      // 将价格显示在相应的位置
      $('#investment_shopping_price').val(response.price); // 替换成实际的显示价格的元素和属性
    },
    error: function() {
      alert('获取价格失败');
    }
  });
});

请将上述代码添加到你的页面中,并确保以下事项:

  1. 替换 '/get_coin_price' 成实际获取价格的路由。
  2. 替换 $('#investment_shopping_price').val(response.price) 成实际显示价格的元素和属性。
  3. 确保页面中包含jQuery库。

这段代码会在选择框的值发生变化时触发,获取所选币种的价格,并将其显示在相应的位置。

英文:

I use slim-select in which you can select the name of the coin, how to display its price after selecting the name (the price is in the database, i can find it by the name that is selected in the select)How can i do it(maybe i shoud use Ajax but how
)?

My form with select

<%= form_with(model: @investment, local: true) do |f| %>
      <div class="">
        <p class="very-mb-sm text-center"> <%= f.label :coin_name %></p>
        <%= f.select :coin_name, Coin.pluck(:name), {include_blank: true},{data: {controller: 'slim',class:'my-slim-select'}}%>
      </div>
      <p class="very-mb-sm very-mt-sm text-center"> <%= f.label :shopping_price %></p>
      <p class="text-center "><%= f.text_field :shopping_price, class: 'form-text-field'%></p>

      <p class="very-mb-sm very-mt-sm text-center"> <%= f.label :invest %></p>
      <p class="text-center"><%= f.text_field :invest, class: 'form-text-field'%></p>
        
      <div class="div-center mt-btn">
        <%= f.submit '+', class: "text-20" %>
      </div>
<% end %>

Update 1

Rendered HTML

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&lt;div class=&quot;popup-content&quot;&gt;
    &lt;form action=&quot;/investments&quot; accept-charset=&quot;UTF-8&quot; method=&quot;post&quot;&gt;&lt;input type=&quot;hidden&quot; name=&quot;authenticity_token&quot; value=&quot;u_oVXD2WK9CBd13gQq2i5XSDiEED389yjhY1Pv22sDj2fVz6Y2HJVwj2RRHGgzW9xcXSb78BYmjGFAhmMGOugA&quot; autocomplete=&quot;off&quot; /&gt;
      &lt;div class=&quot;&quot;&gt;
        &lt;p class=&quot;very-mb-sm text-center&quot;&gt; &lt;label for=&quot;investment_coin_name&quot;&gt;Coin name&lt;/label&gt;&lt;/p&gt;
        &lt;select data-controller=&quot;slim&quot; data-class=&quot;my-slim-select&quot; name=&quot;investment[coin_name]&quot; id=&quot;investment_coin_name&quot;&gt;&lt;option value=&quot;&quot; label=&quot; &quot;&gt;&lt;/option&gt;
&lt;option value=&quot;Solana&quot;&gt;Solana&lt;/option&gt;
&lt;option value=&quot;TRON&quot;&gt;TRON&lt;/option&gt;
&lt;option value=&quot;Binance USD&quot;&gt;Binance USD&lt;/option&gt;
&lt;option value=&quot;Dai&quot;&gt;Dai&lt;/option&gt;
&lt;option value=&quot;Shiba Inu&quot;&gt;Shiba Inu&lt;/option&gt;
&lt;option value=&quot;Litecoin&quot;&gt;Litecoin&lt;/option&gt;
&lt;option value=&quot;Avalanche&quot;&gt;Avalanche&lt;/option&gt;
&lt;option value=&quot;Uniswap&quot;&gt;Uniswap&lt;/option&gt;
&lt;option value=&quot;Toncoin&quot;&gt;Toncoin&lt;/option&gt;
&lt;option value=&quot;Wrapped Bitcoin&quot;&gt;Wrapped Bitcoin&lt;/option&gt;
&lt;option value=&quot;Monero&quot;&gt;Monero&lt;/option&gt;
&lt;option value=&quot;LEO Token&quot;&gt;LEO Token&lt;/option&gt;
&lt;option value=&quot;TrueUSD&quot;&gt;TrueUSD&lt;/option&gt;
&lt;option value=&quot;Ethereum Classic&quot;&gt;Ethereum Classic&lt;/option&gt;
&lt;option value=&quot;OKB&quot;&gt;OKB&lt;/option&gt;
&lt;option value=&quot;Chainlink&quot;&gt;Chainlink&lt;/option&gt;
&lt;option value=&quot;Filecoin&quot;&gt;Filecoin&lt;/option&gt;
&lt;option value=&quot;Cosmos Hub&quot;&gt;Cosmos Hub&lt;/option&gt;
&lt;option value=&quot;Stellar&quot;&gt;Stellar&lt;/option&gt;
&lt;option value=&quot;Lido DAO&quot;&gt;Lido DAO&lt;/option&gt;
&lt;option value=&quot;Aptos&quot;&gt;Aptos&lt;/option&gt;
&lt;option value=&quot;Bitcoin Cash&quot;&gt;Bitcoin Cash&lt;/option&gt;
&lt;option value=&quot;Cronos&quot;&gt;Cronos&lt;/option&gt;
&lt;option value=&quot;Quant&quot;&gt;Quant&lt;/option&gt;
&lt;option value=&quot;Hedera&quot;&gt;Hedera&lt;/option&gt;
&lt;option value=&quot;ApeCoin&quot;&gt;ApeCoin&lt;/option&gt;
&lt;option value=&quot;The Graph&quot;&gt;The Graph&lt;/option&gt;
&lt;option value=&quot;NEAR Protocol&quot;&gt;NEAR Protocol&lt;/option&gt;
&lt;option value=&quot;Algorand&quot;&gt;Algorand&lt;/option&gt;
&lt;option value=&quot;VeChain&quot;&gt;VeChain&lt;/option&gt;
&lt;option value=&quot;Arbitrum&quot;&gt;Arbitrum&lt;/option&gt;
&lt;option value=&quot;BNB&quot;&gt;BNB&lt;/option&gt;
&lt;option value=&quot;Cardano&quot;&gt;Cardano&lt;/option&gt;
&lt;option value=&quot;XRP&quot;&gt;XRP&lt;/option&gt;
&lt;option value=&quot;Ethereum&quot;&gt;Ethereum&lt;/option&gt;
&lt;option value=&quot;USD Coin&quot;&gt;USD Coin&lt;/option&gt;
&lt;option value=&quot;Tether&quot;&gt;Tether&lt;/option&gt;
&lt;option value=&quot;Polkadot&quot;&gt;Polkadot&lt;/option&gt;
&lt;option value=&quot;Dogecoin&quot;&gt;Dogecoin&lt;/option&gt;
&lt;option value=&quot;Lido Staked Ether&quot;&gt;Lido Staked Ether&lt;/option&gt;
&lt;option value=&quot;Polygon&quot;&gt;Polygon&lt;/option&gt;
&lt;option value=&quot;MultiversX&quot;&gt;MultiversX&lt;/option&gt;
&lt;option value=&quot;Aave&quot;&gt;Aave&lt;/option&gt;
&lt;option value=&quot;Radix&quot;&gt;Radix&lt;/option&gt;
&lt;option value=&quot;Bitcoin&quot;&gt;Bitcoin&lt;/option&gt;
&lt;option value=&quot;Internet Computer&quot;&gt;Internet Computer&lt;/option&gt;
&lt;option value=&quot;Pax Dollar&quot;&gt;Pax Dollar&lt;/option&gt;
&lt;option value=&quot;Fantom&quot;&gt;Fantom&lt;/option&gt;
&lt;option value=&quot;EOS&quot;&gt;EOS&lt;/option&gt;
&lt;option value=&quot;The Sandbox&quot;&gt;The Sandbox&lt;/option&gt;&lt;/select&gt;
&lt;/div&gt;

<!-- end snippet -->

答案1

得分: 0

我认为如果你在使用CoffeeScript,我可以在这里提供帮助。

我假设你正在使用turbolinks:load来查看你的资产。

你可以创建类似这样的东西:

coinWithPrices: ->
    coin = $('#investment_coin_name').val()
    $.ajax(url: '/commons/get_prices', data: { coin_name: coin })
    .then (data) ->
        selected_price = $('#investment_coin_price').data('coin_price')

$(document).on "turbolinks:load", ->
     coinWithPrices.init()

这是CoffeeScript的一部分,现在在Rails端做一些工作。

def get_prices
    @coin_name = params[:coin_name]
    data[:coin_price] = Investment.where("coin_name is ilike '#{@coin_name}'")
    render 'investment_form'
end

我假设你的模型名称是Investment,表单名称是investment_form。

我认为这对你会有帮助。

英文:

I think if you are using coffee JS then i can help here.

I am assuming you are using turbolinks:load to view your assets.

You can Create something like this:

coinWithPrices: -&gt;
    coin = $(&#39;#investment_coin_name&#39;).val()
    $.ajax(url : &#39;/commons/get_prices&#39;, data :{ coin_name: coin })
    .then (data) -&gt;
        selected_price = $(&#39;#investment_coin_price&#39;).data(&#39;coin_price&#39;)

$(document).on &quot;turbolinks:load&quot;, -&gt;
     coinWithPrices.init()

This is part for coffee js now some work on Rails end.

def get_prices
    @coin_name = params[:coin_name]
    data[:coin_price] = Investment.where(&quot;coin_name is ilike &#39;#{@coin_name}&#39;&quot;)
    render &#39;investment_form&#39;
  end

I have assume your model name is Investment and your form name is investment_form.

I think this will work for you.

huangapple
  • 本文由 发表于 2023年5月18日 01:54:06
  • 转载请务必保留本文链接:https://go.coder-hub.com/76274939.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定