I have defined a yui:datacolumn like below and wanted to sort this column in a specific way during page load.
yui:datacolumn key="Action" label="Action" sortable="false"
If I use the below code, I get a "The attribute prefix sortOptions does not correspond to any imported tag library" error message.
yui:datacolumn key="Action" label="Action" sortable="false" sortOptions:"{defaultDir:YAHOO.widget.DataTable.CLASS_DESC}"
I also wanted to underline the label of the column heading to indicate that this column is sortable. How do I do that?
One way to underline the label of the column heading:
.yui-skin-sam thead .yui-dt-sortable {
text-decoration: underline;
}
Related
I am trying to write a script to click an icon which is a part of the table header. Each column in the table has this icon in it (ascending order and descending order sorting icons). I am using Geb to do this. Here is how I am trying to do it:
In my SortingSpec.groovy file:
header.closest("div.customSortDownLabel").click()
I also tried
header.siblings('div.customSortDownLabel').first().click()
In the SortingPage.groovy file:
header {
grid.$(class: 'div.customHeaderLabel', text: 'Country')
}
In my html:
<div>
<div class="customHeaderLabel">{{params.displayName}}</div>
<div *ngIf="params.enableSorting" (click)="onSortRequested('asc', $event)" [ngClass]="ascSort" class="customSortDownLabel">
<i class="fa fa-long-arrow-alt-down"></i></div>
<div *ngIf="params.enableSorting" (click)="onSortRequested('desc', $event)" [ngClass]="descSort" class="customSortUpLabel">
</div>
None of them worked for me. It is not able to find the selector. Any suggestions are appreciated.
Error I see is:
geb.error.RequiredPageContentNotPresent: The required page content 'header - SimplePageContent (owner: SortingGrid, args: [], value: null)' is not present
That error looks like header isn't matching. Assuming that grid matches, and you're using some Javascript framework like Angular to substitute 'Country' for params.displayName, I would guess that maybe Geb is failing to find header before 'Country' is substituted. So, I would try making header wait for it:
header(wait: true) { grid.$(class: 'div.customHeaderLabel', text: 'Country') }
By the way, closest() goes in the wrong direction, to an ancestor, but siblings() looks good.
siblings() didnt work for me but next() worked for me. next() grabs the next sibling elements of the current context elements.
Example:
1. header.next().click() clicks the very next sibling
header.next("div.customSortDownLabel").click() looks for the very next sibling with the matching selector of 'div.customSortDownLabel' and then clicks it.
I am new here... I am wondering if anyone could help point me in the right direction here.
I am looking to create a Chrome extension that searches a page for a number of different strings (one example: "(410)" or "(1040)" without the quotes) and highlight these so they're easier to see.
To explain a little further why I need this: I frequently work out of a queue with other coworkers, and there are specific things I need to focus on but I can ignore the rest of the questions on the page. So it would be helpful if my particular items were highlighted.
Thank you!
Edit: an example of how the source code works:
<td class="col-question">28 (510). <span id="ctl00_PlaceHolderMain_ctl01_ContentCheckList_ctl28_Label1" title=" <p>
<td class="col-question">49 (1150). <span id="ctl00_PlaceHolderMain_ctl01_ContentCheckList_ctl49_Label1" title="<p>
etc etc etc... there are around 100 numbers in parenthesis I would want highlighted. And probably another 100 that I wouldn't want highlighted.
Okay, to start off with I will show you how to inject the code into the page(s) you want, we will get to selecting the correct numbers in a bit. I will be using jQuery throughout this example, it isn't strictly necessary, but I feel that it may make it a bit easier.
First we declare a content script in our manifest as well as host permissions for the page you are injecting into:
"content_scripts": [
{
"matches": ["http://www.domain.com/page.html"],
"js": ["jquery.js","highlightNumbers.js"],
"css": ["highlight.css"]
}],
"permissions": ["http://www.domain.com/*"]
This will place our code in the page we are trying to change. Now you said that there are about 100 different numbers you would want to highlight and I will assume that these are specific numbers that don't match any patterns, so the only way to select all of them would be to make an explicit list of numbers to highlight.
highlightNumbers.js
// This array will contain all of the numbers you want to highlight
// in no particular order
var numberArray = [670,710,820,1000,...];
numberArray.forEach(function(v){
// Without knowing exactly what the page looks like I will just show you
// how to highlight just the numbers in question, but you could easily
// similarly highlight surrounding text as well
var num = "(" + v + ")";
// Select the '<td>' that contains the number we are looking for
var td = $('td.col-question:contains('+num+')');
// Make sure that this number exists
if(td.length > 0){
// Now that we have it we need to single out the number and replace it
var span = td.html().replace(num,'<span class="highlight-num">'+num+'</span>');
var n = td.html(span);
}
// Now instead of '(1000)' we have
// '<span class="highlight-num">(1000)</span>'
// We will color it in the css file
});
Now that we have singled out all of the numbers that are important, we need to color them. You can, of course, use whatever color you want, but for the sake of the example I will be using a bright green.
highlight.css
span.highlight-num{
background-color: rgb(100, 255, 71);
}
This should color all of the numbers that you put in the array in the js file. Let me know if there are any problems with it as I can't exactly test it.
Is there any way to locate just visible elements with Watir?
I want to locate only visible forms (by the index param) so that Watir would return first or second visible text field.
How is it possible to filter invisible fields / elements?
Is it possible to do that with xpath?
This will return the first visible text field:
browser.text_fields.select {|text_field| text_field.visible?}[0]
You can set text in text field like this:
browser.text_fields.select {|text_field| text_field.visible?}[0].set "text"
This will return the second visible text field:
browser.text_fields.select {|text_field| text_field.visible?}[1]
Please note that element can be visible, but disabled.
I have a portion of HTML that looks similar to:
<table><tbody><tr>
<td><div> Text Goes Here </div></td>
<td> ... rest of table
There are no IDs, no Titles, no descriptors of any kind to easily identify the div that contains the text.
When an error occurs on the page, the error is inserted into the location where "Text Goes Here" is at (no text is present unless an error occurs). Each error contains the word "valid".
Examples: "The form must contain a valid name" or "Invalid date range selected"
I currently have the Watir code looking like this:
if browser.frame(:index => 0).text.includes? "valid"
msg = # need to get full text of message
return msg
else
return true
end
Is there any way to get the full text in a situation like this?
Basically: return the full text of the element that contains the text "valid" ?
Using: Watir 2.0.4 , Webdriver 0.4.1
Given the structure you provided, since divs are so often used I would be inclined to look for the table cell using a regular expression as Dave shows in his answer. Unless you have a lot of nested tables, it is more likely to return just the text you want.
Also if 'valid' may appear elsewhere then you might want to provide a slightly larger sample of the text to look for
. browser(:cell => /valid/).text
Try this
return browser.div(:text => /valid/).text
or
return browser.table.div(:text => /valid/).text
if the valid is not found, it should return nil.
This is my jqgrid - $("#list1")
When it loads, i.e. on the gridComplete event, I need to rename the column header texts.
Original column header texts are in this format - Colomn1, Column2 ...
On gridComplete, I change these header texts like this:
$("#list1_Column" + someNumber).text(someText);
However on doing this, I lose the ability to sort columns. Column headers are no longer clickable and hence I cannot sort the grid after this custom programmatic editing.
Similar thing happens when I try changing the texts in the search dropdown list (search modal - using multipleSearch: true)
When, on gridComplete, I change text values in the select list as per the grid column headers, like this -
var select = $('#grid_wrapper #fbox_list1 .ui-widget-content .sf .fields select');
$('#grid_wrapper #fbox_list1 .ui-widget-content .sf .fields select option').remove();
$.each(data, function (i, item) {
select.append('<option value="Column' + item.id + '">' + item.ColumnName + '</option>')
});
...I lose the ability to perform multiple search, i.e. the + and - buttons in the search modal disappear.
How do I get around these two issues? Retaining ability to sort and perform multiple search after having changed column header and search list text values on load.
Please guide.
The column header <th> element has two child elements: one <span> with the text of the column header and another with the sort icons which are hidden the most time. So if you want to change the text manually you should use another selector
$("#list1_Column" + someNumber+ " > span").text(someText);
If you do so you will change the text on the page, but not change the text in the colNames or in the colModel (if you use label property instead of colNames). The text will be used for example to create Multisearch dialog. You can make changes in the colModel with respect of setColProp method or use getGridParam to get reference to any internal parameter of jqGrid (which are objects like inclusive colNames and colModel) and then make any changes which you need.
The best way in my opinion to solve the described problems is to use setLabel method to change the text in the column header:
$("#list1").jqGrid('setLabel','ColumnName','My new Name');
this will solve both problems.