I use Rails 4 and bootstrap-select-rails gem.
When I download page with my form, I got this
When I refresh page, I got this
If I turn off turbolinks, design is ok, but site is very slow.
How to display the correct design at first download without disabling turbolinks?
UPD:
at application.js:
//= require bootstrap-select
at application.scss:
#import "bootstrap-select";
at view:
=select_tag "document_id",
options_from_collection_for_select(#documents,'id', 'name'),
class: "selectpicker",
"data-live-search".to_sym => "true"
I added data-no-turbolink attribute to link
New
Related
I am using active admin gem in my Rails application.In that, I have a resources article and user and I need to use TinyMCE-rails in the article.
It is possible to add if possible how?
There are a number of WYSISWG editor plugins for ActiveAdmin. The TinyMCE plugin has not been updated for a while so I don't know its status. A couple of the others are more current.
I realize this is a bit late but in hopes that this may help someone else in the future - TinyMCE is active and the tinymce-rails gem is actively maintained (latest release as of writing is just under 2 months old). Getting this to work in ActiveAdmin is not too hard, the github page and TinyMCE and ActiveAdmin for Rails post tell you most of what you need but here is what I did:
add the tinymce-rails gem - bundle install
add TinyMCE assets by adding //= require tinymce to application.js
register tinymce.js in active_admin.js and initialize it by adding the following to your active_admin.js file (this was the missing key for me):
...
//= require tinymce
...
// initialize tinymce
$(document).ready(function() {
tinyMCE.init({
selector: 'textarea.editor',
browsser_spellcheck: true,
menubar: 'edit view insert format tools table help',
plugins: 'code image link lists media preview table'
});
});
To use it in a form:
...
f.input :description, input_html: {rows: 4, class: 'editor'}
...
Hope this helps someone down the road.
I'm using Rails with webpacker with react.
I'm loading my components like this in my view file:
<div id="mycomponent"></div>
<%= javascript_pack_tag 'components/mycomponent' %>
In mycomponent, I have:
document.addEventListener('DOMContentLoaded', () => {
ReactDOM.render(
<MyComponent />,
document.getElementById('mycomponent'),
)
})
So on initial page load, mycomponent is mounted.
But when I visit another page, hit back or click on a link to the dashboard (in this case), the component doesn't load. Had to hit refresh to load it.
I think it has something to do with some caching techinques that Rails is using?
How do I get the components to load on every request
So turbolinks was doing some optimizations behind.
Realized that the url in chrome inspector remained the same when I changed pages.
Pages were loading fully after removing //= require turbolinks from app/assets/javascript/application.js.
Seen some people pointing to jquery.turbolinks for onload issues with turbolink. Not tested though.
I am finding few ways to get my work routine good with Phoenix as I have with rails, There are some perspectives which I am looking in Phoenix are.
1: In rails, I have my controller and my view, also the CSS and JS files alongside, When I want to include CSS files only in one relevant view, I only do as
<%= yield :head %>
and In my View file, I only do
<% content_for :head do %>
<%= stylesheet_link_tag "views/index/landing.css" %>
<% end %>
That's it. My CSS file is only loading for my relevant view.
2: For JS, I have application.js file in which I included my other libs and in the end, I have admin.js in which I have included my every other file as
//= require jquery
//= require dataTables/jquery.dataTables
//= require jquery_ujs
//= require bootstrap.min
//= require admin/admin.js
admin.js.coffee file
#= require admin/sign_up.js.coffee
#= require admin/company.js.coffee
#= require admin/user.js.coffee
3: For every JS file What I am doing is, e.g for Signup view's JS file I have done as under, in the very end of the file,
window.initializeSignUp = ->
onSignUp()
after this What I only need in my sign up view is
<script>
$(document).ready(function () {
window.initializeSignUp();
});
</script>
Now it's only calling that method of Signup and everything is working fine.
On the other hand, I love Elixir it's a very good and lovable language to work in, BUT whenever I start project in it, I already got afraid of Brunch and how Assets are going to be handled.
for those who will read the question and will just downvote without even understanding the main issue here: Am a newbie to Phoenix for creating an APP with views and assets, etc.
I just need a clear and correct answer to work with Phoenix without using brunch or any web-pack solution, But a normal way, Is that possible in possible?
I believe your question has been answered here. The answer shows how to add page specific javascript but the same technique can be done for your css styles.
Here's a good explanation of how templates/views work in Phoenix.
I have installed bourbon, neat and refills and would like to use modal window. Following the instructions I made:
rails generate refills:import modal
I have the modal partial and added to the page
<%= render 'refills/modal' %>
The result:
Any idea what I missed? Thank you!
You need to add the following code to application.js
// require refills/modal
And then you need to add the following line to application.scss:
#import 'refills/modal';
That should do it.
My problem
I realize that there are a ton of questions about using remote: true and having the server process the request as HTML instead of javascript so that you get a MissingTemplate Error on SO already.
So far none of them answer my question. To prove that:
I know that I have included / bundled etc jquery, jquery-ujs etc because this link used to work. Also I can see them getting included on the rendered page and also as mentioned in the question, I'm getting the server to successfully process the request as JS in many places.
I know that I'm not having a precompiled assets issue because I don't have any precompiled assets (deleted the public/assets folder myself just to make sure).
If I put the following on my index page right at the top
<%= link_to "Test", "/create_tags_dialog", :remote => true %>
It renders the html perfectly:
<a data-remote="true" href="/create_tags_dialog">Test</a>
and correctly calls the remote script, no TemplateMissing Error because the request is processed as JS.
Just to be sure I even copied the rendered HTML back onto the index and they both work as expected:
<a data-remote="true" href="/create_tags_dialog">Test2</a>
(i.e. the server processes the request as JS and I get no TemplateMissing Error)
Now for the problem
If I put the same link_to line into a bootstrap dropdown <ul> the request gets processed as HTML and I get a MissingTemplate Error. I checked and the rendered html is identical! Again, just to check, I put the raw html in as well <a data-remote="true" href="/create_tags_dialog">Test</a>
The only difference between identical uses of this anchor tag is that the second use (the broken one) is inside of a bootstrap dropdown which gets rendered as a partial on page load.
Could it be the partial? Please let me know if I can include any outputs, error logs, screenshots etc to help clarify things.
Note
I see a few solutions like this one
Which recommend ensuring this line is in the index
<%= javascript_include_tag "jquery", "jquery_ujs" %>
I don't have that line exactly, mine is
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
and my application.js is
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap.min
//= require turbolinks
//= require jquery-readyselector
//= require fastclick
//= require_tree .
Also the link is working in a different div of the same page at the same time, but just in case I thought I'd mention this. . .
Update
Thanks to AmShaegar I discovered the change in my code that causes this to break. I added a stopPropagation() to my dropdowns because I want them to stay open after click like this:
$('#tags-filter-dropdown').click (e) ->
e.stopPropagation()
If I comment this out, my remote-link goes back to working. Any suggestions for how I can both keep that dropdown from closing and activate a remote link? I tried implementing AmShaegar's solution of giving the link a class and preventing propagation / default on the link specifically but it just killed the link (unresponsive). Is there a middle ground?
Based on this question and my comment above:
It may help if you disable bootstraps onclick handler for your remote link. You need to give your link a special class and then write your own onclick handler.
link_to "Test", "/create_tags_dialog", :remote => true, { class: 'no_bootstrap' }
$(".no_bootstrap").click(function(e) {
e.stopPropagation();
e.preventDefault();
// You may still want to close the drop down manually here.
// See bootstrap documentation for this.
});
Update
Looks like you need to trigger the remote click event manually after you stopped propagation. Therefor you need to know how rails does it internally.
From viewing the source code I would say this could work like this:
$(".no_bootstrap").click(function(e) {
e.stopPropagation();
e.preventDefault();
$(e.target).trigger('click.rails');
});