I did long research, but cannot find solution. I want to make a list of toggle-buttons in my form and then save ones checked by user. I know that I can named toggle-button and then find it in controller by params[:togglebutton-name], but it seems that toggle-button hasn't got any value. So for example I have 5 toggle-buttons, and user will check two of them. Then I want to know about it in Controller. What should I do?
toggle-buttons:
<% current_user.type_tags.each do |type_tag| %>
<button name="type<%= type_tag.id %>" id="associated-type-tag-<%= type_tag.id %>" type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
<%= type_tag.name %>
</button>
<% end %>
Controller:
def create
#try = params[:type1]
render 'help'
end
Help:
Value: <%= #try %>;
And in result I have this:
Value: ;
I've already found the solution. I used btn-group with data-toggle: "buttons". Inside I have label and input with type=checkbox. That approach allows me to get a true value in my Controller if button is pressed. I can style the buttons on my own too.
I hope it will be useful for somebody.
<div class="btn-group" data-toggle="buttons">
<% current_user.type_tags.each do |type_tag| %>
<label class="btn btn-primary">
<input name="type<%= type_tag.id %>" id="associated-type-tag-<%= type_tag.id %>" type="checkbox" autocomplete="off">
<%= type_tag.name %>
</input>
</label>
<% end %>
</div>
Related
I customised my collection radio buttons of my form, everything work when the value is a simple strings choice but i dont success to save the select value when its this type of field
Original field
<%= f.collection_radio_buttons(:negociateur, Nego.where(user: current_user), :first_name, :first_name) %>
What i tried to do
<div class="btn-group" data-toggle="buttons">
<% #negos.where(user: current_user).each do |n| %>
<label class="btn btn-danger" style="margin-right: 10px;">
<input id="bien_negociateur_true" name="bien[negociateur]" type="radio" autocomplete="off" value= '<% n.first_name %>' /* the problem is here */ /> <%= n.first_name %>
</label>
<% end %>
</div>
I am trying to use a simple html5 form in Ruby on Rails. My fieldset code:
<fieldset class="form-group">
<legend><%= question.title %></legend>
<% question.answers.each do |answer| %>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="question-<%= question.id %>" value="answer-<%= answer.id %>">
<%= answer.title %>
</label>
</div>
<% end %>
</fieldset>
is displayed correct, and when I select one or several options and submit, I have only one parameter in the request as it were radiobutton form although I selected several variants:
{"question-162"=>"answer-467"}
How to make this form working correct and send multiply parameters in the submit request?
Change the name attribute of the checkbox to question-<%= question.id %>[] (adding trailing []), and you will get request parameters like below:
{"question-1"=>["answer-1", "answer-3"]}
I want make the label text clickable, so that the corresponding radio button is set selected.
For that i need to set a for attribute in the label with the id from radio button.
# in html.erb
<li>
<%= radio_button_tag "size_id", size.id %>
<%= label_tag size.id, size.presentation %>
</li>
the generated output:
<li>
<input type="radio" name="size_id" id="size_id_8" value="8">
<label for="8">XL</label>
</li>
The output i want is:
<li>
<input type="radio" name="size_id" id="size_id_8" value="8">
<label for="size_id_8">XL</label>
</li>
How can i get the id="size_id_8" from radio button to the label for="size_id_8" ?
You can get the desired output like this.
<li>
<%= radio_button_tag "size_id", size.id %>
<%= label_tag "size_id#{size.id}", size.presentation %>
</li>
This will produce following HTML in your case:-
<li>
<input type="radio" name="size_id" id="size_id_8" value="8">
<label for="size_id_8">XL</label>
</li>
Following should work
<%=label_tag 'size_id_'+size.id, size.presentation%>
I have a form created using Simple Form, as such
<%= simple_form_for #organisation do |f| %>
<div class="form-inputs">
<%= f.association :causes, as: :check_boxes %>
<div class="form-actions">
<%= f.button :submit %>
</div>
<% end %>
The page works fine when I use a browser, but when I try to check this with Capybara, such as:
check('organisation_cause_ids_1')
And have tried many variations of this e.g.
find(:xpath , '//*[#id="organisation_cause_ids_1"]').set(true)
find("organisation_cause_ids_1").check
These always give an error:
Failure/Error: check('organisation_cause_ids_1')
Capybara::ElementNotFound:
Unable to find checkbox "organisation_cause_ids_1"
The HTML generated by Simple Form is:
<div class="input check_boxes optional organisation_causes">
<label class="check_boxes optional">Causes</label>
<span class="checkbox">
<label for="organisation_cause_ids_1" name="organisation[cause_ids]">
<input class="check_boxes optional" id="organisation_cause_ids_1" name="organisation[cause_ids][]" type="checkbox" value="1" />Cause A</label>
</span>
<span class="checkbox">
<label for="organisation_cause_ids_2" name="organisation[cause_ids]">
<input class="check_boxes optional" id="organisation_cause_ids_2" name="organisation[cause_ids][]" type="checkbox" value="2" />Hunger</label>
</span>
...
Edit: The problem was due to the lazy loading of the 'Causes' I created with the factories. They weren't being created so the page had no checkboxes.
Try with this
find_by_id('organisation_cause_ids_1').find("checkbox[value='1']").select_option
or maybe with this
find(:css, ".check_boxes[value='1']").set(true)
I am using Firebase in a pretty simple chat application. One of the features i'm working on now is the ability to update messages in the chat room, but only if you were the original author. For the editing i have an icon that, when clicked, will do some javascript to hide the message div and display a previously hidden div that has the update form in it. But i only want this to be available if you were the author of the message. Here's what the code looks like:
<li class="message phm pvm pull-left" ng-repeat="(msgId,msg) in room.messages">
<div class="message-current" data-message-id="{{msgId}}">
<span class="message-author pull-left">{{msg.author}}</span>
<span class="message-body pull-left pls">{{msg.body}}</span>
<span class="message-timestamp pull-right prs">
{{msg.timestamp | date:'MMM d, yyyy h:mm a'}}
<a class="message-update-link" href="#" ng-click="showMessageUpdate(msgId)"><span class="glyphicon glyphicon-pencil"></span></a>
</span>
</div>
<div class="message-update hidden" data-message-id="{{msgId}}">
<form class="form-inline" ng-submit="updateMessage(roomId, msgId, '<%= current_user.full_name %>')">
<textarea class="form-control update-message" ng-model="msg.body" ng-trim="false">{{msg.body}}</textarea>
<input class="button button-large button-primary" type="submit" value="Update">
</form>
</div>
</li>
Right now, i can only get it to have updatable message for ALL message or no messages. Basically, the part i am stuck on is the check of whether or not the angularjs value of {{msg.author}} is equal to the rails value of <%= current_user.id %>. Any thoughts on how this can be achieved? Thanks for any help!
SOLVED:
Thanks to Jiten for the step in the right direction. I'm new to learning AngularJS and it's pretty complex. Sometimes you just need to know where to start.
I ended up using a combination of the ngIf directive and the angular.equals function. In my rails view i used ng-if="isAuthor(msg.author, '<%= current_user.full_name %>')" on anything i wanted available to authors of that message only. This will evaluate the response of isAuthor() and only render to the dom if it evaluates to true. The code above now looks like this:
<li class="message phm pvm pull-left" ng-repeat="(msgId,msg) in room.messages">
<div class="message-current" data-message-id="{{msgId}}">
<span class="message-author pull-left">{{msg.author}}</span>
<span class="message-body pull-left pls">{{msg.body}}</span>
<span class="message-timestamp pull-right prs">
{{msg.timestamp | date:'MMM d, yyyy h:mm a'}}
<a ng-if="isAuthor(msg.author, '<%= current_user.full_name %>')" class="message-update-link" href="#" ng-click="showMessageUpdate(msgId)"><span class="glyphicon glyphicon-pencil"></span></a>
</span>
</div>
<div ng-if="isAuthor(msg.author, '<%= current_user.full_name %>')" class="message-update hidden" data-message-id="{{msgId}}">
<form class="form-inline" ng-submit="updateMessage(roomId, msgId, '<%= current_user.full_name %>')">
<textarea class="form-control update-message" ng-model="msg.body" ng-trim="false">{{msg.body}}</textarea>
<input class="button button-large button-primary" type="submit" value="Update">
</form>
</div>
</li>
Here is what isAuthor() looks like in my AngularJS controller:
$scope.isAuthor = function(msgAuthor, currentUser) {
return angular.equals(msgAuthor, currentUser);
}
Pretty simple really!
To compare two objects you can use:
angular.equals({{msg.authorId}}, <%= current_user.full_name %>)