Can't Change Select Item in Table with Selenium Python - javascript

I'm working with a really outdated site that's giving me issues. What I'm trying to do is select the "Judgement/Lien Search" tab as seen on: page
The issue is that there are no identifiers. No name, ID, etc.
<table border="0" bgcolor="#ededed" cellpadding="8" cellspacing="0">
<tbody>
<tr>
<td width="33%" bgcolor="#ededed" nowrap=""><b><font size="+1"><u>Case Search</u></font></b></td>
<td width="33%" bgcolor="#cccccc" nowrap=""><b><font size="+1">Judgment/Lien Search</font></b></td>
<td width="33%" bgcolor="#cccccc" nowrap=""><font size="+1"><b>Property/Lis Pendens Search</b></font></td>
</tr>
</tbody>
I've tried using xpath, css selector, and even just executing the script. I've been using ChroPath to get the correct info. When <b><font size="+1">Judgment/Lien Search</font></b> is selected ChroPath gives me these options:
Rel XPath: //td[2]//a[1]
Abs Xpath: /html[1]/body[1]/table[1]/tbody[1]/tr[1]/td[2]/a[1]
CSS Selector: table:nth-child(5) tbody:nth-child(1) tr:nth-child(1) td:nth-child(2) > a:nth-child(1)
None of which have actually worked when using driver.find options
When I try to just execute the javascript driver.execute_script("javascript:submitJudgementSearch();") I get error: "selenium.common.exceptions.JavascriptException: Message: javascript error: submitJudgementSearch is not defined".
Any ideas on other ways to select it? Or am I looking at something wrong? This bump in the road really has me stumped. Thanks!

What about using Attribute Starts With Selector ?
Since your anchors seems to have unique href values this could work as a selector for the anchor itself. From there you could move up the dom to the parent if the <td> is indeed what you need.
$('a[href^="http://example.com/external/link"]').click(function() {});

You could use document.querySelector to get the job done potentially, refer to the snippet below. I was able to select that element using document.querySelector
document.querySelector('td a b').style.color = "red";
<table border="0" bgcolor="#ededed" cellpadding="8" cellspacing="0">
<tbody>
<tr>
<td width="33%" bgcolor="#ededed" nowrap=""><b><font size="+1"><u>Case Search</u></font></b></td>
<td width="33%" bgcolor="#cccccc" nowrap=""><b><font size="+1">Judgment/Lien Search</font></b></td>
<td width="33%" bgcolor="#cccccc" nowrap="">
<a href="javascript:submitPropertySearch();" target="_self">
<font size="+1"><b>Property/Lis Pendens Search</b></font>
</a>
</td>
</tr>
</tbody>
Theres another example here
And the Mozilla docs

Related

Cycling through CSS Post classes in Tumblr

I am trying to style my {block:Photo} styles in Tumblr, so that each time a photo is posted, it will cycle through a selection of, for instance, 5 slightly different classes for displaying the picture.
An example of such can be found here (where each photo table has a unique max-width property): http://www.nontemporary.com/
The code I've come up with so far, having made ample use of the Chrome inspector is thus:
{block:Posts}
{block:Photo}
<li class="post photo">
<table width="100%" align="left" valign="top" cellpadding="0" cellspacing="0">
<tbody>
<tr class="postspace">
<td></td>
</tr>
<tr class="postrow">
<td class="postdistrict">
<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" align="left" valign="top" class="post1">
<td>
<td class="postdistrict">
<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" align="left" valign="top" class="post1">
<td>
</tr>
</tbody>
</table>
</li>
{/block:Photo}
{/block:Posts}
Naturally, I think I'll have to create some custom classes for the widths, but my main question is really how I should go about getting Tumblr to cycle through those widths, as can be seen in the example.
Thanks!
If you want them to cycle through the classes in order (like the example does) you can utilise the fact that tumblr lets you style each number of post.
Here is an example of what you would do:
<li class="post-{block:Post1}1{/block:Post1}{block:Post2}2{/block:Post2}[...]{block:Post15}15{/block:Post15}">
This would render as
<li class="post-1">
with the 1 depending on what number post it is.
From here you can easily make classes for .post-1 through to .post-15.
If you would like something random instead, javascript/jquery will be needed.

