CODEWITHSUNDEEP
javascriptruby-on-railsrubyfroala
Someone Else
Someone Else

Reputation: 321

Rails Javascripts + Asset Pipeline

I can't quite figure out what I'm doing wrong with respect to my asset pipeline (amateur hour).

I'm using the Froala editor (rails gem) and when I visit the page where I want to render in my wysiwyg editor, it's spaghetti falling out over the page. (The JS isn't being applied.)

I've tried to account for the rails turbolinks issue by implementing the on page:load function beside call to init foundation, but it obviously doesn't work.

Here's my current setup.

application.js:

//= require jquery
//= require jquery_ujs
//= require foundation
//= require plugins/block_styles.min.js
//= require plugins/colors.min.js
//= require plugins/media_manager.min.js
//= require plugins/tables.min.js
//= require plugins/video.min.js
//= require plugins/font_family.min.js
//= require plugins/font_size.min.js
//= require plugins/file_upload.min.js
//= require plugins/lists.min.js
//= require plugins/char_counter.min.js
//= require plugins/fullscreen.min.js
//= require plugins/urls.min.js
//= require plugins/inline_styles.min.js
//= require plugins/entities.min.js
//= require froala_editor.min.js
//= require turbolinks
//= require cocoon
//= require_tree .

$(function(){ $(document).foundation(); });

$(document).on('ready page:load', function () {   
  $('#wysiwyg').editable({inlineMode: false, minHeight: 280})
})

Here's the form itself:

wysiwyg post _form
<div class="field">
  <%= f.text_area :body, id: "wysiwyg" %>
</div>

Here's what I'm doing in the new and edit pages:

new.html.erb (and edit)
<% content_for :head do %>
  <%= stylesheet_link_tag "froala_editor.min.css" %>
  <%= stylesheet_link_tag "froala_style.min.css" %>
  <%#= javascript_include_tag "froala_editor.min" %>
  ## commented out, tried both to no avail.
<% end %>

Also tried including my froala_editor.min.js both ways to no avail. What the heck am I doing wrong?

Edit:

No errors or anything in the rails log or dev console.

Also, when I refresh the page, the js does work and it's no longer "spaghetti," just not on initial page load.

Edit two ("general" is where my miscellaneous scripts are, per @thedanotto):

Updated as follows but still no luck. Still works on page refresh.

//= require jquery
//= require jquery_ujs
//= require froala_editor.min.js
//= require plugins/block_styles.min.js
//= require plugins/colors.min.js
//= require plugins/media_manager.min.js
//= require plugins/tables.min.js
//= require plugins/video.min.js
//= require plugins/font_family.min.js
//= require plugins/font_size.min.js
//= require plugins/file_upload.min.js
//= require plugins/lists.min.js
//= require plugins/char_counter.min.js
//= require plugins/fullscreen.min.js
//= require plugins/urls.min.js
//= require plugins/inline_styles.min.js
//= require plugins/entities.min.js
//= require turbolinks
//= require foundation
//= require general
//= require cocoon
//= require_tree .

Upvotes: 1

Views: 179

Answers (2)

Someone Else
Someone Else

Reputation: 321

It turns out I had not required the Froala CSS files properly in the tree. I was pulling it in directly in the view but when I added it to the list in application.css it worked. 

 *= require scaffolds
 *= require froala_editor.min.css
 *= require froala_style.min.css
 *= require foundation_and_overrides
 *= require_self
 *= require_tree .

Upvotes: 0

thedanotto
thedanotto

Reputation: 7307

Add another js file and put it within the app/assets/javascripts/ folder.

Move this code from application.js to new-js-file.js

$(function(){ $(document).foundation(); });

$(document).on('ready page:load', function () {   
  $('#wysiwyg').editable({inlineMode: false, minHeight: 280})
})

I'd then move the froala_editor.min.js into app/assets/javascripts/ folder as well. And just make sure your froala_editor.min.js is named earlier in the alphabet than your new file. IE your new file should start with a g or later so it loads in the browser afterwards.

Otherwise you can add froala_editor.min.js to /public. Then load it within application.html.erb

Upvotes: 1

Related Questions