I created an ASP.NET page that sends some request and gets results.
After I get the results I format it into the HTML table. The results can be different by number of columns and rows.
After that I am trying to use datatables to get it formated and easy to view and search, and it works fine, but only the first time it is called. (I get results on button click.)
For example, let's say I only get 1 parameter and value (name-status, value-ok), and it will be shown like this under, and that is ok
status
ok
but after i call it again, let's say I will get the same respond results, the results are shown like this
status status
ok
ok
for every next call the output table will stay the same, it will show the first result I get, and the last one
how can I get rid of the first one?
I tried destroying datatable, tblResults, old values in results- pretty much everything that came to my mind
HTML table:
<table id="tblResults">
<thead id="tblHead">
<tr data-bind="foreach: reportHeaders">
<th data-bind="text: $data"></th>
</tr>
</thead>
<tbody data-bind="foreach: reportResults">
<tr data-bind="foreach: rowArray">
<td data-bind="text: $data"></td>
</tr>
</tbody>
</table>
self.reportResults.removeAll();
self.reportHeaders.removeAll();
ko.mapping.fromJS(results.d.results, mappingReportResults, self.reportResults);
ko.mapping.fromJS(results.d.header, self.reportHeaders);
oTable = $('#tblResults').dataTable();
Related
I have a table with filters rendered as select boxes and the option that the filter is saved between page reloads. Works so far. Here is the relevant part of my code:
<script>
$('.tablesorter').tablesorter({
widgets: ["saveSort", "filter", "zebra"],
widgetOptions: {
filter_saveFilters : true,
saveSort: true
}
});
</script>
<table class="table tablesorter" data-sortlist="[[1,0]]">
<thead>
<tr>
<th data-filter="false" data-sort="false">Image</th>
<th>Name</th>
<th class="filter-select">Status</th>
</tr>
</thead>
<tbody> ... </tbody>
</table>
Here comes the problem: First page load - filter status for "error" (select-box) results in one table row displayed. Then I fix the error and reload the page. Now all rows are filtered out, but the status filter select-box is empty (does not contain the active filter "error", thus displays an empty string).
That means that the displayed filter and the displayed table rows do not match, which is a problem.
When I activly select the empty value in the status filter, all rows get displayed again.
Any ideas how to handle this issue? Thanks for your solutions :)
I want to save the sorting order of the table and when refreshed it should sort on the saved status.
I am using the Tablesorter jquery plugin for sorting of table
I used javascript to store them in the localstorage but it is storing entire table
javascript Code :
$("#videoTable").on("sortEnd", function SaveSortOrder() {
var table_layout = $('#videoTable')[0].innerHTML;
localStorage.setItem("tableLayout",table_layout);
});
HTML Code:
<table class="table sortable" id="videoTable">
<thead>
<tr valign="middle">
<th data-sort="name" class="tooltipPoint col-lg-4" style="text-align:left;">Name <i class="fa fa-sort" aria-hidden="true"></i></th>
<th data-sort="name" class="tooltipPoint text-center" nowrap>Status <i class="fa fa-sort" aria-hidden="true"></i></th>
<th class="unclickable text-center">Action</th>
</tr>
</thead>
<tbody>
The body will be generated dynamically.
</tbody>
</table>
Is there any way to retrieve only the headers or only the column (Index of the column in a table) we are sorting so that I can modify the class based on the result.
Sorry for bad English. Thanks in advance.
Sort column. Save only what column how sorted (dont know how to get current sort from tablesorter)
On page load check if any sort is saved in local storage.
If so, apply it with sortList.
You should consider new data may be added. Thats why your solution is not right.
I am not sure if I understood your question correctly, but if you want to add a class to the column that was sorted you could manage that at the table header level, something along the lines of this:
jQuery("#videoTable th.tooltipPoint").on("click",function(){
jQuery("#videoTable th.tooltipPoint").removeClass("sorted");
jQuery(this).addClass("sorted");
});
having some issues with my code below, first here is the HTML:
<table class="finance-table">
<tbody><tr>
<th></th>
<th>Deposit</th>
<th>Balance</th>
<th>Fees</th>
<th>Total Payable</th>
<th>Term</th>
<th>Fixed Rate</th>
<th>Representative APR</th>
<th>Monthly Pmt</th>
</tr>
<tr class="hp">
<td><strong>HP</strong></td>
<td id="td_finance_deposit">£11700.00</td>
<td id="td_finance_balance">£105300.00</td>
<td id="td_finance_fees">£298.00</td>
<td id="td_finance_total_inc_deposit">£146255.50</td>
<td id="td_finance_term">60 mths</td>
<td id="td_finance_rate">5.50%</td>
<td id="td_finance_apr">10.1%</td>
<td id="td_finance_monthly_payments">£2242.59 p/m* x 60 mths</td>
</tr>
</tbody></table>
There is about 10 of these tables [within the same document], all with the same id's and class's. I'm using an each loop to execute some code against each table found, however it only seems to be working on the first table and disregards the others.
Below is the jQuery, like I said works find on the first table, but ignores the rest!
<!-- Remove First and Final Payment from Showroom Finance Examples -->
<script>
$(".finance-table").each(function(key, value) {
// Display loading
var html = $(this);
// Remove the First Payment and Final Payment Column
$(this).find("#td_finance_first_payment, #td_finance_final_payment").remove();
$(this).find("th:contains('1st Pmt')").remove(); $(this).find("th:contains('Final Pmt')").remove();
// Get the Term and update the monthly payment
var term = $(this).find("#td_finance_term").html(); // .replace(/\D/g,'')
var payments = ($(this).find("#td_finance_monthly_payments").html()).split('x')[0];
($(this).find("#td_finance_monthly_payments")).html(payments + " x " + term);
})
</script>
Edit:
Please note, I can't change the HTML at all
You should first give a unique ID to each <td>, perhaps with your DB identifier for that record. You don't need it now but this will allow you to do other thing later if you need it.
Then change all the <td> ids to classes:
<td class="td_finance_fees">£298.00</td>
Finally change all your javascript accordingly to use class instead of IDs:
$(this).find(".td_finance_first_payment, .td_finance_final_payment").remove();
Using Attribute Equals Selector
Change your code from:
$(this).find("#td_finance_first_payment, #td_finance_final_payment").remove();
to:
$(this).find('td[id="td_finance_first_payment"], td[id="td_finance_final_payment"]').remove();
Do this type of change for all areas of #xxx to id="xxx"
What this does is find all tds with attribute id="xxx", rather than using #id identifier, this is forces jQuery to do a tree search.
Also your HTML does not match your code, (theres no td_finance_first_payment in your html, I assume you removed it?)
Edit: This solution is useful if you 100% cannot edit the html (comes from a source you have no control over, such as an API or internal software). Best solution would be to fix the ids!
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
A newbie question,really.
Suppose I have a html table like this:
<div id="div1">
<table id="table1" border="1">
<tr>
<th bgcolor="#eee"><strong>ID</strong></th>
<th bgcolor="#eee"><strong>Price</strong></th>
</tr>
<tr>
<td id='id1'>1111</td>
<td id='id2'>2222</td>
</tr>
</table>
</div>
Now I am using Jquery to get data in json format from server, like this:
id1,19.99
id2,29.99
id3,39.00
What I want to achieve is: Look at the data, if the id already exist in table, update the cell value. If id doesn't exist in the table, add a new row. How do I do that in JQuery? I just started to learn JQuery. Now I can use ajax call to get the data, but don't know how to update the table. Any help is appreciated.
To see if a cell exists, you must test the .length of its selector:
$('#'+str).length; // zero if there is no such ID
Or you can just update the contents of that cell with .text(), which will fail if the ID doesn't exist:
$('#'+str).text(newvalue);
To create a new row, you can .append() it to the table:
$('table tr#id_of_row').append('<td id="'+str+'">'+newvalue+'</td>');
You can get a cell by id like this
$('#'+id).length //length will be 0 if not found or 1 if found
Update the value using
$('#'+id).text(new_value);