0

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: enter image description here

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

Result: enter image description here

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.

Vlad Otrocol
  • 2,952
  • 7
  • 33
  • 55

1 Answers1

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.

Felix Borzik
  • 1,230
  • 12
  • 19
  • IT WORKED! I have been trying to do this for ages for I did not know how to manually call the markdown initializer. I did not really understand what this function meant: http://stackoverflow.com/questions/26907794/what-does-this-jquery-function-mean and couldnot decipher how the library worked – Vlad Otrocol Nov 13 '14 at 12:26
  • Thank you so mmuch I wish I could give you more in return than an up and accept answer! You are awesome! I spent more than 10 hours trying to figure this out! – Vlad Otrocol Nov 13 '14 at 12:27
  • I wish I knew what turbolinks were.. The turorials I've been ffollowing saud they are more advanced and that I shouldn't worry about them atm. – Vlad Otrocol Nov 13 '14 at 12:28
  • Yeah, it's the most often experienced problem when you're learning Rails :) – Felix Borzik Nov 13 '14 at 12:33