smart table using pagination angular

Using Angular smart table lib:
I just want to display the pagination buttons on the bottom. According to the documentation, it looks like st-pagination directives inserts those dom elements in there. However, for me, it is not working. Here is the plunker given by the smart table documentation:http://plnkr.co/edit/wzUHcc9PBF6tzH8iAEsn?p=preview
Here is my table footer code:
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-items-by-page="10" st-pagination="">
</div>
</td>
</tr>
</tfoot>
I must be misunderstanding something. I know you can put your own customized template for the pagination.
Here is a screenshot, of the output and debugger:
You should use <td> tag only. you should not use <div> tag.
OK
<td colspan="5" class="text-center" st-items-by-page="10" st-pagination="">
</td>
NG
<td colspan="5" class="text-center">
<div st-items-by-page="10" st-pagination="">
</div>
</td>

GRAYT plugin is breaking HTML in editor

I've got an implementation of CK Editor that uses the SCAYT / GRAYT plugin, and I've found what I think might be a bug in CK Editor itself.
I'm using version 4.5.11
Consider this HTML:
<tr>
<td align="left" bgcolor="#e6e1ce" height="30" id="table_column1" valign="middle"><span style="font-family: verdana,geneva,sans-serif,arial;">Content</span></td>
<td align="left" bgcolor="#f8f9f3" height="30" id="table_column2" valign="middle"><span style="font-family: verdana,geneva,sans-serif,arial; ">Content</span></td>
<td align="left" bgcolor="#e6e1ce" height="30" id="table_column1_2" valign="middle"><span style="font-family: verdana,geneva,sans-serif,arial;">Content</span></td>
</tr>
When my editor loads and the HTML content is rendered, the SCAYT and GRAYT plugins start doing their magic and checking the contents for spelling and grammar issues.
The problem is with GRAYT. It mistakes the text of two of the <td> elements as one sentence or phrase, and attempts to place a <span> around them that's supposed to simply tell the user to correct their grammar.
Instead, it produces this result:
<tr>
<span class="gramm-problem" data-grayt-phrase="Content Content">
<td align="left" bgcolor="#e6e1ce" height="30" id="table_column1" valign="middle">
<span style="font-family: verdana,geneva,sans-serif,arial;">Content</span>
</td>
<td align="left" bgcolor="#f8f9f3" height="30" id="table_column2" valign="middle">
<span style="font-family: verdana,geneva,sans-serif,arial; ">Content</span>
</td>
</span>
<td align="left" bgcolor="#e6e1ce" height="30" id="table_column1_2" valign="middle">
<span style="font-family: verdana,geneva,sans-serif,arial;">Content</span>
</td>
</tr>
Obviously, this is invalid HTML, and is undesired. The real problem is that it breaks the layout of the table in the editor.
Does anybody know what I can do to fix this? Checking the CK Editor / Web Spell Checker documentation yielded almost no information on how to control this functionality. At best, I can disable it, which I believe is also undesired.
The issue that you described is known issue and we plan to work on it in a few weeks. Now GrammarAsYouType (GRAYT) is only available as a plug-in for CKEditor 4+ and it is the Alpha version. Currently, our team is working on its improvement.
As a workaround, at this moment we can suggest turning off the GRAYT functionality on the SCAYT startup:
config.grayt_autoStartup = false;
As an alternative, you can turn off grammar check in the table (td, tr). But note that it will affect both SCAYT and GRAYT (no spelling check in <tr> or <td> tags).
config.scayt_elementsToIgnore = 'tr,td';
More details about all SCAYT parameters for CKEditor 4+ that can be changed, you can find on our website:http://wiki.webspellchecker.net/doku.php?id=scayt_parameters_ckeditor4

JQuery link entire table row to anchor to trigger fancybox

