How to render partials on page load within a Haml file in Rails

Question

How do I render a partial from within a JavaScript tag in a Haml file?

I want the Save button to be displayed when the page has finished loading.

At the moment, the file (partial) looks like this:

.form-group.form-actions
  .col-sm-offset-2.col-sm-10
    %button.btn.btn-primary{type: "submit", name: "save"
      %i.icon-white.icon-ok
      = t("Save")

I moved the %button.btn.btn-primary section into another partial file, _save_button.html.haml and tried the following:

.form-group.form-actions
  .col-sm-offset-2.col-sm-10
    :javascript
      $(document).ready( function() {
        $.ajax({
          type: "GET",
          url: "<%= render partial: 'save_button' %>" ,
          success: function(data){
            //if ever there is something more to do (there is also an error handler)
          }
        });
      });

This had no affect though, the Save button did not show up.

How can I load the partial on load?

Answer 1

For starters, it looks as though you're using ERB syntax in your URL. The <%= opening is not HAML syntax.

As for rendering the partial within the JavaScript method, I don't think Ajax is what you want. You're already using $(document).ready so anything you execute in there should happen after the document has loaded.

Answer 2

You can render a Haml partial inside JavaScript code, but you need to escape the HTML so the browser doesn't think it's code:

someHtml = "#{ j render(partial: 'your_partial') }";

j is a shortcut for escape_javascript .

You want #{... } instead of <%=... %> for Haml.