How to send back js.haml in rails

jquery ruby-on-rails haml
Cameron picture Cameron · Oct 25, 2009 · Viewed 19.4k times · Source

I have a rails create action which send back some jquery in a file:

create.js.erb

var appearance = $("<%= escape_javascript(render(:partial => @appearance)) %>").effect("highlight", {color: '#E6ff00'}, 2000);
$("#sortable").append(appearance);
$("#new_appearance")[0].reset();

I have started using HAML and want to know how I should be converting this. Can I use js.haml? If so what should the markup look like?

Answer

Karl picture Karl · Feb 17, 2011

Actually, returning JS in HAML is pretty easy, just use the :plain filter and enclose anything you want evaluated in #{}.

:plain
  var appearance = $("#{escape_javascript(render(:partial => @appearance)}").effect("highlight", {color: '#E6ff00'}, 2000);
  $("#sortable").append(appearance);
  $("#new_appearance")[0].reset();

Do not use the :javascript filter as it will enclose everything in a tag which is unnecessary.

If you need to use some logic, just put the :plain inside the nesting.

- if params[:printing]
  :plain
    $('#print-view').html("#{escape_javascript(render 'print_preview')}");

Sorry ERB.

Related questions

render a partial from jquery and haml

The functionality I plan on doing is to insert some form elements depending on a number chosen from a select tag. I have a select tag called for number_of_passengers, and i plan to dynamically append new passenger fields …

Read More
jQuery: how to change title of document during .ready()?

I am using some nested layouts in Ruby on Rails, and in one of the layouts i have a need to read in a string from a div and set that as the title of the document. What is correct …

Read More
How to get the selected date value while using Bootstrap Datepicker?

Using jquery and the Bootstrap Datepicker, how do I get the new date value I selected using the Bootstrap Datepicker? FYI, I'm using Rails 3 and Coffescript. I set up the datapicker using: <input id="startdate" class="span2 datepicker" type="…

Read More