I have found multiple ways to link an entire table row to another page with jQuery. But every solution I've tried for this does not work with anchors which point to a div that triggers a fancybox.
I have the following HTML
<tbody class="result" data-href="#details1">
<tr>
<td rowspan="2" class="resultlogo">
<img class="resultlogoimg" src="images/logos/logo-orshop.png">
</td>
<td class="resulthead">
<h1><a class="detaillink" href="#details1">Orshop</a></h1>
</td>
<td rowspan="2" class="resultprice">
<h1>€ 69.00</h1></td><td rowspan="2" class="resultrating">
<span class="markbg"><h1>8,3</h1></span>
</td>
</tr>
<tr>
<td class="resultpc"><h2>3074ES, Rotterdam</h2></td>
</tr>
</tbody>
With the following jQuery to trigger the click event:
$(".result").click(function() {
window.document.location = $(this).data("href");
});
The <tbody> tag wraps 2 table rows because of the way a result row is layed out. I want to show div contents in a fancybox based on the user clicking a row (or tbody tag).
Is it not possible to use data-href with anchors?
If you are going to wrap the 2 table rows, set you data attributes in the <table> tag, and not in the <tbody> tag.
Then you only need a simple fancybox initialization script like:
$(".result").fancybox();
And use the fancybox's special data attributes to set the href and the type of content like
<table class="result" data-fancybox-type="inline" data-fancybox-href="#details1">...</table>
See JSFIDDLE

Drop Down Content/Table and Page Jumping

I am coding a page with several dynamic/sortable tables in it (one below another) to share PDF documents. Each Document tittle in the table contain a link to open the PDF in a new tab. Everything works fine, BUT when I scroll down the page and open a dynamic table/or minimize the table, the page jumps to top of the page/to default position. JavaScript's RETURN FALSE fixes this problem but all the links in the table are dead. Can anyone help to fix this? I attach the basic code structure here you can see what I am doing...
HTML:
<div id ="fifth">
<ul id="droptable">
<li><h1>Tittle of The Dynamic Table5</h1>
<div>
<table class="sortable" width="100%" border="0">
<tr>
<td id="tablehead" width="55%">Sort by tittle</td>
<td id="tablehead" width="25%">Sort by Author</td>
<td id="tablehead" width="25%">Sort by date</td>
</td>
</tr>
<tr>
<td id="tabledata" width="55%"><a href="document1.pdf" target="_blank">Document1Name</td>
<td id="tabledata" width="25%">AuthorX</td>
<td id="tabledata" width="25%">DateX</td>
</tr>
<tr>
<td id="tabledata" width="55%"><a href="document2.pdf" target="_blank">Document2Name</td>
<td id="tabledata" width="25%">AuthorX</td>
<td id="tabledata" width="25%">DateX</td>
</tr>
<tr>
<td id="tabledata" width="55%"><a href="document3.pdf" target="_blank">Document3Name</td>
<td id="tabledata" width="25%">AuthorX</td>
<td id="tabledata" width="25%">DateX<a></td>
</tr>
</table>
</div>
</li>
</ul>
</div>
JAVASCRIPT:
// Dropdown Table Code
$(function(){
$('#droptable li a').each(function(){
$(this).click(function(){
$(this).siblings('div').slideToggle(300); // If I add RETURN FALSE here the page doesn't jump to the default position/to the top of the page (when open or minimize the table) BUT links in the table are out and don't work anymore //
});
});
});
2 things
1st id's should be unique, so change all instances of
id="tabledata"
to
class="tabledata"
2nd, try to give you td's that contain the link a different class than those that have data, then attach slide toggle to that class, maybe like:
$('.newclass').each(function(){
.....
I didn't succeed with the hints you gave but thanks anyway! I did everything but page was still jumping when opening/closing the table. BUT...I was browsing different forums and found this simple answer.
Using "#/" instead of "#" and the page won't jump. Hmm.. sometimes the answer is too simple, seemingly :o
<div id ="fifth">
<ul id="droptable">
<li><h1>Tittle of The Dynamic Table5</h1> ...
Rock'nRoll!

Categories

Resources