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

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

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

问题

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

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

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

  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

  1. <%= form_with(model: @investment, local: true) do |f| %>
  2.       <div class="">
  3.         <p class="very-mb-sm text-center"> <%= f.label :coin_name %></p>
  4.         <%= f.select :coin_name, Coin.pluck(:name), {include_blank: true},{data: {controller: 'slim',class:'my-slim-select'}}%>
  5.       </div>
  6.       <p class="very-mb-sm very-mt-sm text-center"> <%= f.label :shopping_price %></p>
  7.       <p class="text-center "><%= f.text_field :shopping_price, class: 'form-text-field'%></p>
  9.       <p class="very-mb-sm very-mt-sm text-center"> <%= f.label :invest %></p>
  10.       <p class="text-center"><%= f.text_field :invest, class: 'form-text-field'%></p>
  11.         
  12.       <div class="div-center mt-btn">
  13.         <%= f.submit '+', class: "text-20" %>
  14.       </div>
  15. <% end %>

Update 1

Rendered HTML

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

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

  1. &lt;div class=&quot;popup-content&quot;&gt;
  2.     &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;
  3.       &lt;div class=&quot;&quot;&gt;
  4.         &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;
  5.         &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;
  6. &lt;option value=&quot;Solana&quot;&gt;Solana&lt;/option&gt;
  7. &lt;option value=&quot;TRON&quot;&gt;TRON&lt;/option&gt;
  8. &lt;option value=&quot;Binance USD&quot;&gt;Binance USD&lt;/option&gt;
  9. &lt;option value=&quot;Dai&quot;&gt;Dai&lt;/option&gt;
  10. &lt;option value=&quot;Shiba Inu&quot;&gt;Shiba Inu&lt;/option&gt;
  11. &lt;option value=&quot;Litecoin&quot;&gt;Litecoin&lt;/option&gt;
  12. &lt;option value=&quot;Avalanche&quot;&gt;Avalanche&lt;/option&gt;
  13. &lt;option value=&quot;Uniswap&quot;&gt;Uniswap&lt;/option&gt;
  14. &lt;option value=&quot;Toncoin&quot;&gt;Toncoin&lt;/option&gt;
  15. &lt;option value=&quot;Wrapped Bitcoin&quot;&gt;Wrapped Bitcoin&lt;/option&gt;
  16. &lt;option value=&quot;Monero&quot;&gt;Monero&lt;/option&gt;
  17. &lt;option value=&quot;LEO Token&quot;&gt;LEO Token&lt;/option&gt;
  18. &lt;option value=&quot;TrueUSD&quot;&gt;TrueUSD&lt;/option&gt;
  19. &lt;option value=&quot;Ethereum Classic&quot;&gt;Ethereum Classic&lt;/option&gt;
  20. &lt;option value=&quot;OKB&quot;&gt;OKB&lt;/option&gt;
  21. &lt;option value=&quot;Chainlink&quot;&gt;Chainlink&lt;/option&gt;
  22. &lt;option value=&quot;Filecoin&quot;&gt;Filecoin&lt;/option&gt;
  23. &lt;option value=&quot;Cosmos Hub&quot;&gt;Cosmos Hub&lt;/option&gt;
  24. &lt;option value=&quot;Stellar&quot;&gt;Stellar&lt;/option&gt;
  25. &lt;option value=&quot;Lido DAO&quot;&gt;Lido DAO&lt;/option&gt;
  26. &lt;option value=&quot;Aptos&quot;&gt;Aptos&lt;/option&gt;
  27. &lt;option value=&quot;Bitcoin Cash&quot;&gt;Bitcoin Cash&lt;/option&gt;
  28. &lt;option value=&quot;Cronos&quot;&gt;Cronos&lt;/option&gt;
  29. &lt;option value=&quot;Quant&quot;&gt;Quant&lt;/option&gt;
  30. &lt;option value=&quot;Hedera&quot;&gt;Hedera&lt;/option&gt;
  31. &lt;option value=&quot;ApeCoin&quot;&gt;ApeCoin&lt;/option&gt;
  32. &lt;option value=&quot;The Graph&quot;&gt;The Graph&lt;/option&gt;
  33. &lt;option value=&quot;NEAR Protocol&quot;&gt;NEAR Protocol&lt;/option&gt;
  34. &lt;option value=&quot;Algorand&quot;&gt;Algorand&lt;/option&gt;
  35. &lt;option value=&quot;VeChain&quot;&gt;VeChain&lt;/option&gt;
  36. &lt;option value=&quot;Arbitrum&quot;&gt;Arbitrum&lt;/option&gt;
  37. &lt;option value=&quot;BNB&quot;&gt;BNB&lt;/option&gt;
  38. &lt;option value=&quot;Cardano&quot;&gt;Cardano&lt;/option&gt;
  39. &lt;option value=&quot;XRP&quot;&gt;XRP&lt;/option&gt;
  40. &lt;option value=&quot;Ethereum&quot;&gt;Ethereum&lt;/option&gt;
  41. &lt;option value=&quot;USD Coin&quot;&gt;USD Coin&lt;/option&gt;
  42. &lt;option value=&quot;Tether&quot;&gt;Tether&lt;/option&gt;
  43. &lt;option value=&quot;Polkadot&quot;&gt;Polkadot&lt;/option&gt;
  44. &lt;option value=&quot;Dogecoin&quot;&gt;Dogecoin&lt;/option&gt;
  45. &lt;option value=&quot;Lido Staked Ether&quot;&gt;Lido Staked Ether&lt;/option&gt;
  46. &lt;option value=&quot;Polygon&quot;&gt;Polygon&lt;/option&gt;
  47. &lt;option value=&quot;MultiversX&quot;&gt;MultiversX&lt;/option&gt;
  48. &lt;option value=&quot;Aave&quot;&gt;Aave&lt;/option&gt;
  49. &lt;option value=&quot;Radix&quot;&gt;Radix&lt;/option&gt;
  50. &lt;option value=&quot;Bitcoin&quot;&gt;Bitcoin&lt;/option&gt;
  51. &lt;option value=&quot;Internet Computer&quot;&gt;Internet Computer&lt;/option&gt;
  52. &lt;option value=&quot;Pax Dollar&quot;&gt;Pax Dollar&lt;/option&gt;
  53. &lt;option value=&quot;Fantom&quot;&gt;Fantom&lt;/option&gt;
  54. &lt;option value=&quot;EOS&quot;&gt;EOS&lt;/option&gt;
  55. &lt;option value=&quot;The Sandbox&quot;&gt;The Sandbox&lt;/option&gt;&lt;/select&gt;
  56. &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 0

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

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

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

  1. coinWithPrices: ->
  2.     coin = $('#investment_coin_name').val()
  3.     $.ajax(url: '/commons/get_prices', data: { coin_name: coin })
  4.     .then (data) ->
  5.         selected_price = $('#investment_coin_price').data('coin_price')
  7. $(document).on "turbolinks:load", ->
  8.      coinWithPrices.init()

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

  1. def get_prices
  2.     @coin_name = params[:coin_name]
  3.     data[:coin_price] = Investment.where("coin_name is ilike '#{@coin_name}'")
  4.     render 'investment_form'
  5. 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:

  1. coinWithPrices: -&gt;
  2.     coin = $(&#39;#investment_coin_name&#39;).val()
  3.     $.ajax(url : &#39;/commons/get_prices&#39;, data :{ coin_name: coin })
  4.     .then (data) -&gt;
  5.         selected_price = $(&#39;#investment_coin_price&#39;).data(&#39;coin_price&#39;)
  7. $(document).on &quot;turbolinks:load&quot;, -&gt;
  8.      coinWithPrices.init()

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

  1. def get_prices
  2.     @coin_name = params[:coin_name]
  3.     data[:coin_price] = Investment.where(&quot;coin_name is ilike &#39;#{@coin_name}&#39;&quot;)
  4.     render &#39;investment_form&#39;
  5.   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
  • ajax
  • javascript
  • postgresql
  • ruby-on-rails
  • slimselect
匿名

发表评论

匿名网友

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

确定