I have tried to get the each alternate ID from that box but with no avail I'm using Ruby on rails with Nokogiri
Here's the link to the page with alternate ID's (Look below the picture Alternate ID's) http://lol.gamepedia.com/Cain
<tr>
<th> Alternate IDs:
</th>
<td> wvwvvwvwwvwvvvwv (NA), 나진 카인, Nurinim, 나진 카인
</td></tr>
You can try the following XPath to get the alternate Ids value :
//tr/th[normalize-space()='Alternate IDs:']/following-sibling::td[1]
Brief explanation :
//tr : find all <tr> elements anywhere in the HTML document
/th[normalize-space()='Alternate IDs:'] : from the found tr elements, find child element th having inner text (after removing excess whitespaces) equals "Alternate IDs:"
following-sibling::td[1] : from such th, return the first td element that follow the th element within the same parent tr
Related
I'm using Rails 5 with Nokogiri. How do I select the smallest element that contains text?
I have this element on my page:
<td class="style35" style="font-size: medium; border: thin solid #000000">
Location</td>
and I thought I could select it using:
doc.at('td:contains("Location")')
Instead, a wrapping td that contains the table that contains this element is selected:
<td><span class="myClass"><table> ....
What is the proper way to write an expression that selects the smallest (most minimal?) element that contains the text I want?
If you use the at method it will only return the first result.
The css method will return all the elements matching the CSS selector, both the correct td element, and the td element wrapping around the whole table.
If you use something like this, it will find all the td tags, containing the word Location, then it will store the elements that is not wrapped around another td tag in an array:
td_with_no_child_and_have_location = []
doc.css("td:contains('Location')").each do |td_element|
if td_element.css("td").empty?
td_with_no_child_and_have_location << td_element
end
end
first_td = td_with_no_child_and_have_location.first
It's hard to help you if you don't supply us with the minimum HTML. I tried recreating it but YMMV:
require 'nokogiri'
doc = Nokogiri::HTML(<<EOT)
<html><body><table><tr>
<td><span class="myClass"><table><tr>
<td class="style35" style="font-size: medium; border: thin solid #000000">
Location</td>
</tr></table></td></tr></table></html>
EOT
doc.at('.myClass td.style35').text # => "\n Location"
If the tag you want is embedded in another table, then take advantage of some of the other characteristics to help you navigate, such as the class information.
Using at should help in this case because typically the title of a table would be in the first row which would contain the first cell. at is the equivalent of search('some selector').first.
The above selector could even be written as .myCLass .style35 or td td which would find the td inside another td. Combine that with at and you'd get the first such occurrence:
doc.at('.myClass td.style35').text # => "\n Location"
doc.at('.myClass .style35').text # => "\n Location"
doc.at('td td').text # => "\n Location"
Pick all td elements, sort by the content length and pick the first element. Change the selector as you may wish. Sort is ascending by default. So you get the smallest elements first.
doc.css('td').sort_by do |td_element|
l.text.length
end.first
On the left side of my Layout page there is a table with a list of Job Names. To the right is where the views populate. My views each have identical tables. ChangeOrders.cshtml, PurchaseOrders.cshtml, etc... Right now when you are on the ChangeOrders view nothing appears until you select a job from the Job Names table. The ChangeOrders with that JobId appear. However when I switch to another view the job Selection clears itself. I need that Job to stay selected until I select another Job or a clear filter button is pressed.
Jobs Table on the Layout Page
<table class=" table table-bordred table-striped table-hover" ng-table=" tableparams" show-filter="true" ng-scroll-viewport style="height:200px;">
<tr ng-repeat="job in jobArray" class="pointer" ng-click="selectJob(job)">
<td data-title="'Job Name'" sortable="'JobName'" filter="{ 'JobName': 'text' }">{{job.JobName}}</td>
</tr>
</table>
ChangeOrder.cshtml (All other views will identical except the data)
<table class=" table table-bordred table-striped table-hover" ng-table="tableParams" show-filter="true" >
<tr ng-repeat="job in selectedJob().ChangeOrders" class=" pointer">
<td ng-click="editChangeOrderModal(job)" data-title="'CO Number'" sortable="'ChangeOrderNumber'" filter="{ 'ChangeOrderNumber': 'text' }">{{job.ChangeOrderNumber}}</td>
<td data-title="'CO Date'" sortable="'ChangeOrderDate'" filter="{ 'ChangeOrderDate': 'text' }">{{job.ChangeOrderDate | date : date : shortDate}}</td>
<td data-title="'CO Name'" sortable="'ChangeOrderName'" filter="{ 'ChangeOrderName': 'text' }">{{job.ChangeOrderName}}</td>
<td data-title="'CO Amount'" sortable="'ChangeOrderAmount'" filter="{ 'ChangeOrderAmount': 'text' }">${{job.ChangeOrderAmount | number : fractionSize}}</td>
<td data-title="'CO ApprovedDate'" sortable="'ChangeOrderApprovedDate'" filter="{ 'ChangeOrderApprovedDate': 'text' }">{{job.ChangeOrderApprovedDate | date : date : shortDate}}</td>
<td data-title="'CO ApprovedAmount'" sortable="'ChangeOrderApprovedAmount'" filter="{ 'ChangeOrderApprovedAmount': 'text' }">${{job.ChangeOrderApprovedAmount | number : fractionSize}}</td>
<td data-title="'CO ApprovedNumber'" sortable="'ChangeOrderApprovedNumber'" filter="{ 'ChangeOrderApprovedNumber': 'text' }">{{job.ChangeOrderApprovedNumber}}</td>
<td data-title="'CO Attn'" sortable="'ChangeOrderAttn'" filter="{ 'ChangeOrderAttn': 'text' }">{{job.ChangeOrderAttn}}</td>
</tr>
</table>
Controller
//Sync Table Selections
$scope.selectJob = function (job) {
$rootScope.selectedJob = job;
};
Updated
I am using ngStorage for my sessionStorage
ngStorage
I tried to implement it but I am not sure how to use it with the $rootScope. I also need to add the jquery function as well.
$scope.selectJob = function (job) {
$rootScope.selectedJob = $sessionStorage.$default(job);
console.log($rootScope.selectedJob);
};
$scope.selectedJob = $scope.selectedJob = function () {
return $rootScope.selectedJob;
};
$('#myTable').on('click', ' tbody tr', function (event) {
$(this).addClass('highlight').siblings().removeClass('highlight');
});
Summary of the Problem
As discussed $rootScope is being cleared because your current
application setup is not an AngularJS Single Page App. It is
understandable that you can not switch it out at this time and that is
ok, your application will still be a nice switch to some angular.
In order to have data be persistent across views you will need to save the data in some form of client storage then check for the values when a controller loads and populate your values.
Several Storage Options
1) HTML5 Storage
Here is a an article about HTML5 storage. There are two types of html5 web storage.
localStorage
This can be very flexible it persists across sessions and tabs. But if you want it to clear it has to be manually clearedk, so it can be considered insecure depending on what you are storing.
sessionStorage
sessionStorage is almost identical to local storage except it does not save after the session ends. So it is not available on a new window.
If you are interrested in this option these objects are not hard to work with on your own. But if you found it easier you could use this project, which wraps the objects in an angular factory.
2) Cookies
While a valid storage option. Cookies are really meant if you want to share the data serverside and want the data sent in the headers.
Angular has modules for handling cookies. You have to download angular-cookies from the AngularJS site and include it to use ngCookies. Angular API Reference
Angular cookies can be implemented in two ways
$cookie (API reference) which is a basic wrapper for the document.cookie object. And sets named values.
$cookieStore (API reference) has the same base functionality but uses a (key,value) format.
I'm trying to make table rows draggable and then connectToSortable -able.
For some reason, when I put the ID of the tbody ("#sem1") in the selector, it works but obviously drags the whole table-body with all of its rows.
However, when I put "#sem1 tr" in the selector the webpage seems to just ignore that code, meaning the table still shows up correctly, but nothing becomes draggable.
HTML:
<table class = "sem">
<thead>
<th class = "header1">header</th>
<th class = "header2">header</th>
<tr>
<td class = "static1">static1</td>
<td class = "static2">static2</td>
</tr>
</thead>
<tbody id = "sem1">
</tbody>
</table>
Through some JavaScript table rows get added to sem1 like so.
JavaScript:
First pos0[0] (an array) gets populated:
for(var i in setPos[0]){
setPos[0][i]=("<tr><td class = " + String(setClass[i])+ ">" + setPos[0][i].slice(2) + "</td><td class = 'someClass'>"+setThis[i]+"</td></tr>");
}
Then pos0[0][a] gets added to sem1 like this:
for(var a in pos0[0]){
document.getElementById("sem1").innerHTML += pos0[0][a];
}
and when I try to make the rows draggable, it just doesn't work.
jQuery:
$("#sem1 tr").draggable()
Putting just tr in the selector doesn't work either (I don't mind if all the table rows in the whole document are draggable)
**I know that the code says setPos[0] - it's part of a function that does the same thing to pos1, pos2...
Thanks in advance for any help!
My guess is that you are calling the $("#sem1 tr").draggable() line before the code that has inserted the new <tr>'s has been run, so it doesn't see the rows you've added.
Also, have you tried manually inserting some markup to check that the draggable code actually works on a per row basis?
It would help if you could post an example in jsfiddle or something so we can work on this with you.
Finally it could be overkill for this situation but have you looked into using a JavaScript templating engine if you are going to be building chunks of html in your app?
Cold you plz look the following code,
<table title="Demo1">
<tr>
<td> Test1 </td>
<td> Test2 </td>
</tr>
</table>
Here the both Test1 and Test2 links displays default title "Demo1"
But i do not want the title for both links, for this functionality i am doing as follows
$("#anch1").removeAttr("title");
$("#anch2").removeAttr("title");
or
$("#anch1").attr("title", "");
$("#anch2").attr("title", "");
this code works in IE, but M FF is not working, the title is still displaying, and the table title should be there, we should not remove the table tile,
Could you plz answer..
You need to temporary clear the parent table title when hovering over the links, then restore the title when mouse leave the links. Most simple way is adding id to the table itself then:
var $table = $("#table1");
var originalTitle = $table.attr("title");
$("#anch1, #anch2").hover(function() {
$table.attr("title", "");
}, function() {
$table.attr("title", originalTitle);
});
This way you're not dependent on browser behavior.
If you want this applied to all the links in the table, change the selector from "#anch1, #anch2" to $table.find("a").
Live test case.
Try:
$('table').removeAttr('title');
The title is applied to the table, not the anchors. Also, your table markup is malformed (you need to wrap TDs in TR), and that might confuse the selector engines.
In the Struts2 application in the jsp page I have a feild where the user can select what ever option he want , i used struts:checkboxlist like this
<s:checkboxlist name="cust.communityList" label="Are You Inteterested In"
list="{'WebSpere Consultuing','Portal Consulting','SOA/BPM Consulting','Content Management',
'DataPower Consulting','Information Management Services','Application Monitoring','Application Security',
'Migration to WebSphere','Application Testing','WebSphere Version Upgrade','JAM/Panther Consulting','IBM Software Procurement','XMLink/Progressions','Other'}" />
It is working fine . But in the browser it's look is not good , It dispalying the list elements in a row wise one after the other ,then in the next row ....
I wanted to display them ,2 in the first row ,next 2 items in the second row ans so on ...
How can i display the checkboxlist items in that way ?
Ok, I just did this via the custom template method. It seemed to get the job done. Look at the docs to see how to pull the original checkboxlist FreeMarker css code into your own project. In summary, pull struts2.core.jar/template/simple/checkboxlist.ftl into your own webapp/template directory and modify it. I make the following changes:
1: at the top of the file, where the iterator tag is, I added the following lines (not the iteratorline) before and after:
<table><tr><td> </td><td> </td><td> </td></tr>
<#s.iterator value="parameters.list">
<#if itemCount % 3 = 0 >
<tr>
</#if>
<td>
2: At the end of the file, where the iterator ends, I added:
<#if itemCount % 3 = 0 >
</tr>
</#if>
</#s.iterator>
</table>
3: That's it. Really, the tutorial tells you what you need to know, it's just a matter of hacking up the FreeMarker code.
You can change the theme for the checkbox OR you can extend the theme and then change it.
Look in your /template/simple/checkboxlist.ftl for the base checkboxlist template.
For info on overriding templates see: http://struts.apache.org/2.0.11/docs/template-loading.html