erb code is not working in javascript <script> tag

Question

I have Post table with title and content attributes. I want to make auto complete textfield where user are suggested by Post title. I am trying to add jquery auto-complete in my rails application. I am doing like this ..

controller (Adding Posts title in Array)--

  @posttitle = []
  Post.all.each do |g|
    @posttitle << g.title 
  end

View --

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

  <%= text_field_tag :search, params[:search], :placeholder => "Search Religious Places...", :id=>"tags" %>

 <script>
   $(function() {
   var availableTags = <%= @posttitle %>;
   $( "#tags" ).autocomplete({
   source: availableTags
   });
   });
 </script>

But its not showing any suggestion (auto-complete is not working). I don't know whats going wrong. Please help

I think you should not use the ruby array in javascript. It will not evaluated as an array. — Manoj Monga
– Manoj Monga, Commented Jun 11, 2013 at 11:47

Ermin Dedovic · Accepted Answer · 2013-06-11 15:00:23Z

8

Have you tried something like this:

<script>
   var availableTags = <%= raw @posttitle %>;
   $(function() {

        $( "#tags" ).autocomplete({
         source: availableTags
        });
   });
</script>

edited Jun 11, 2013 at 15:00

answered Jun 11, 2013 at 12:08

Ermin Dedovic

9074 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Free-Minded Over a year ago

Thanks for your contribution once again but still not working :(

Free-Minded Over a year ago

@posttitle is a Array if I put like this <%= @posttitle %> in my html then it will show array like this ["xyz", "wxt", "etc"]

Ermin Dedovic Over a year ago

Can you try to edit first line to say $(document).ready(function() {

Free-Minded Over a year ago

Problem is not $(document).ready(function() { this. When I put hard coded value like

var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ];

then it works fine...

Free-Minded Over a year ago

hats off dude, you just save my life :) Thank you so much :) Its working

|

Jesse Wolgamott · Accepted Answer · 2013-06-11 13:41:24Z

1

If you want an array of items in Ruby to appear as a javascript array, you'll need to:

1) get it into a comma separated list of values 2) wrap each value in quotes 3) escape the value so that quotes do not cause javascript errors

If you want just the title:

controller:

@titles = Post.pluck(:title)

and then in your view:

 <script>
   $(function() {
     var availableTags = [<%= @titles.map{|title| escape_javascript(title)}.join(", ") %>];
     $( "#tags" ).autocomplete({
       source: availableTags
     });
   });
 </script>

edited Jun 11, 2013 at 13:41

answered Jun 11, 2013 at 13:02

Jesse Wolgamott

40.3k4 gold badges86 silver badges109 bronze badges

3 Comments

Free-Minded Over a year ago

Thanks for your reply. Line @titles = Post.all.pluck(:title) should be @titles = Post.pluck(:title). I tried from this way, not working

Free-Minded Over a year ago

auto-complete function is not working. Its not showing any suggestion. Well I tried to do like this

<script>    $(function() {     var availableTags = [<%= @titles.map{|title| escape_javascript(title)}.join(", ") %>];      $('#tags').focus(function() {            alert('hi');       });    });  </script>

for testing purpose but alert box is not showing means line 1 is not executed correctly...

Gavin Esplin Over a year ago

I don't think this needs its own answer, and maybe this wasn't possible when written, but another way to do this would be to use to_json so: var availableTags = <%= @titles.map(&:title).to_json.html_safe %>

Manoj Monga · Accepted Answer · 2013-06-11 11:54:05Z

0

I think you should not use the ruby array in javascript. It will not evaluated as an array. Instead you can create the javascript array and use it as

<script>
  $(function() {
    var availableTags = new Array();
    <% @posttitle.each do |post| %>
      availableTags.push(<%= post %>);
    <% end %>
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });
</script>

answered Jun 11, 2013 at 11:54

Manoj Monga

3,08317 silver badges19 bronze badges

1 Comment

Free-Minded Over a year ago

I tried to put like this

<script>    $(function() {       var availableTags = new Array();       <% @posttitle.each do |post| %>         availableTags.push(<%= post %>);     <% end %>      $('#tags').focus(function() {            alert('hi');       });    });  </script>

but alert box is not showing. It means var availableTags... that line having error

Collectives™ on Stack Overflow

erb code is not working in javascript <script> tag

3 Answers 3

9 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related