In the fifth column of my table which is populated from ajax, outside of the code is ==$0 which is not part of the html.
Screenshot from Chrome: http://i.imgur.com/vRioSrh.png
This breaks the whole table... I have no idea where this code is coming from.
Using datatables 1.10.12.
Oh, this appears to be a Chrome debugging value? I suppose it is not part of the actual document. There must be another issue in my table.
Related
Situation:
I have a pandas dataframe which I convert into an html table via df.to_html(). I then add the DataTables class to the table. This DataTables-table has the following columns:
ID | X | Y | Val |...More columns...| Selection_Criteria |...More columns...
The values in Selection_Criteria can be either 1 or 0. I know that with:
$('#ProductList').DataTable( {
...
"fnInitComplete": function(oSettings, json) { $('#ProductList tbody tr:eq(0)').click(); }
});
(Source: http://code.datatables.net/forums/discussion/38171/automatic-select-of-the-first-row-on-reload)
..it is theoretically possible to select the first row. (In reality, I have not been able to simulate a click for the first row.)
But my question goes more towards: How do I automatically pre-select ALL rows where the value is 1 in Selection_Criteria? What is the best approach? Should this be done client/server side?
In pandas the term "select"(ing) means to screen out that which was not selected for. I know that in a table on a web page, selected can mean being highlighted to stand out from the others. There are a couple of ways you can do this on the server side. You could display two tables, one for each state of Selection_Criteria. This would save you the hassle of trying to select individual rows out of a table in the first place (which would be done with Javascript, not Pandas). While pandas has the ability to add a class to the resulting html, the class is applied to the element.
If you are using jquery you are going to use these pieces. as you haven't put example data I can't be exact.
replace x in the next line with the number of columns the Selection_Criteria=1 is across the table
$( "tr td:nth-child(x):contains('1')" ).addClass('selected');
There are solutions on the backend using beautifulsoup and css selectors, or lxml.etree with xpath selectors. But jquery is going to be the most concise with this problem.
#Aliester. Thank you for the pointer!
This helped me find the solution to my own question. What I did:
1.) Identify row index that I want to select when the table loads.
2.) Pass the index to js.
3.) Loop over the indices and apply the following command to each index entry:
table.row(':eq('+hit_index_row+')').select();
So I am using the API to select each individual row. This works for me and hopefully could be helpful to others as well. It may be a bit hacky, so more elegant suggestions are welcome!
You can do this by providing a function for the "rowCallback" option when initializing the DataTable. https://datatables.net/reference/option/rowCallback
Also it is generally better to use the API methods to select rows instead of just changing the class. I found that the DataTable + Select libraries keep an internal collection of selected row indexes (just current page if serverside processing is on) instead of using the class to resolve selected items.
So while the display will look right, if you just change the class, if you rely on any of the API methods to get selected items later on there will be issues. Additionally just changing the class on the row will not fire any of the "select" events on the table so you can't rely on those either.
I am trying to automate a page using selenium webdriver. The page contains a table which has the following xpath.
Find below a sample xpath validation which works fine.
I am iterating it through div as rows are considered as div under which there will be a table which has all the rows mentioned.
table = common.getObjectByXpath("html/body/div[4]/div[4]/div[1]/div/div/div[3]/div/div[2]/div/div/div/div");
rows = table.findElements(By.tagName("div"));
for(int i=1;i<=rows.size();i++){
if(driver.findElement(By.xpath("html/body/div[4]/div[4]/div[1]/div/div/div[3]/div/div[2]/div/div/div/div/div["+i+"]/table/tbody/tr/td[5]/span").getText().equals("endnode 11.1"))){
System.out.println(" print Something");
}
}
It works fine with xpath. But I want to do it with css selector. I am attaching the sample format of the table.
In the below figure, each div is considered as a row and under which you will see a table which has entries for columns.
The xpath you are using is a very fragile one since it starts right from the html element and heavily depends on the HTML structure of the page. Needless to say - it is huge and is not quite readable and easily understandable.
Instead rely on the element attributes - classes or ids. For example:
div#dojox_grid__View_11 div.dojoxGridContent div.dojoxGridRow
So basically I have these two DateTextBoxes and I want to copy the value from one to another? Sounds easy, right? Still, it is not...
I tried to do it this way:
dojo.byId("datetextbox1").value = dojo.byId("datetextbox2").value;
it actually looks like the value changes as the content of the field changes, but it doesn't really. When I inspect the element with firefox it still contains the old value in the code and when I try to submit the form, the old value is sent!
So my question is: how should I change that damn value?
You'll want to set the value on the widget and not directly on the node.
dijit.byId("datetextbox1").set('value', dijit.byId("datetextbox2").get('value'));
dijit.byId grabs widgets, dojo.byId grabs dom nodes
I got my autocomplete stuff working well enough to see that it's returning some data when I type in a field--but the data shown in the dropdown below the textbox is just a vertical column of asterisks or list item bullets. (I can't really tell what they are.)
When I query the web service directly in the browser, it returns a Json array as expected which looks like this where, for example ?term=chi (I've added some line breaks for readability)
[
{"Name":"Chihuahua"},
{"Name":"Chinese Crested"},
{"Name":"Chinese Shar-Pei"},
{"Name":"Japanese Chin"},
{"Name":"Schipperke"}
]
My JavaScript looks like this:
$(function() {
$("#Breed").autocomplete({
source: "#Url.Action("BreedList", "Patient")"
});
});
like I say, my textbox in question (#Breed) does respond sort of like an autocomplete box, but the dropdown data is weird. Any ideas?
Although I did have a CSS bundling problem (somehow I had omitted the jquery ui css from my bundle), a bigger issue was that the Json returned by my service needed a lower case "value" property for each item. I was using the column name as cased on my Linq query. The tip that pointed me in the right direction on this came from the answer here: jQueryUI autoComplete returns back empty list
Goal:
Display the result without using any line between column and row
Problem:
I can't remove these line
The picture below is taken in preview mode
// Fullmetalboy
In the textbox properties for each cell of the grid, just make sure you set the BorderWidth property to 0.
Due to very limited info in the question maybe try Results-to-text instead of Results-to-grid?
I think that we need more info here... are you showing these results in a HTML page, through some dynamic language (ASP, PHP, Ruby)? or are you using reporting tools like Crystal Dynamics?
If you're doing in HTML, I guess the css rule border-collapse:collapse on the table would do the trick