need rails like form_for tag in Rhodes - ruby-on-rails-3

Question

I was wondering if I can have something like form_for tag instead of the html tag in the edit.erb page in Rhodes. Because I have a Counter model with two attribs which I want to update them seperately based on the button pressed which resides right beside the value. I was able to do it in rails using the <%= form.submit 'up_a' %> & check which button was pressed in update method, like:
def update
#counter = Counter.find(params[:id])
if params[:commit] == 'up_a'
update_attri1 # simple increment method for attrib 1
elsif params[:commit] == 'up_b'
update_attri2 # simple increment method for attrib 2
end
end
and call that method to update that value.
So I want to have more control on what attribs I want to update based
on the clicks in form. Is there anyway I can achieve this in Rhodes?

Answer 1

EDIT :
The general problem seems to be that you want two submit buttons in a single form, each of which should do two slightly different things.
In the case that you only have two different values and one submit button for each, the simplest solution would be simply to make two forms that both call the update def (through their action-attribute), but each with their specific value of the query-parameter (in this case "commit"). These calls would have the following form:
<form method="POST" class="myForm" action="<%=url_for :controller => :Counter, :action => :update, :query => {:commit => 'up_a'}%>">
However, if you only want a single form (possibly also with many other input-values) there are several different ways to do it. In the following you will see a detailed implementation of one way to do it.
In this solution your buttons should NOT be submit buttons, but regular buttons (exactly how they are made with jQuery Mobile).
In order to make this solution work, you will need to use some javascript. You should therefore add the following javascript functions to your application.js and include it in your layout.erb.
function submitForm(formClass){
var activeForm = 'div.ui-page-active '+formClass;
$(activeForm).submit();
}
function callCounterSetUpdateAction(c){
$.get('/app/Counter/setUpdateAction', { commit: c});
}
Now that we have the needed javascript functions in place, lets take a look at edit.erb.
In this example Counter have three different attributes: a, b and c. We will however, only pay attention to a and b to begin with.
The form in your edit.erb file should be similar the implementation below. Notice, that the form actually doesn't have a submit button (as we will see later, the submit is actually made through our javascript function submitForm(formClass)).
<form method="POST" class="myForm" action="<%= url_for :action => :update %>">
<input type="hidden" name="id" value="<%= #counter.object %>"/>
<div data-role="fieldcontain">
<label for="counter[a]" class="fieldLabel">A</label>
<input type="text" id="counter[a]" name="counter[a]" value="<%= #counter.a %>" <%= placeholder( "A" ) %> />
</div>
<div data-role="fieldcontain">
<label for="counter[b]" class="fieldLabel">B</label>
<input type="text" id="counter[b]" name="counter[b]" value="<%= #counter.b %>" <%= placeholder( "B" ) %> />
</div>
<div data-role="fieldcontain">
<label for="counter[c]" class="fieldLabel">C</label>
<input type="text" id="counter[c]" name="counter[c]" value="<%= #counter.c %>" <%= placeholder( "C" ) %> />
</div>
<a data-role="button" data-transition="none" href="javascript:callCounterSetUpdateAction('up_a');">Update A</a>
<a data-role="button" data-transition="none" href="javascript:callCounterSetUpdateAction('up_b');">Update B</a>
</form>
Now that we have defined our view (edit.erb) lets take a look at the definitions we need our controller.
Firsly, as it can be seen from the href attribute on the buttons, what actually happens once we press a button is that it calls a javascript function which in turn calls the following def in the controller:
def setUpdateAction
$pressedButton = #params['commit']
WebView.execute_js("submitForm('.myForm');")
end
The purpose of this def is to store the parameter we sent from our button and then submit the form on the active page. Notice here that we added a class called myForm to the form shown above. You should also notice that we ensure that only the form on the active page is selected by adding 'div.ui-page-active ' to our formClass in the jQuery selection.
Finally, lets take a look at how your update definition should look like:
def update
#counter = Counter.find(#params['id'])
c = #params['counter']
if #counter
if $pressedButton == 'up_a'
# Update value A.
#counter.update_attributes(
{"a" => c['a']}
)
elsif $pressedButton == 'up_b'
# Update value B.
#counter.update_attributes(
{"b" => c['b']}
)
end
end
redirect :action => :index
end
It should be noticed here that we select which attributes to update based upon the $pressedButton variable we assigned through setUpdateAction. As a final comment we could also update multiple attributes as seen below (where we also update the 'c' attribute).
#counter.update_attributes(
{"b" => c['b'],"c" => c['c']}
)