How to stop ruby escaping javascript?

11155 · November 14, 2012, 5:25pm

Hi all.

If In my view I have:

<%= text_field_tag('name','',:onfocus => "for (var i=1;i<99999;i++){};" %>

I'd expect to have this html:

instead I have:

And obviously the javascript code does not work...

I also tried this: <%= text_field_tag('name','',:onfocus => "for (var i=1;i<99999;i++){};".html_safe %>

but the output is the same

Thanks to all.

Max_Shytikov · November 14, 2012, 6:25pm

Hi

Only one solution you should use method ‘tag’ directly

https://github.com/rails/rails/blob/39b9c943b7ec5181c19461d319d8c610ea1bf941/actionpack/lib/action_view/helpers/tag_helper.rb#L65

Because escape = true by default for ‘text_field_tag’ https://github.com/rails/rails/blob/c091fae21f32250b19475f124c3b680dbbc163d9/actionpack/lib/action_view/helpers/form_tag_helper.rb#L170

P.S: Do not use inline JS .

11155 · November 15, 2012, 11:35am

Max Shytikov wrote in post #1084457:

Only one solution you should use method 'tag' directly

github.com

rails/rails/blob/39b9c943b7ec5181c19461d319d8c610ea1bf941/actionpack/lib/action_view/helpers/tag_helper.rb#L65


      
          #   # => <input type="text" disabled="disabled" />
          #
          #   tag("img", :src => "open & shut.png")
          #   # => <img src="open &amp; shut.png" />
          #
          #   tag("img", {:src => "open &amp; shut.png"}, false, false)
          #   # => <img src="open &amp; shut.png" />
          #
          #   tag("div", :data => {:name => 'Stephen', :city_state => %w(Chicago IL)})
          #   # => <div data-name="Stephen" data-city-state="[&quot;Chicago&quot;,&quot;IL&quot;]" />
          def tag(name, options = nil, open = false, escape = true)
            "<#{name}#{tag_options(options, escape) if options}#{open ? ">" : " />"}".html_safe
          end
          
          # Returns an HTML block tag of type +name+ surrounding the +content+. Add
          # HTML attributes by passing an attributes hash to +options+.
          # Instead of passing the content as an argument, you can also use a block
          # in which case, you pass your +options+ as the second parameter.
          # Set escape to false to disable attribute value escaping.
          #
          # ==== Options

Thank you, This works!

But finally I ended making a

getElementById("name").onfocus = ...

on load instead of changing all my text_field_tag with tag

P.S: Do not use inline JS .

You're right, but my problem is that I have ruby code in rhtml that generates css and javascript codes. These codes are not static but depend on ruby variables values.

I can't figure out how to pass a ruby variable into an external css or js file...

So I have to keep all the code in one big (sigh!) rhtml...

11155 · November 15, 2012, 4:37pm

Sam Pei wrote in post #1084545:

Max Shytikov wrote in post #1084457: I can't figure out how to pass a ruby variable into an external css or js file...

So I have to keep all the code in one big (sigh!) rhtml...

The simplest way is to not pass the data to JavaScript, but rather get the value from the DOM using JavaScript/jQuery. This is accomplished by using HTML5 data attributes.

Say you have a Ruby variable x:

HTML

11155 · November 15, 2012, 7:39pm

Robert Walker wrote in post #1084592:

Sam Pei wrote in post #1084545:

Max Shytikov wrote in post #1084457: I can't figure out how to pass a ruby variable into an external css or js file...

So I have to keep all the code in one big (sigh!) rhtml...

The simplest way is to not pass the data to JavaScript, but rather get the value from the DOM using JavaScript/jQuery. This is accomplished by using HTML5 data attributes.

Say you have a Ruby variable x:

HTML ------------ <div id="my_div" data-x="my_ruby_value">My content</div>

JavaScript ------------ function myFunction() { var x = $('#my_div').data("x"); // Do something with x }

Ryan Bates did a Railscasts episode on a few techniques to keep your JavaScript unobtrusive and yet still have access to your Ruby data:

#324 Passing Data to JavaScript - RailsCasts

Thank you, I am doing so.

But $('#my_div').data("x") is not working form me, I had to do this:

HTML: <div id="my_div" data-x='<%= my_ruby_var %>'>

JS: var div=document.getElementById('my_div'); var x = div.getAttribute("data-x");

Btw, I think I could remove all Javascript code by rhtml by using this.

But what about css? Could something like that be done with css?

I have inline css with the :style attribute where I put my ruby variable: (...) :style => "width:" + my_ruby_var + "px" (...)

If i want to do a separate css file, how can I access to this ruby variable from inside the .css ?

Thank You