I have this table:
<table class="results" id="summary_results">
<tr>
<td>select all</td>
<td>name</td>
<td>id</td>
<td>address</td>
<td>url</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>john doe</td>
<td>1</td>
<td>33.85 some address</td>
<td>http://www.domain.com</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>jane doe</td>
<td>2</td>
<td>34.85 some address</td>
<td>http://www.domain2.com</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>sam</td>
<td>3</td>
<td>33.86 some address</td>
<td>http://www.domain3.com</td>
</tr>
</table>
I would like to select all the rows, then download the content of the URLs knowing that each URL is linked to the ID. For example the first url will be www.domain.com?id=1&report=report.
ok now I got the select to work but it is taking only the value of the first tr and not the other selected ones.
I think the main issue here is that client-side javascript isn't really the most appropriate method of going about what you seem to be trying to achieve. Parsing the URLs from the table and forming AJAX requests with them isn't in itself hugely tricky, see for example this jsfiddle. However as noted by wsanville in the comments, there are cross domain restrictions on AJAX that restrict the ability to make calls to arbitrary URLs.
What would be a more feasible method, if you don't want to navigate off the page, is to retrieve the URLs in the method used in the jsfiddle, and then post that list to your own server. Then you will be able to retrieve the URLs data on the server and perform more complicated actions before sending the data back to the user. Something along the lines of:
$.ajax({
url:'/load_urls', //this is assuming you have some routing for the load_urls endpoint
data:urls, //assuming you have the list of urls in a var called 'urls'
method:'POST',
success:function(data){
//do something with your data
},
error:function(err){
console.log(err); //it broke
}
});
I think overall you should maybe take a step back and re-evaluate exactly what you want to happen, and look at the constraints of the URLs you are going to be retrieving and so on, and then after that if you're still at a loss come back with a more specific question. Good luck!
Related
I would like to include to an html page a table that have the properties of the wikipedia tables: sortable, with little arrow next to the title that indicates the descending/ascending order.
Typically, in this extensive list of examples, I am looking for the simplest format:
https://en.wikipedia.org/wiki/Help:Sorting#Example
I was able to find a script to sort out my table, and I manually included the up/down arrow, but I was wondering whether one could import the script used by wikipedia pages, and then create tables using class="wikitable sortable".
Is it possible?
Here is the code to make the table:
<table class="wikitable sortable">
<tbody><tr>
<th>name
</th>
<th>data
</th>
<th>more data
</th></tr>
<tr>
<td>cats
</td>
<td>273
</td>
<td>53
</td></tr>
<tr>
<td>dogs
</td>
<td>65
</td>
<td>8,492
</td></tr>
<tr>
<td>mice
</td>
<td>1,649
</td>
<td>548
</td></tr></tbody></table>
I'm new to js, I'm working on a chrome extension and am having confusion webscraping a website. Suppose I have a simple table in an html like this
<html>
<body>
<table class="birthdays">
<tbody><tr>
<th>date</th>
<th>month</th>
<th>year</th>
</tr>
<tr class="r0">
<td>Person</td>
<td>1</td>
<td>Jan</td>
<td>77</td>
<td colspan="3"></td>
</tr>
<tr class="r0">
<td>Person</td>
<td>1</td>
<td>Jan</td>
<td>77</td>
<td colspan="3"></td>
</tr>
</tbody></table>
</body>
</html>
In my chrome extension when I do
const x = document.getElementsByTagName("th")[0][0]
alert(x)
It says it found a th object, but doesn't give me the actual data. That's the first issue, my actual goal is to determine if all elements in the tr tags have the same of one property (ex. if everyone has their birthday in Jan, open a tab).
document.getElementsByTagName
returns HTMLCollection https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection
it's an array-like object (not real array)
and you can get the value from it calling item() method https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection/item
Seems that you need something like this document.getElementsByTagName("th").item(0).innerHTML to get content of the first TH tag
This is not a complete answer, but in javascript the container is not its contents - i.e. you need document.getElementsByTagName("th")[0][0].innerHTML to get at the 'date' string.
I'm working on a MVC project in which I display a ViewModel in several partial views within a table. I have a control in which the user can change how the table is displayed, like this:
<table>
<tr>
<td>
partial view 1 partial view 2
</td>
</tr>
<tr>
<td>
partial view 3 partial view 4
</td>
</tr>
</table>
or
<table>
<tr>
<td>
partial view 1
</td>
</tr>
<tr>
<td>
partial view 2
</td>
</tr>
<tr>
<td>
partial view 3
</td>
</tr>
<tr>
<td>
partial view 4
</td>
</tr>
</table>
Any time a user wants to change how the view is displayed, he has to click the submit button of the from, and the application has to make the request to the server, get the results, and according to a flag (TableDisposition = 1 or 2), load some divs.
I know this is not the best way to do it, but my lack of knowledge regarding client side coding (javascript/jquery) is making it impossible for me to do this in a more efficient way.
Any input will be much appreciated.
EDIT: Solved in the comments.
First I started loading the viewModel in two tables, each one in a div with absolute positioning. Then I made a function to hide one of those tables:
$(function () {
$("#divTable1").css('visibility', 'hidden');
});
Finally, I made a function which is triggered by pressing a button:
$("#btnAlternateView").click(function () {
if ($("#divTable2").css('visibility') == 'hidden') {
$("#divTable2").css('visibility','visible');
$("#divTable1").css('visibility', 'hidden');
}
else {
$("#divTable2").css('visibility','hidden');
$("#divTable1").css('visibility', 'visible');
}
});
And that was it. Works like a charm.
I'm testing an ADF application with Selenium IDE. At one point, the automated test case has to click on a button, which has a partialTrigger attribute pointing to a table on the page and after the button executes some background logic, the table is populated with rows, but the page is not fully refreshed.
The problem I'm facing is that the Selenium IDE can't find the table rows after the button click. Possibly, Selenium is not aware of the page's DOM update, but I'm not sure about that.
What I have tried so far is this:
I stored the expected full xpath for a cell in the first row of the table.
Created a self-executing JavaScript function that is used for clicking on the given path.
I have tested the following commands on a simple HTML page and they work fine.
Selenium commands:
<tr>
<td>store</td>
<td>//html[1]/body[1]/div[1]/table[1]/tbody[1]/tr[1]/td[1]</td>
<td>myTableRowPath</td> <!-- store the xpath with name 'myTableRowPath' -->
</tr>
<tr>
<td>storeEval</td>
<td>(function(path) {
var result = selenium.browserbot.getUserWindow()
.document.evaluate(path,
selenium.browserbot.getUserWindow().document,
null,
8,
null).singleNodeValue; result.click();
return null;
})
(${myTableRowPath})
</td>
<td>elementToBeClicked</td>
</tr>
How can I make Selenium IDE aware of any (AJAX) DOM updates on the page ?
Generally when dealing with AJAX on Selenium IDE, you'll want to use a waitForElementPresent type of action.
For instance if your table changes from
<table id="myTable">
<tbody>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
</tbody>
</table>
to
<table id="myTable">
<tbody>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
<tr>
<td>something</td>
<td>else</td>
</tr>
</tbody>
</table>
You can use:
<tr>
<td>click</td>
<td>//input[#id='myButton']</td>
<td></td>
</tr>
<tr>
<td>waitForElementPresent</td>
<td>//table[#id='myTable']/tbody/tr[2]</td>
<td></td>
</tr>
<tr>
<td>assertText</td>
<td>//table[#id='myTable']/tbody/tr[2]/td</td>
<td>something</td>
</tr>
Here's a JSFiddle I tested it against (no AJAX, but simulating that with a slow JS function).
ADF manipulate the generated HTML in a way that it'll be very hard to maintain an XPath. The easiest way to target specific elements in ADF is giving this element a styleClass and access it using the class attribute.
ADF loads the table UI (whose ID selenium is looking for) before it loads the contents of the table. It is possible your webdriver is looking for the content before it is loaded, so you could explicitly wait for a short period of time before clicking on the row.
Your table might be using lazy load which only loads the contents of the table when you scroll it into view. If your window only shows 5 rows and there are 10 rows in your table, your browser will only load 5 rows. If you ask selenium to look for row 8, it will throw an exception. I solved this by clicking on the first row and driver.switchTo().activeElement().sendKeys(Keys.DOWN); for the number of times the number of the row I am searching for. So I am "scrolling" to the row before accessing it
I have a table that I want to append variable data to. I currently have the data in CSV format, and call the csv to HTML using PHP. The PHP call $line_of_text[10] allows me to access whatever data I want. However I need to do it client side not server side.
I have been looking into Javascript arrays, and these may or may not be the best idea. If there is code to parse the data, I would also need the actual code to call it from the HTML page, and put it into the table.
My table is like this: ( see JS Fiddle: http://jsfiddle.net/72jQR/2/)
<table cellspacing="0" cellpadding="5" border="1">
<tr>
<td>Code</td>
</tr>
<tr>
<td>Description</td>
</tr>
<tr>
<td>Size</td>
</tr>
</table>
And After the information from the csv or array or whatever - it looks like this:
<table cellspacing="0" cellpadding="5" border="1">
<tr>
<td>Code</td>
<td>From DATA 12345</td>
</tr>
<tr>
<td>Description</td>
<td>From DATA</td>
</tr>
<tr>
<td>Size</td>
<td>500</td>
</tr>
</table>
What is the best way to do this client side?
This jQuery plugin should do it for you client-side: http://code.google.com/p/js-tables/
In particular see this page with an example: http://code.google.com/p/js-tables/wiki/Table
There is a CSV to HTML online service at:
http://okfnlabs.org/blog/2013/12/05/view-csv-with-data-pipes.html
There is also a very simple, lightweight javascript library here you could use: https://github.com/okfn/csv.js (very few dependencies)