DomQuery quirk with :has ??? [Archive]

dougtopp

15 Nov 2007, 3:02 PM

Hi, I'm using Ext for www.openplans.org and I'm running into a bizarre issue using Ext.DomQuery.selectNode() I've got HTML kind of like this:
<html>
<body>
<form id="searchbar"><input type="text"><input type="submit" value="search"></form>

<form id="formiwant">
<div>
<div id="divid">
<p>Some text</p>
</div>
<p>Other text</p>
</div>
</form>
</body>
</html>

I'm performing in JS:
var myform = Ext.DomQuery.selectNode('form:has(#divid)');

And the result I'm getting back is the first form and not the second.

When I do:
var mydiv = Ext.DomQuery.selectNode('div:has(#divid) > p');

it successfully returns the paragraph node containing 'Other text'...

Does anyone have any ideas as to what's going wrong?

Thanks
Douglas

dogomatic

16 Nov 2007, 11:28 AM

It looks like this has to do with how ext handles the #id selector. It uses document.getElementById which ignores the root parameter passed into select.

check it out by comparing:

Ext.DomQuery.selectNode('#divid', 'searchbar')
and
Ext.DomQuery.selectNode('#divid', 'formiwant')

Both return that div.

So even in the :has the #divid always returns the div, which means that both forms pass the :has test, and you're just getting the first one.
As a workaround I guess you could get #divid directly and use findParent('form').