How and when does rails load a gem library?

Question

I have a gem installed : http://toopay.github.io/bootstrap-markdown/

This library is supposedd to turn a textarea element into a stylized mardown editor.

To do this I used the following code:

 <div class="well col-md-10 col-md-offset-1">
 <%= form_for(:post, :url => {:action => 'create'}) do |f| %>
    <%= f.text_field(:title, class: 'form-control')%>
    <%= f.text_field(:description, class: 'form-control')%>
    <%= f.text_area(:content, rows: 15, "data-provide" => "markdown")%>
    <%= f.button "Submit", type: 'submit', class: 'btn col-md-4 col-md-offset-4 btn-large btn-success'%>
<% end %>
</div>

Initially I put this code on my root page and it worked perfectly. I then created a new controller and moved it to a different view. I was accessing that view by manually typing the url in the browser: localhost:3000/controller/view and the page loaded perfectly.

Result here:

However, when I access the page through a link on a different page, the form was not stylized.

Result:

The odd thing is that if I reload the page it applies all the changes.

I made a temporary ugly hack that reloads the page one on every access:

$(document).ready(function(){    
    //Check if the current URL contains '#'
    if(document.URL.indexOf("#")==-1){
        // Set the URL to whatever it was plus "#".
        url = document.URL+"#";
        location = "#";

        //Reload the page
        location.reload(true);
    }
});

But there must be a decent explanation for what is going on.

I went through the library itself and added some console.log statements. It seems that the library is loaded and initialisez on the home page but when I click the link it does not run anything anymore.

I am trying really hard to understand if this is a rails problem or a library one.

Answer 1

You have an issue with Turbolinks. First, remove data-provide attribute to initialize input yourself and add a class, like markdown-editor.

<%= f.text_area(:content, rows: 15, class: "markdown-editor")%>

Second, add a Javascript initializer:

$(document).on('ready page:load', function(){
  $(".markdown-editor").markdown()
});

Then it will be initialized on each page load.