rails simple_form checkboxes reorder - ruby-on-rails-3

I use
= f.association :some, as: :checkboxes
and got checkboxes like
But I need to reorder by alphabet and draw by columns
I try to reorder with js by counting columns, but faced with situation hen some labels stay near each other in one row, when label no enough long. Maybe js wrong idea and such task can solve by simple_form

= f.association :some, collection: Some.all(order: 'name'), as: :checkboxes
A side note - if you would actually use names that are not digits but are character based it should return then alphabetically by default.

Related

clicking on dynamic values in a web table in selenium

Below is my Table structure:
I want to click on the first cell of "policyno " column only if value is not empty
How do I achieve this?
Since you didn't specified, I have no idea what programming language do you need, but the idea is the same for all. I've used C# for the code below:
Get all the policy number elements. This can be easily achieved by getting the elements by xpath. In your case, I expect the lblPolicyNumber to be present in all:
IList allPolicyElems = driver.FindElements(By.Xpath(".//*[contains(#id,'lblPolicyElements')]"));
Now, you have 2 options to click on the element you need. First, you click on an element using his position in the list: allPolicyElems[0].Click(); (not the best way to do it) or by using LINQ (or lambda expressions for Java) to get the element by the text (perhaps you have the text stored in a variable from some previous actions): allPolicyElems.FirstOrDefault(t => t.Text == "your_text_here").Click();
This can be further expanded by applying the same logic in case you need to get the correct element by knowing other cell values from the same row.
Try using this.
WebElement elem = driver.findElement(By.xpath("//table/tbody/tr[2]/td[3]/span/a"));
if(!(elem.getText().trim().equals(""))){
elem.click();
}

How do I pre-select rows in a DataTable based on the value in a column?

Situation:
I have a pandas dataframe which I convert into an html table via df.to_html(). I then add the DataTables class to the table. This DataTables-table has the following columns:
ID | X | Y | Val |...More columns...| Selection_Criteria |...More columns...
The values in Selection_Criteria can be either 1 or 0. I know that with:
$('#ProductList').DataTable( {
...
"fnInitComplete": function(oSettings, json) { $('#ProductList tbody tr:eq(0)').click(); }
});
(Source: http://code.datatables.net/forums/discussion/38171/automatic-select-of-the-first-row-on-reload)
..it is theoretically possible to select the first row. (In reality, I have not been able to simulate a click for the first row.)
But my question goes more towards: How do I automatically pre-select ALL rows where the value is 1 in Selection_Criteria? What is the best approach? Should this be done client/server side?
In pandas the term "select"(ing) means to screen out that which was not selected for. I know that in a table on a web page, selected can mean being highlighted to stand out from the others. There are a couple of ways you can do this on the server side. You could display two tables, one for each state of Selection_Criteria. This would save you the hassle of trying to select individual rows out of a table in the first place (which would be done with Javascript, not Pandas). While pandas has the ability to add a class to the resulting html, the class is applied to the element.
If you are using jquery you are going to use these pieces. as you haven't put example data I can't be exact.
replace x in the next line with the number of columns the Selection_Criteria=1 is across the table
$( "tr td:nth-child(x):contains('1')" ).addClass('selected');
There are solutions on the backend using beautifulsoup and css selectors, or lxml.etree with xpath selectors. But jquery is going to be the most concise with this problem.
#Aliester. Thank you for the pointer!
This helped me find the solution to my own question. What I did:
1.) Identify row index that I want to select when the table loads.
2.) Pass the index to js.
3.) Loop over the indices and apply the following command to each index entry:
table.row(':eq('+hit_index_row+')').select();
So I am using the API to select each individual row. This works for me and hopefully could be helpful to others as well. It may be a bit hacky, so more elegant suggestions are welcome!
You can do this by providing a function for the "rowCallback" option when initializing the DataTable. https://datatables.net/reference/option/rowCallback
Also it is generally better to use the API methods to select rows instead of just changing the class. I found that the DataTable + Select libraries keep an internal collection of selected row indexes (just current page if serverside processing is on) instead of using the class to resolve selected items.
So while the display will look right, if you just change the class, if you rely on any of the API methods to get selected items later on there will be issues. Additionally just changing the class on the row will not fire any of the "select" events on the table so you can't rely on those either.

