1

Please help, I am new to haml and ace but I would like to incorporate Ace to some existing textareas. I saw a similar problem here but it is in html. I don't know how to translate the solution in haml code.

This is the existing haml code for the textarea

        #phoenix_tab.tab-pane.active{ data: { target_id: 'phoenix_tab', role: "tabpanel" }}
            = f.input :phoenix_query_string, label: 'Query String', as: :text, placeholder: 'Enter Phoenix Query String'
            .col-md-offset-2.text-muted{ style: 'margin-top: -1em; text-indent: 10px; font-size: 80%' }
              * Execution type should be set to 'Phoenix or Phoenix (enhanced)' for this to take effect

I've tried adding this js to the code

    var editor = ace.edit("bigdata_query_phoenix_query_string");
    editor.setTheme("ace/theme/monokai");
    editor.session.setMode("ace/mode/sql")

and this is how it is styled

#bigdata_query_phoenix_query_string {
  position: absolute;
  top: 0; 
  right: 0;
  bottom: 0;
  left: 0;
}

I've also added ace.js and mode-sql.js to my js files but the result is as shown in the image below enter image description here

Expected Result: Ace Editor applied to textarea

Actual Result: No textarea available

I don't quite understand what I am doing wrong. Please help

tricenee
  • 51
  • 1
  • 3
  • there is no element with the id bigdata_query_phoenix_query_string in the haml snippet you show, so it can be the cause of the error. But in general haml itself is not very relevant to the question, just make sure it generates html comparable to the html in the other question. – a user Aug 08 '20 at 13:12

0 Answers0