Rails 4 - How to populate remote content in a form? - ruby-on-rails

Question

Here is what I have
I have a method like this in my bookmarks_controller.rb
def fetch
#result = LinkThumbnailer.generate(params[:url])
end
I have the following form fields to create new bookmarks
url
title
description
thumbnail
tags
So my new.html.erb looks like this
<%= form_for(#bookmark, :html => {class: "panel-body"}) do |f| %>
<% if #bookmark.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(#bookmark.errors.count, "error") %> prohibited this bookmark from being saved:</h2>
<ul>
<% #bookmark.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="block">
<%= f.label :url, :class => 'control-label' %>
<%= f.text_field :url, :class => 'form-control', :placeholder => 'URL' %>
</div>
<div class="block">
<%= f.label :title, :class => 'control-label' %>
<%= f.text_field :title, :class => 'form-control', :placeholder => 'Title' %>
</div>
<div class="block">
<%= f.label :description, :class => 'control-label' %>
<%= f.text_area :description, rows: 6, :class => 'form-control', :placeholder => 'Description' %>
</div>
<div class="block">
<%= f.label :thumbnail, :class => 'control-label' %>
<%= f.text_field :thumbnail, :class => 'form-control', :placeholder => 'Thumbnail url' %>
</div>
<div class="block">
<%= f.label :tag_list, :class => 'control-label' %>
<%= f.text_field :tag_list, :class => 'form-control', :placeholder => 'Tags (separated by commas)' %>
</div>
<div class="actions">
<%= f.submit :class => "btn btn-info" %>
</div>
<% end %>
I would like to have a button called Fetch right next to url field.
When user click Fetch button, I would like to populate the form fields using ajax.
I viewed rails documentation. It says to add remote: true attribute to the form.
But I wanna use ajax function only when the user click fetch button.
Can someone help me with this?
Thankyou

Answer 1

You can generate an object using the LinkThumbnailer gem and than convert it to json
with this action:
def fetch
#result = LinkThumbnailer.generate(params['given_url'])
respond_to do |format|
format.json do
result.to_json
end
end
end
And in your view you could use the Jquery getJSON method to access the #fetch action and pass the given url as a parameter:
<script type="text/javascript">
require(['jquery'], function($) {
$('.fetch-button-class').change(function() {
var given_url = $('.url-class').val();
$.getJSON('<%= fetch_action_url %>', {'given_url': given_url }, function(obj) {
$('.title-class').val(object.title);
$('.description-class').val(object.description);
});
});
});
</script>