We Keep Coding

Making tinyMCE and Garlic.js work together

I'm trying to make Garlic.js and tinyMCE work together in my Rails app without success. I've integrated Garlic in my asset pipeline and for tinyMCE I'm using tinymce-rails gem.
Both work great separately but when I put them together Garlic stops working.
I've recently tried micschk's potential solution posted in Garlic's github repository https://github.com/guillaumepotier/Garlic.js/issues/87 which involves initialising tinymce with the following code:
views/layouts/application.html (following script inside head tag)
<script>
tinyMCE.init({
selector: 'textarea.tinymce',
setup : function(editor) {
editor.on("change keyup", function(e){
console.log('saving');
tinyMCE.triggerSave(); // updates all instances
// editor.save(); // updates this instance's textarea
$(editor.getElement()).trigger('change'); // for garlic to detect change
});
}
});
</script>
the code does initialise tinymce and runs the code after 'setup' but it does not seem to make Garlic work.
Here's my view code for reference
<%= simple_form_for(#open_ender, remote: true, html: {"data-persist" => 'garlic', id:'open_ender_form' }) do |f| %>
<%= f.error_notification %>
<div class="form-inputs">
<%= f.input :answer_id, :required => true, :as => :hidden, :autofocus => true, input_html: {value: #answer.id } %>
<%= f.input :content, :input_html => { :class => 'tinymce' }, :label => false, :required => true, :autofocus => true %>
<%= button_tag(type: 'submit', id: "save-btn", style:'background:transparent' ) do %>
<i class="fa fa-floppy-o" aria-hidden="true" title="save"; data-toggle="tooltip"; data-placement="right"></i>
<% end %>
</div>
<% end %>
I would really appreciate if someone could point me to the right solution.

I've finally decided to use the tinyMCE autosave plug-in instead of using Garlic.js although the functionality is not exactly the same it serves the purpose of protecting users from losing their data.
https://www.tinymce.com/docs/plugins/autosave/

Generate link_to using :url =>

I'm generating a link with a confirmation message and am having trouble with how the confirmation message is getting included.
I have tried this with both rails 4.0.10 and rails 4.2.2 and it produces the same output.
Here is my link_to code:
<%= link_to 'Destroy Comment', :url => [comment.article, comment], :method => :delete, :remote => true, :confirm => "are you sure?" -%>
And it generates the following link:
<a data-remote="true" href="/articles/4?confirm=are+you+sure%3F&method=delete&url%5B%5D=4&url%5B%5D=5">Destroy Comment</a>
This is obviously doesn't work because it's putting the javascript confirm message right into the url of the link.
I've found that if I remove the :url => from the link_to it seems to work fine.
<%= link_to 'Destroy Comment', [comment.article, comment], :method => :delete, :remote => true, :confirm => "are you sure?" -%>
<a confirm="are you sure?" data-remote="true" rel="nofollow" data-method="delete" href="/articles/4/comments/5">Destroy Comment</a>
Is there a way to fix this and keep the :url => in the link_to? I really like having the :url => in there for specificity purposes. I looked through the api docs but couldn't find a specific answer. There was one comment made that claims something like this should work. http://apidock.com/rails/ActionView/Helpers/UrlHelper/link_to#1227-link-to-with-as-routing

In your first example, you are passing a hash as second parameter, which matches this method signature:
link_to(body, url_options = {}, html_options = {})
causing Rails to interpret it as url_options, which is why you get that link you get.
If you really want to user the :url=>, then you can create your own helper method, say link_to_with_url that that expects hash containing :url key as the second parameter:
def link_to_with_url(body, options={})
url = options.delete(:url);
if url.nil?
raise "Can't link to something that doesn't have a URL"
else
link_to body, url, options
end
end
You can also overload Rails' link_to method, but I would advise against that.

Try this:
<%= link_to 'Destroy Comment', :url => [comment.article, comment], :method => :delete, :remote => true, :data => {:confirm => "are you sure?"} %>

How to reference images in javascript within Rails 4 on Heroku

I am trying to link am image by javascript. When clicking a thumbnail a larger image changes to the corresponding image.
(I have removed some of the classes that are not important for this issue.)
Thumbnails:
<%= image_tag "uppdrag/thumbs/katja01.png", :class => "ids", :id => "katja01.png" %>
<%= image_tag "uppdrag/thumbs/katja02.png", :class => "ids", :id => "katja02.png" %>
<%= image_tag "uppdrag/thumbs/katja03.png", :class => "ids", :id => "katja03.png" %>
Image that changes:
<%= image_tag "uppdrag/katja01.png", :class => "", :id => "idstudio" %>
Javascript:
$(".ids").click(function() {
var id = $(this).attr('id');
$('#idstudio').fadeOut(300, function(){
$('#idstudio').attr('src','/assets/uppdrag/' + id).bind('onreadystatechange load', function(){
if (this.complete) $('#idstudio').fadeIn(300);
});
});
});
It all works fine on localhost:3000, but when precompiled and uploaded to heroku and the name of the pictures change, the name on the id on the thumbnails isn't correct any longer and I haven't been able to figure out how to get the correct name for the picture on the id.
Cheers Carl

You should be able to use the asset_path helper.
http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets
<%= image_tag "uppdrag/thumbs/katja01.png", :class => "ids", :id => asset_path "katja01.png" %>
etc

How to call a .js.erb file instead of a .rjs one

I'm working on a migration from Prototype to jQuery and we also have to remove .rjs file when we can. There is here one issue :
I have got the update_overall_comment.rjs file in the app/views/results folder:
page.replace 'overall_comment', :partial => 'results/marker/overall_comment', :locals => {:result => #result}
page.visual_effect(:highlight, 'overall_comment_text_area', :startcolor => '#BDFCC9')
The _overall_comment.html.erb file in the app/views/results/markers folder:
<div id="overall_comment">
<div id="overall_comment_edit">
<%= form_for #result,
:remote => true,
:url => { :action => 'update_overall_comment', :id => #result.id } do |f| %>
<%= f.text_area :overall_comment,
:cols => 50,
:rows => 5,
:id => 'overall_comment_text_area',
:onkeydown => "$('overall_comment_submit').enable();" %>
<div>
<%= f.submit t(:save_changes),
:disable_with => I18n.t('working'),
:disabled => true,
:id => "overall_comment_submit"%>
</div>
<% end %>
</div>
</div>
And the results.controller.rb file (I just show the relevant function ) in the app/controllers folder:
def update_overall_comment
#result = Result.find(params[:id])
#result.overall_comment = params[:result][:overall_comment]
#result.save
end
The fist thing I would like to understand is how to transform the .rjs file to a .js.erb on. I removed it and created update_overall_comment.js.erb (in the same folder) which only contains a console.log('...'), and I never saw the console.log called.
Do you have any ideas ?
Thank you in advance.

rename update_overall_comment.rjs to update_overall_comment.js.erb
then in this file:
$('#overall_comment').html("<%= j(render 'results/marker/overall_comment') %>");
$('#overall_comment_text_area').effect("highlight", { color: "#BDFCC9" }, 3000);
p.s. not sure about the highlight, also for verifying that the js.erb file is called/rendered, I use alert('something here'); instead of console('...');, but this shouldn't be much of a difference in order to test an ajax call.

Thank you very much. I have made some mistakes.
For instance I thought a line with "//" was a comment and in fact it does a ajax error. Also I used partial for the first line and it did't work.
And I thought this js.erb file would inform me about errors but no. It just stop when it doesn't work without any information. So I had to find by myself that my jquery version didn't have the "effect" method.
But now it works and your translation of visual_effect work (I just put 1000ms instead of 3000).

Ruby on Rails 3 Partial Pages

For a certain employee I have a report. Each report has some shifts. Each shift can be corrected. I am migrating from Ruby 2 to Ruby 3. I am working with partial pages. When I click on Correct, a partial page appears, when I click on Update, page should go back to the partial page Details with the ID of that employee.
_modify_item.html.erb:
<%= form_for :modified_item, :url => {:action => :modify_item, :report_id => #monthly_report.id, :modified_item_id => #modified_item.id,remote: true} do |form| %>
<table width=100% height=100%>
<td width=150 style='border: 0px; background-color: #eee' align=center>
<%= form.hidden_field :report_id, :value => #monthly_report.id %>
<%= submit_tag 'Update', :name => 'update', :value => 'Update', :class => 'highlighted_button' %>
<%= link_to 'Cancel',
{:action => 'details', :report_id => #monthly_report.id},
:class => 'highlighted_button',
remote: true %>
</td>
</tr>
</table>
<% end %>
controller.rb:
def modify_item
#modified_item = Employee::MonthlyReportItem.find(params[:modified_item_id])
#monthly_report = #modified_item.report
begin
#modified_item.update_attributes!(params[:modified_item])
flash[:notice] = 'Position was updated.'
flash[:warning]=#modified_item.verification_problems if !#modified_item.correct?
redirect_to('/accounts/salary/details', :report_id => #monthly_report.id) and return
rescue Exception => e
flash.now[:error] = "Some of the values are missing or are incorrect. Try again."
end
#render(:partial => 'details') and return
end
modify_item.js.erb: (tried didn't succeed)
//$("#salary_popup").html("<%= j(render partial: 'details') %>");
Update: Forgot to mention the exact error which points inside of the if
Couldn't find Employee::MonthlyReport without an ID
Rails goes into details function and tries this:
def details
if params[:item].nil?
#monthly_report = Employee::MonthlyReport.find(params[:report_id])
else
#monthly_report = Employee::MonthlyReport.find(params[:item][:report_id])
end
..
end

Does the hidden field you create have the name attribute? If not trying adding that.