ユーザ用ツール

サイト用ツール


prog_cgi:ajaxによる更新

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
最新のリビジョン両方とも次のリビジョン
prog_cgi:ajaxによる更新 [2019/03/11 10:22] – [デフォルトアクションの実装] hirohitoprog_cgi:ajaxによる更新 [2019/03/11 10:25] hirohito
行 122: 行 122:
 現在のブラウザでは、この指示をしてもしなくても正しく動作するものがほとんどですが、念の為つけています。 現在のブラウザでは、この指示をしてもしなくても正しく動作するものがほとんどですが、念の為つけています。
  
 +これで完了です。
  
 +{{:prog_cgi:ajax_result.png?nolink|}}
 +
 +
 +===== プログラム全体 =====
 + プログラム全体を再掲します。
 +
 +  * コントローラ main.rb
 +  * テンプレート(ビュー) index.rhtml
 +
 +
 +<code ruby main.rb>
 +require "alone"
 +require "al_graph"
 +
 +class AjaxSampleController < AlController
 +  def action_index()
 +    AlTemplate.run("index.rhtml")
 +  end
 +
 +  def action_get_graph()
 +    form = AlForm.new(
 +      AlText.new("v1"),
 +      AlText.new("v2"),
 +      AlText.new("v3"),
 +      AlText.new("v4"),
 +    )
 +    form.validate()
 +    ydata = [ form[:v1].to_f, form[:v2].to_f, form[:v3].to_f, form[:v4].to_f ]
 +
 +    graph = AlGraph.new()
 +    graph.set_mode( :NO_XML_DECLARATION )
 +
 +    graph.add_data_bar(ydata)
 +    graph.draw()
 +  end
 +end
 +</code>
 +
 +<code html index.rhtml>
 +<%= header_section %>
 +<style>
 +  input[type=text] { text-align: right; }
 +</style>
 +
 +<%= body_section %>
 +
 +<div id="graph"></div>
 +
 +値1<input type="text" name="v1" value=""><br>
 +値2<input type="text" name="v2" value=""><br>
 +値3<input type="text" name="v3" value=""><br>
 +値4<input type="text" name="v4" value=""><br>
 +
 +<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 +<script src="/js/alone.js"></script>
 +<script>
 +$("input").change( function() {
 +  var v1 = $("input[name=v1]").val();
 +  var v2 = $("input[name=v2]").val();
 +  var v3 = $("input[name=v3]").val();
 +  var v4 = $("input[name=v4]").val();
 +
 +  var uri = Alone.make_uri({action:"get_graph", v1:v1, v2:v2, v3:v3, v4:v4});
 +  $("#graph").load( uri );
 +});
 +</script>
 +
 +<%= footer_section %>
 +</code>
  
prog_cgi/ajaxによる更新.txt · 最終更新: 2019/03/18 22:40 by hirohito