CODEWITHSUNDEEP
ruby-on-railstwitter-bootstrap
Jason Bray
Jason Bray

Reputation: 544

Bootstrap Popover and Rails

Okay so this question has to do with the proper syntax for html.erb code. What I'm trying to do is use a popover button to display a form. I am able to make a button through the button_tag function, and I am able to make the form from the form_tag function, but I am not able to embed one inside the other. I'm not even entirely sure that this is something I should be doing at all. My understanding was that best practices is to avoid using html when you can use erb to do the work of generating the page.

Anyway, here is the code I have thus far:

<%= button_tag "Remove Friend", :title=>"Remove from Friend List", 
    :id=>"removeFriend", :class=>"btn btn-default", :rel=>"popover", 
    :data => {:html=>"true", :placement=>"top", :content=>
    "form_tag(\"/friend\", method: \"post\") do 
        label_tag(:symbolInput, \"Enter Username\")
    text_field_tag(:symbolInput)
    submit_tag(\"Remove\") 
end"}%>

So what this does is generate the following HTML

<button class="btn btn-default" data-content="form_tag(&quot;/friend&quot;, 
    method: &quot;post&quot;) do 
    label_tag(:symbolInput, &quot;Enter Username&quot;)
    text_field_tag(:symbolInput)
    submit_tag(&quot;Remove&quot;) 
    end" data-html="true" data-placement="top" id="removeFriend" 
    name="button" rel= "popover" title="Remove from Friend List" 
    type="submit">Remove Friend</button>

So essentially it just literally copied the erb code as text into the popover.

I have also tried framing each line with <%= %>, but I am very unclear on what the syntax for this would be, or when you should do that.

Basically what needs to happen is that the erb for the form has to be translated to html, which will then be passed to the :content section of the button_tag.

Should I be doing this in this way, or is there some other method to accomplish what I am trying to do? Being new to rails, I'm not sure what the best practices are.

By the way, if I use html to code either the form or the button and erb for the other one, it works perfectly, so there is a work around.

Upvotes: 1

Views: 835

Answers (1)

Evolve
Evolve

Reputation: 9193

The minute you are inside the Embedded Ruby Tags eg <% %> then everything you do inside here is just ruby or to say it another way must be valid ruby, can be any ruby.

The first refactoring I would do is to move all that content code out own it's own. This halfway point is tidier and should give you a better idea.

<% remove_friend_form = "form_tag(\"/friend\", method: \"post\") do 
        label_tag(:symbolInput, \"Enter Username\")
    text_field_tag(:symbolInput)
    submit_tag(\"Remove\") end" %>

<%= button_tag "Remove Friend", :title=>"Remove from Friend List", 
    :id=>"removeFriend", :class=>"btn btn-default", :rel=>"popover", 
    :data => {:html=>"true", :placement=>"top", :content=> remove_friend_form }%>

After you isolate the content it becomes more obvious that the 'remove_friend_form' could be isolated even further. To do this move this content into it's own partial.

# create new file in the same folder as the current view.
# _remove_friend_form.html.erb

<%= form_tag("friend", method: "post") do |f| %>
  <%= f.label_tag(:symbolInput, "Enter Username") %>
  <%= f.text_field_tag(:symbolInput) %>
  <%= f.submit_tag("Remove") %>
<% end %>

The main page now looks like this

<%= button_tag "Remove Friend", :title=>"Remove from Friend List", 
    :id=>"removeFriend", :class=>"btn btn-default", :rel=>"popover", 
    :data => {:html=>"true", :placement=>"top", :content=> (render partial: 'remove_friend_form') }%>

Upvotes: 1

Related Questions