Rails View using HAML template: Hiding checkbox and label by default - ruby-on-rails

I'm working on a Rails View, it is using HAML as template, specifically I'm trying to display some records into a table with the bellow code:
%table.dataTable.miw430p.mw600p#program_types
%tbody
- JSON.parse(#student.subjects.to_json).each do |subject|
%tr{:data=>{:position => program_type["index"], :id => subject["id"]}, class: cycle("odd", "even")}
%td
%span(data-display-not-editing)= subject["name"]
%input.form-styled(type='text' name='name' data-display-not-editing class="hidden" required)
%label.ml5
%input(type='checkbox' name='status' class="hidden")
= "#{t('school.admin.current_status')}"
%td.right
%span.glyphicon.glyphicon-pencil.clickable.ml5(data-display-not-editing data-edit class="clickable")
%span.glyphicon.glyphicon-trash.clickable.ml5.mr5(data-display-not-editing class="clickable")
%button.btn(type='button' data-display-not-editing class="hidden" data-button-save)= t('school.save')
%button.btn(type='button' data-display-not-editing class="hidden" data-button-cancel)= t('school.cancel')
By default I'm hiding a textbox and a label, if the user clicks on data-edit, they will be shown, these are the specific lines what I'm talking about:
%input.form-styled(type='text' name='name' data-display-not-editing class="hidden" required)
%label.ml5
%input(type='checkbox' name='status' class="hidden")
= "#{t('school.admin.current_status')}"
The checkbox is hidden but the element school.admin.current_status is visible, my question is: how can I hide the element school.admin.current_status by default just like the checkbox?
Thanks a lot

Put class: 'hidden' one level up
%input.form-styled(type='text' name='name' data-display-not-editing class='hidden' required)
%label.ml5{class='hidden'}
%input(type='checkbox' name='status')
= t('school.admin.current_status')
Or place translation in hidden div
%input.form-styled(type='text' name='name' data-display-not-editing class='hidden' required)
%label.ml5
%input(type='checkbox' name='status' class='hidden')
.hidden= t('school.admin.current_status')

Related

Unable to define siteprism element from a given label text

I'm using a cucumber/ruby/capybara/siteprism framework and I'm having problems identifying elements as either we're missing the ids, names, etc or they create them with a in real time.
I was mainly trying to define some of those elements in a siteprism page object model. For example, I was trying to enter some data in the 'input' field for 'First Name' below:
<div class="control-group">
<label class="control-label" for="input_field_dec_<random_number>">
First Name
<span class="required"></span>
</label>
<div class="controls">
<input id="input_field_dec_<random_number>" class=" span5" type="text" value="" scripttofire="SetUserFirstName('input_field_dec_<random_number>')" required="required" name="input_field_dec_<random_number>" data-val-required="First Name is required" data-val-regex-pattern="^[a-zA-Z0-9_ \-\']*$" data-val-regex="Only alphabetic and numeric characters allowed" data-val="true">
<span class="field-validation-valid help-inline" data-valmsg-for="input_field_dec_<random_number>" data-valmsg-replace="true"></span>
</div>
</div>
Is there a way to pass the label text (eg: 'First Name' - ignoring the spaces around, something like - contains='First Name') and then find the input element inside to set it up?
I was thinking something along the lines of:
element :first_name_field, :xpath, "//label[contains(text()='Continue'])/<and here something to find the input field?>" but cannot figure it out...
Capybara provides a bunch of built-in "selectors" that can be used for this, and you can add your own if you find it necessary. You can see the provided selectors by either building the Capybara docs yourself (rubydocs doesn't run the custom yard code used to generate that part of the docs) or by browsing the file where they are implemented - https://github.com/teamcapybara/capybara/blob/master/lib/capybara/selector.rb#L47
For your original example you can use the :field selector
element :first_name_field, :field, 'First Name'
which will match on the inputs associated label text. For you second example (from the comments) where the input and label have no connection (wrapped or for attribute) you should be able to do something like
element :some_field, :xpath, ".//label[contains(normalize-space(string(.)), 'label text')]/following-sibling::*[1]/self::input"
If you wanted to make that reusable you could add your own "selector" like
Capybara.add_selector(:sibling_input) do
label "Label adjacent sibling input"
xpath do |locator|
XPath.descendant(:label)[XPath.string.n.is(locator)].next_sibling(:input)
end
end
which could then be used as
element :some_field, :sibling_input, 'label text'

Capybara doesn't want to select an input node

My HTML/ERB looks like this
<fieldset class="row notifications">
<legend>
<hr class="dash blue inline">
<%= t :my_notifications %>
</legend>
<label>
<%= f.check_box(:subscribed_to_news) %>
<span></span>
<span class="checkbox-text"><%= t :accepts_to_receive_news %></span>
<br>
</label>
</fieldset>
When I debug my Cucumber test with Capybara, I do find the notification checkbox f.check_box(:subscribed_to_news) in this mess
page.find('.notifications label')['innerHTML']
# => "\n\t\t<input name=\"user[subscribed_to_news]\" type=\"hidden\" value=\"0\"><input type=\"checkbox\" value=\"1\" checked=\"checked\" name=\"user[subscribed_to_news]\" id=\"user_subscribed_to_news\">\n\t\t<span></span>\n\t\t<span class=\"checkbox-text\">blahblahblah</span>\n\t\t<br>\n\t"
But for some reason I cannot find the nested inputs nor find them by ID
page.find('.notifications label input')
# => Capybara::ElementNotFound Exception: Unable to find css ".notifications label input"
page.find('.notifications label #user_subscribed_to_news') # => Capybara::ElementNotFound Exception: Unable to find css ".notifications label #user_subscribed_to_news"
Selecting the label does work though
page.find('.notifications label')
# => #<Capybara::Node::Element tag="label" path="//HTML[1]/BODY[1]/DIV[1]/MAIN[1]/SECTION[1]/FORM[1]/FIELDSET[3]/LABEL[1]">
What am I doing wrong ? I just want to check the damn checkbox :'(
Most likely reason is the checkbox is actually hidden by CSS and then replaced with images to enable identical styling of checkboxes across different browsers. If you're using the latest Capybara you can have it click it the label when the checkbox is hidden by calling
page.check('user_subscribed_to_news', allow_label_click: true) # you can also set Capybara.automatic_label_click = true to default to this behavior
or if using an older capybara you would need to click the label yourself
page.find(:label, "blahblahblah").click #match on labels text
or
page.find(:label, for: 'user_subscribed_to_news').click #match on labels for attribute if set
It would seem that the checkbox is unreachable via normal css /xpath...
I got away using some javascript
page.execute_script(%Q{document.querySelector('#{area} input##{selector}').click()})

Rails - Add HTML attribute without setting a value

I'm trying to create an image_tag and specify a data- attribute that does not have any value set to it. I'm trying to add data-tooltip, for use with Foundation 5 tooltips. It seems that if any value is actually set to this, Foundation uses the same tooltip text every time and ignores the title attribute of that element (so every tooltip will say whatever the first one you hovered on was... which seems buggy in and of itself on Foundation's part also)
This is what I need to generate:
<img src="[whatever]" title="My Tooltip" data-tooltip />
This will not work for me:
<img src="[whatever]" title="My Tooltip" data-tooltip="[insert anything here]" />
I have tried a number of different combinations, and read documentation, but it seems no matter what I put as the value, it ends up generating it like data-tooltip="null", or true, or false, or any string I pass.
image_tag(my_image, class: 'has-tip', title: "My Title Here", data: { tooltip: true })
Try to pass in empty string as follows:
image_tag(my_image, class: 'has-tip', title: "My Title Here", data: { tooltip: "" })
In Rails 4.1.4 using above tip :"data-tooltip" => '' renders data-tooltip without value.
For an attribute with no value like multiple <input multiple type="file">, you can override the attribute default name, by uppercasing and setting an empty string. For example input_html: { Multiple: '' } But this is a hack.
In rails 5, I was trying to add itemscope attribute with no value in the following link tag scenario:
<%= link_to example_path(#example) do %>
<span>
<%= #example.name %>
</span>
<% end %>
I needed the resulting html a tag to show the itemscope attribute without any value like so:
<a itemscope href="example/path">
<span>
some text
</span>
</a>
Notice the itemscope has no ="" or itemscope="itemscope".
I tried solutions from SO and other places and the only thing that worked for me was adding the following to the link_to tag: " itemscope" => ''. Notice the space between the first double quote and the word itemscope.
This seems to generate the desired outcome and also validated as schema.org tag on google (that is what i used the tag for).

how to put place holder for <%= f.datagrid_filter filter%>?

I made a rails application, and I used datagrid gem to handle filters, pagination,and orders(ascending and descending). I was supposed to write <%= f.datagrid_filter filter%> to filter according to a filed of the table(Ex:title field in topics table).
Now <%= f.datagrid_filter filter%> returns a traditional html input tag like below. <input id="topic_report_title" class="title string_filter" type="text" size="30" name="topic_report[title]"> in the html console.
Now I want to put placeholder in that helper method only.
Can anybody help please?
Have you tried to do the following: <%= f.datagrid_filter filter, :placeholder => "placeholder text"%>

ASP .Net MVC, problem with checkboxes!

Basically I have a set of checkboxes that are dynamically created from view data like so:
<input type="checkbox" name="Calendars" value="<%= c.ID %>" /><%= c.Name %>
The value being the Calendar Id.
I can get what checkbox has been brought back using the FormsCollection its messy but it works!
(There also seems to be a bug with the checkbox helper that renders a hidden field next to the checkbox which means true is actually returned as "true,false"! I can work around this so its not an issue just thought Id mention it)
The problem comes when trying to hook the checkboxes up on an edit page!
I have a schedule class which can have multiple calendars and I want to show which calendars a schedule has by checking them on the edit!
My view is strongly typed but MVC magic can't map this!
Any ideas on whats the best way to do this??
I had tried passing the calendar ids in ViewData and do some inline code to check the appropriate checkbox but this is getting messy!
Thanks!!
UPDATE:
Done this
s.ID == c.ID).Select(s => s).Count() > 0) ? "checked=checked" : "" %>
You need to add "checked" tag manually to every check box:
<input type="checkbox" name="Calendars" value="<%= c.ID %>" checked="checked" /><%= c.Name %>
You dont need <input type="checkbox" - use Html.Checkbox(). It renders a hidden field next to the checkbox - but it is not a bug. From ASP.NET MVC source, InputExtensions.cs, line 201:
// Render an additional <input type="hidden".../> for checkboxes. This
// addresses scenarios where unchecked checkboxes are not sent in the request.
// Sending a hidden input makes it possible to know that the checkbox was present
// on the page when the request was submitted.
Use this:
<%= Html.CheckBox("Calendars", c.ID) %>

Resources