iohzrd iohzrd - 4 months ago 12
Ruby Question

sinatra: yield the same form multiple times in one layout, iterating names

I'm writing a simple single page app. Right now the form.erb has 16 statically written forms that are all the same except their names and ids. I'd like to make it where form.erb only has one copy of the form but is yielded 16 times iterating the names and ids.

'/' gets routed to form.erb

get '/' do
erb :form
end


the current layout.erb body is

<body>

<h2>Relay Setup</h2>
<h2><p id="CurrentTime"></p></h2>
<p><strong>Note:</strong> Set On/Off times for each relay respectively.</p>

<%= yield %>

</body>


and the current form.erb is

<form name="relay1" id="relay1" action="/" method="POST">
<input name="relay1" type="hidden">
<input name="label" id="label" type="text" value="<%= @label %>";">
<input type="button" value="Add ON/OFF time" onClick="addInput('relay1');">
<input type="submit">
</form>


I already tried a for loop in the router with no success.
Do I just use more <%= yield %>'s and iterate the names in the router, or is there a flag to set in the layout? If not, is there some other, more proper way to accomplish this?

Thanks in advance...

Answer

is there some other, more proper way to accomplish this?

You can do this:

routes.rb:

get '/' do 

  @names_and_ids = [
    %w[nameA idA],
    %w[nameB idB],
    %w[nameC idC]
  ]

  erb :my_form

end

my_form.erb:

<% @names_and_ids.each do |(name, id)| %>

  <form name="<%= name %>" id="<%= id %>" action="/" method="POST">
    <input name="relay1" type="hidden">
    <input name="label" id="label" type="text" value="<%= @label %>";">
    <input type="button" value="Add ON/OFF time" onClick="addInput('relay1');">
    <input type="submit">
  </form>

<% end %> 

And using the following for views/layout.erb:

<!DOCTYPE html>
<head><title>Sinatra App</title></head>
<body>

<h2>Relay Setup</h2>
<h2><p id="CurrentTime"></p></h2>
<p><strong>Note:</strong> Set On/Off times for each relay respectively.</p>

<%= yield %>

</body>
</html>

will generate the following html:

<!DOCTYPE html>
<head><title>Sinatra App</title></head>
<body>

<h2>Relay Setup</h2>
<h2><p id="CurrentTime"></p></h2>
<p><strong>Note:</strong> Set On/Off times for each relay respectively.</p>


  <form name="nameA" id="idA" action="/" method="POST">
    <input name="relay1" type="hidden">
    <input name="label" id="label" type="text" value="";">
    <input type="button" value="Add ON/OFF time" onClick="addInput('relay1');">
    <input type="submit">
  </form>


  <form name="nameB" id="idB" action="/" method="POST">
    <input name="relay1" type="hidden">
    <input name="label" id="label" type="text" value="";">
    <input type="button" value="Add ON/OFF time" onClick="addInput('relay1');">
    <input type="submit">
  </form>


  <form name="nameC" id="idC" action="/" method="POST">
    <input name="relay1" type="hidden">
    <input name="label" id="label" type="text" value="";">
    <input type="button" value="Add ON/OFF time" onClick="addInput('relay1');">
    <input type="submit">
  </form>



</body>
</html>

which looks like this:

enter image description here

Do you really want multiple submit buttons?