Capybara, selecting 1st option from dropdown?

I've done a search and most of the related google results have returned just in general selecting an element from a dropdown. However the ID's in this case for the elements in the dropdown are dynamically generated unfortunately.
This is for a base test case, so I basically just need to select for example the first one. The text is also the same for the elements in the dropdown (not sure if that helps).
Is there such an example of this?
Im using cucumber with caybara(using selenium driver) integration
You can find the first option element and then use the select_option method to select it.
For example, if the select list has an id "select_id", you can do:
first('#select_id option').select_option
As #TomWalpole mentions, this will not wait for the element to appear. It would be safer to do one of the following:
first('#select_id option', minimum: 1).select_option
or
find('#select_id option:first-of-type').select_option
Alternatively you can get the first element text then select it by select function:
first_element = find("#id_of_dropdown > option:nth-child(1)").text
select(first_element, :from => "id_of_dropdown")
After two days of searching and reading, this article was amongst one of a few that was helpful. Hopefully, this can help someone else!
I created a few methods like so, excuse the naming..I changed it.
def some_dropdown(id, text)
dropdown = find(id).click
dropdown.first('option', text: text).select_option
end
def select_form
within 'content#id' do
some_dropdown('#id', text)
click_link_or_button 'Submit'
end
end
I also referenced this.
I've tried to select an option from a modal dropdown. After trying all listed methods, and many other from other threads - I totally gave up and instead of using clicks or select_option just used keyboard keys
find(:select, "funding").send_keys :enter, :down, :enter
In case it still complains - try:
find(:select, "funding", visible: false).send_keys :enter, :down, :enter
Worked like a charm, selecting first option from a dropdown.

Limit rows on auto growing text area (Sencha Touch)

I have the following snippet of code for auto expanding the textarea in sencha touch. I need to cap it out at a set number of rows.
Any ideas?
http://www.senchafiddle.com/#Q9gjN
Wouldn't this be great if it were a nice, easy to use property.
At first I thought it would be the maxRows property but this is just the number of rows to display before the vertical scrollbar appears.
It may be that the only way would be a complicated solution such as this: http://www.codeproject.com/Articles/56392/How-to-Limit-the-Number-of-Lines-and-Characters-in
or
Limiting number of lines in textarea
EDIT: I needed to cap the number of rows in an address to 5 lines.
One approach could be to listen to the keyup event on the textareafield, check for the 'Enter' key and then revert back to previous input.
The approach I have taken is just to add validation to the model, which works great.
{ type: 'format', field: 'Address', message: 'Address cannot be more than 5 lines.', matcher: /^([^\r\n]{0,50}(\r?\n|$)){5}$/ }
The regex restricts saving a record to the store that has more than 5 lines, of more than 50 chars.

mvc4 jquery autocomplete items showing up as asterisks instead of readable data

I got my autocomplete stuff working well enough to see that it's returning some data when I type in a field--but the data shown in the dropdown below the textbox is just a vertical column of asterisks or list item bullets. (I can't really tell what they are.)
When I query the web service directly in the browser, it returns a Json array as expected which looks like this where, for example ?term=chi (I've added some line breaks for readability)
[
{"Name":"Chihuahua"},
{"Name":"Chinese Crested"},
{"Name":"Chinese Shar-Pei"},
{"Name":"Japanese Chin"},
{"Name":"Schipperke"}
]
My JavaScript looks like this:
$(function() {
$("#Breed").autocomplete({
source: "#Url.Action("BreedList", "Patient")"
});
});
like I say, my textbox in question (#Breed) does respond sort of like an autocomplete box, but the dropdown data is weird. Any ideas?
Although I did have a CSS bundling problem (somehow I had omitted the jquery ui css from my bundle), a bigger issue was that the Json returned by my service needed a lower case "value" property for each item. I was using the column name as cased on my Linq query. The tip that pointed me in the right direction on this came from the answer here: jQueryUI autoComplete returns back empty list