作ったもの、プログラミングで共有できそうなこと、IT関連でやってみたことなど、なんでも書いていきます。ヤドン可愛い

祝復旧!というわけで早速投稿します。

今日のまとめ

  • 検索結果をWebサイト上で表示できるようになった。必須中の必須な機能についてはとりあえずOKなところまできた。
  • 全角数字や漢字などでも検索できるように修正できた。
  • 今後は検索結果のソート機能を実装する予定・・・

Webページの一部を更新するために、Ajax+(jQuery+Partial)でHTMLを部分更新

画面の左1/3を検索条件やキーワードを配置し、右の残りに検索結果を描画する想定なので、画面の一部を更新する必要がありました。そのためにどうするか悩みまくって、最終的に以下のサイトにたどり着きました。

Rails 5.x標準で Ajax+(jQuery+Partial) でHTML部分更新する世界一シンプルなサンプル

こちらの内容を自分の作りたいように修正した結果、想定通りの動きをすることができました。ありがとうございました。 以下は自分で修正したコードのみ

  --- controller.rb  

  上の方で@result_allに検索結果を格納    (@result_allの詳細は下の方で)
  render partial: 'ajax_partial', locals: { :result_all => @result_all} and return

動かしてる途中で二重にレンダリングされてるよみたいなエラーがでてきたので、その回避のために「and return」を末尾につけてあります。

--- Partialの中身(_ajax_partial.html.erb)

  <% result_all.each do |result| %>
    <div class="result-name"><%= result["name"] %></div>
    <div class="result-price"><%= result["price"] %></div>
  <% end %>

これで、controller内のrenderを通ると、id="updated_by_ajax" のdivで囲まれた空白がPartialの内容に置きかわります。

--- index.html.erb

<div id="updated_by_ajax" ></div>

@result_allは配列で、以下のようにHashが格納されています。

@result_all = [{"name" => "Roman", "price" => "2000円"},{"name" => "Moira", "price" => "3000円"},{"name" => "Nein", "price" => "9999円"}]

resultにはそれぞれのHashが入りループするため、result["key"]で表示させたい値を取り出せました。ここもさりげに時間食ったのでメモ・・・

日本語(全角文字)検索

日本語で検索すると、この部分でエラーがでてきていました

      html = open(url) do |f|
        charset = f.charset # 文字種別を取得
        f.read # htmlを読み込んで変数htmlに渡す
      end

検索先のurlをURI.encodeしてあげることでエラーがなくなりました。

     search_url = URI.encode url
     html = open(search_url) do |f|
        charset = f.charset # 文字種別を取得
        f.read # htmlを読み込んで変数htmlに渡す
     end

どうやら文字列は全てASCIIじゃないとダメみたいですね(めんど 以下のサイトを参考にしました。ありがとうございました。 Ruby で日本語を含む URL を読み込むと URI must be ascii only と言われた

とりあえず本当に最低限の必要な機能は揃えたのでまずは一安心。 Sort機能の実装も頑張ってくぞ

この記事へのコメント

まだコメントはありません