reason for lack of IDs in datatables elements?

ashimashi

I'm currently prototyping use of datatables + java servlet combination and it is working great. We use a combination of FitNesse and Selenium Server (formerly Selenium RC) for acceptance tests. Selenium relies on IDs in order to find fields to type in, links/buttons to click on, etc. But some of the datatables elements do not have IDs. For example search field doesn't have one, neither do 1...n numbers in full pagination.

Is there a specific reason why an ID is not provided for them? I've changed datatables code to generate IDs for these but I prefer if it was done as part of core datatables, is it possible to add this to future releases?

Cheers
Ashkan

GregP

I can't presume to speak for Allan, but it's considered very UNcommon to provide IDs for every element. In my opinion, DataTables is operating with the industry standard way of doing things.

We're getting ready for acceptance testing as well, and the lack of IDs does indeed make things trickier, so I understand your pain. I just think that having IDs for every element is not typical.

allan

There are a couple of reasons why I didn't put IDs on everything:

1. It would slow things down - messing around with the DOM is slow and I didn't want to do that if I can avoid it (its not very slow in fairness - but every little helps...).

2. Everything in DataTables can be easily accessed using CSS selectors. It sounds like Selenium could do with an upgrade to support basic CSS selectors ;-)

3. It would be messy. The IDs would have to have the numbers generated since you can't have two the same, so targeting them would be horrible as would generating them.

4. It would make the DOM larger, which is not good for some embedded devices where DataTables is used.

Allan

fbas

it would also be possible to add on ID's using javascript without editing the DataTables core.

just a thought so you don't break compatibility.

GregP

Along with fbas' comment, it would be trivial to make a script that adds the IDs just for the testing (remove the script for production). The only tests that would be affected are performance tests, if those are part of the metrics you're collecting. Though even then you could work out a way to subtract the ID-adding script from the equation to within a few milliseconds.

ashimashi

Thanks for your advice guys.

Sorry, Selenium does indeed support CSS Selectors, what I should have said is that our specific selenium fixtures (which are used through fitnesse by non-programmers to write acceptance tests) do not use CSS Selectors and rely on IDs and that's not something we would be changing in the short term.

I look into your suggestions Greg, fbas and allan and post my results here. Time to read up on CSS as coming from Java/backend background my knowledge of that is a bit patchy.

Any suggestion on where to look for examples of addressing elements of datatables using selectors. The elements I'm interested are paginations links and filter input box.

Thanks again
Ash

allan

I find the jQuery selectors guide very helpful for know what can be done in CSS (although remember they are extending some of them):
http://api.jquery.com/category/selectors/

And for DataTables:
http://datatables.net/styling/ids_classes along with poking around in Firebug.

Allan

ashimashi

Thanks for the links Allan.

I have added a simple javascript to add an ID to filter field so that we can use our existing fixtures. Something like this:

$(":text").attr('id', 'fldKeywordSearch');

It works fine and sets the ID.

however, when I use selenium to type into this field it doesn't update. In can recreate the same problem by changing the text value of the search manually. Here's a code snippet for this:

[code]
jQuery(document).ready(function(){

var oTable = $('#example2').dataTable( {
"sDom" : 'lrftip',
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "policy_search_datatables",
"sPaginationType": "full_numbers",
} );
$("div.dataTables_filter :text").attr('id', 'fldKeywordSearch');
$("#fldKeywordSearch").text('foo');
$("#fldKeywordSearch").trigger('keyup');
});
[/code]

After the above page is loaded, the html for the filter is correct:

[code] foo [/code]
However, the filter box remains empty in datatable, and no filtering occurs either (as I presume it depends on keyup to trigger?)

I've tried calling fnDraw but that doesn't seem to be the problem. Any pointers on where to look or what I'm missing?

GregP

To update the text for an input field, you need to use .val('foo') in place of .text('foo'). This should also help trigger search on keyup.

ashimashi

Thanks greg that works, I can achieve what I was looking for by simple doing this:
[code] $("#example2_filter :text").attr('id', 'fldKeywordSearch'); [/code]

However, the pagination buttons in full_number_paging mode don't seem to be accessible through CSS selectors.

To highlight this problem, if you put this in the above section of the code:

[code]$("body").find("span").css("border","3px solid red");[/code]

It will NOT find the inner spans (1 to 5), it will only draw a border around their outer span (the one containing all 1-5). It seems that the nested spans somehow get lost or jQuery doesn't care about them.

Anyone any experience with that?

GregP

The border test works for me in my instance. It finds the inner 1-5 as well, as long as you execute the line after the DOM has been created AND modified by DT. Depending on where you insert that bit of code, you may just be overwritten by a later function.

In other words, the pagination is by necessity created AFTER the data is retrieved, so you're probably just seeing a timing issue. Easily resolved by adding your "set IDs for everything" script to an appropriate callback, or even by adding it at the bottom of your page in such a way that it won't run until after all your other scripts have executed.