We are currently developing a movie search service and have implemented asynchronous communication using rails and ajax. After a few days of addiction, I've finally implemented it, so I'll keep a record of it. I touched jquery a little when I made movements such as hamburger buttons, but it was my first time to touch Ajax and I got stuck for a few days. (There was also a relationship that the code was not reflected because the server was not restarted.)
-rails (5.2.4.1) -ruby (2.5.3)
__ If you want to implement Rakuten API__ (in case of Rails), please install gem. The mounting procedure is omitted. For more information, click here __](https://github.com/rakuten-ws/rws-ruby-sdk/blob/master/README.ja.md)
First of all, specify the action in posts_contriller to process the contents entered in the search field.
routes.rb
get 'search', to: 'posts#search' #Execute search action when searching for a keyword
Search form
erb:search_from.html.erb
#abridgement
<div class='content'>
<div id="search-box">
#url: search_GET search action with path
<%= form_with(url: search_path, method: :get) do |f| %>
<%= f.text_area :title, id: :title, placeholder: "Type in the keyword", style: "width: 200px;"%> #:Search word is hit in title
<%= f.submit "Search", id: "search_button"%> #Searchワード記入ご自動SearchかSearchボタン後にSearchどちらでも
<%end%>
</div>
<h2>search results</h2>
<div id='item_list'>
#You can return the render partial with, but after ajax processing item_list.html.I am trying to display erb.
</div>
</div>
Search result view
erb:item_list.html.erb
<% items.each do |item| %>
<% if item[:title].present? %>
<div class="item">
<div class= "item-image">
<%= image_tag(item[:imageUrl], width: '55px') %>
</div>
<div class= "item-title">
<p><%= item[:title] %></p>
</div>
</div>
<% end %>
<% end %>
posts_controller.rb
class PostsController < ApplicationController
~abridgement
def search
contents = render_to_string(partial: 'posts/item_list.html.erb', locals:{items: search_by_rakuten(params[:title])})
#returns contents to json
render json: {contents: contents} #If you don't hash it, it won't read
end
private
def search_by_rakuten(title)
items = [] #When the method is called[]Leave empty
if title.present?
results = RakutenWebService::Books::DVD.search(
title: title, #Search field keywords
booksGenreId: '003', #Movie DVD genre designation
hits: 10 #Get only 10 hit information
#Get information by specifying conditions
)
results.each do |result|
#Hash the acquired information and enter a value in the key
item = {
title: result['title'],
url: result['itemUrl'],
imageUrl: result['smallImageUrl'].gsub('?_ex=64x64', '')
}#Put the hashed data in an array
items << item
end
end
items
end
end
Ajax
post.js
$(function{
funtion search(title){
//abridgement
$.ajax({
url: "/search",
type: "GET", //Access search action with get
dataType: "json",
async: true,
data: { title: title }, //Specifying search parameters(:title)
}).done(function (data) {
$("#item_list").css("display", "");
$("#item_list").html(data.contents); //render json:{contents: contents}Content display of
});
}
})
The search function is now implemented.
With the above, the search function can be implemented and the searched information can be obtained. It took 4 or 5 days just to implement this feature. It made me realize that my json, ajax, and ruby lacked knowledge, but I was able to realize the awesomeness of disagreement communication. We will continue development.
Recommended Posts