Does GWTQuery support the CSS Selector [attr*="some_val"]? - gwt

I have been using GQuery for a while now.
I recently came across some unexpected behaviour.
I have 2 different scenarios:
a) I want to select an element say
Link
I used
GQuery.$("a[href*=site:helloworld.com]")
This doesn't seem to work.
b) The other thing I wish to select is
<h1 data-title="SampleTitle">Title</h1>
I need to extract the value of data-title. I used the following:
GQuery.$("h1").attr("data-title");
Now, this doesn't return an error but it doesn't return the value either. It just returns a blank String. This doesn't have anything to do with the '-', is it?
What am I doing wrong here?

a) I did a quick test, and the selector works fine! (But you have to quote the value as mentioned in another answer: GQuery.$("a[href*=\"site:helloworld.com\"]"))
Note: The "*=" selector is defined in CSS 3. Gwtquery usually only supports CSS 2 at the moment, see http://code.google.com/p/gwtquery/wiki/CssGuide#CSS_scope
b) GQuery.$("h1").attr("data-title"); works for me: It returns the full attribute string value of the first "h1" element in the document
I'm using gwtquery 1.1.0 + GWT 2.4.0. If possible, try to upgrade to these (or later) versions.

Related

TYPO3: Duplicate content elements and fields after Flux 6.0.x update

Since updating from Flux 6.0.2 to the newest Flux TER-Release (7.0.0) I have the problem that all my defined flux:field.select items are switched. I have them defined as an array like this items="{0: {0: 'value shown as a CSS class in the frontend',1: 'value shown in BE'},}". But now I get the BE value in the frontend template.
Also all my content elements from my provider extension are shown twice (without a title) in the backend and the fields defined in the 'Configuration' section of my content element are shown twice.
There's also a RTE field shown at the bottom of my content element that has not been there before.
BE Output: view
Code on Pastebin: http://pastebin.com/CNcphn2k
Any help deeply appreciated.
EDIT:
I just set up a fresh instance of TYPO3 6.1.9 (blank package) and installed my extension with the above mentioned content elements. Dependencies were resolved automatically as it should (newest versions). Via the content wizard I tried to create a new element and I get the same result as in my existing install I first noticed this bug in.
EDIT2:
I was able to narrow it down to the flux:form.container tag. This duplicates the output in the BE. The select values are still switched though.
It is possible that you missed this official announcement:
http://fluidtypo3.org/blog/news/new-colpos-value.html
Failure to run the update script before letting TYPO3 change the type of the colPos value will result in the symptoms you describe. There is, unfortunately, no way to restore this (since your SQL will have cropped off all negative values and made them zero without any backup).
Restore from a backup and run the script and you should be fine.

Attribute value uses wrong case character Error in eclipse

I'm getting the following error in Eclipse juno:
Attribute value (POST) uses wrong case character
in the following line inside one of my HTML files:
<form action="http://allteamz.us5.list-manage.com/subscribe/post"
method="POST" id="mc-embedded-subscribe-form">
Is there a way to tell eclipse to "ignore" this error? Tried a few things but nothing seems to be working..
Go to Windows>>Preferences>>Web>>HTML Files>>Validation. A list should be shown and there should exist a title in bold called "Attributes". Selecting "Ignore" for the option "Attribute value using wrong case character" should solve it.
According to W3Schools the allowed values for the method attribute in a form element are only 'get' and 'post', lower case, so I think a better solution is change to lower case. This is strange to me because everywhere else these methods seem to be capitalized.
Eclipse was acting funky but after the restart the normal validation-ignore worked.
Go to Eclipse (or Window) -> Preferences -> Validation -> HTML Syntax Validator, and then 'uncheck' both manual and build
Instead of ignoring the issue through Eclipse configuration try to use proper tag .
This error comes if something like this written
< div onClick="..." > < /div>
Here one need to write onclick="" ; C in lower case .

Find CURRENTLY selected <option> with XPath

What's the correct XPath syntax to check if an option element is currently selected, or just to get the selected option element from a select element, on an open page with which the user, and JavaScript, may have interacted? Is this even possible with XPath, or does it lack the ability to look at DOM properties?
I can't find any documentation on this, and have (speculatively) tried:
//option[#selected=true]
//option[#selected="selected"]
//option[#selected]
but none of these work; they simply don't match any elements.
(In case it matters, I've tried this both using the $x function in the Chrome developer console, and using the find_elements_by_xpath method in Selenium for Python.)
Short answer: it's not possible.
Longer answer: XPath can look at HTML attributes, but it can't look at DOM properties. Selecting an <option> element in a <select> changes the selected property of the <option> to true, and also changes the value property of its parent <select> element, but it doesn't affect the attributes of either, so it is invisible to XPath.
To find <option> elements that have the selected attribute set, which is often how a page author might determine which option is initially selected, you can use //option[#selected]. But this does not find the currently selected <option>; changes that the user makes to the selection are invisible to XPath. There's no guarantee it will even find the initially selected option, since it's possible that the page author didn't put the selected attribute on any elements and either let the browser select the first option by default or had some JavaScript select the initial option via the selected property.
The multiple other answers here claiming that a selector like //option[#selected] can detect selection changes made by the user after the page loads are simply completely wrong.
Of course, if you're able to use CSS selectors instead of XPath selectors, then option:checked will do the job.
The problem could be the " (double quotes).
//select/option[#selected='selected'] - Will match the selected option, i am using this successfully.
//select/option[#selected='selected' and #value='specific value'] - Will only match the selected option if it has a 'specific value', i'm also using this.
If you are still having trouble, it could be an entirely different problem, perhaps there is no option node. I hope this helps.
I think we can use a knowledge from #Mark's answer and account that. Let's just find a node which HAS desired attribute:
tree.xpath('//select/option[#selected]/text()')[0].strip()
I tried "//option[#selected=''] and it has worked for me.
it is able to highlight the selected option within Page objects model.
I would try //option[#selected='true']
i.e. driver.findElements(By.xpath("//option[#selected='true']")).getText();

jQuery: Select all 'select' elements with certain val()

Does anyone know of an easy way, using jQuery, to select all <select> elements whose val() attribute yields a certain value?
I'm trying to do some validation logic and would like to just select all those elements with a single selector, then apply a warning class to each of their parents. This I know how to do once I select all the elements, but I didn't see a selector that handles this case.
Am I going to have to select all of the <select> elements into a selector, then iterate through them and check each of their values? I was hoping there would be a simpler way.
Thanks.
Why doesn't select[value=x] work? Well firstly because <select> doesn't actually have a value attribute. There is not a single value of a select box: there may be no selected options (there shouldn't normally be, but there can be in at least IE), and, in a <select multiple>, there can be any number of selected options.
Even input[value=x] doesn't work, even though <input> does have a value attribute. Well, it does work, it just doesn't do what you think. It fetches the value of the value="..." attribute in the HTML, not the current value you have entered into the form. The value="..." attribute actually corresponds to the defaultValue property and not value.
Similarly, option[value=x][selected] doesn't work because it is checking the <option selected> attribute from the HTML source (selected attribute -> defaultSelected property) and not the current selectedness of the option (selected property not attribute) - which might have changed since the page was loaded.
Except in IE, which gets the value, selected etc form attributes wrong.
Except (again): Tesserex's example may seem to work, and the reason for that is that that it's using a non-standard jQuery-specific selector, :has. This causes the native querySelectorAll methods of modern browsers to fail, and consequently jQuery falls back to its own (native JavaScript, slow) selector engine instead. This selector engine has a bug where it confuses properties for attributes, allowing [value=x] to do what you expected, and not fail like it should! (Update: this is probably no longer the case in newer jQuery versions.)
Summary: form field state checking and selectors don't mix. Apart from these issues, you also have to worry about escaping issues - for example, what if the value you want to test against contains quotes or square brackets?
So instead, yes, you should check it manually. For example using a filter:
$('select').filter(function() {
return $(this).val()==='the target value';
}).parent().addClass('warning');
(There is a value property in HTML5 and supported by modern browsers, that when you read it gives you the value of the first selected <option>. jQuery's val() is safe to use here because it provides the same method of getting the first selected option even on browsers that don't support this.)
The existing answers don't work on select tags, but I found something that does. Ask for a select that has a selected option.
$("select:has(option[value=blah]:selected)")
You can use :
$("select[value=X]");
where X is the value against which you want to check the select's value.
Attribute selectors Is what you're looking for I believe.
Something like $+('element[attribute="value"]')
See also:
*= anywhere
^= starts with
$= ends with
~= contains word
etc.
You can create a change event that puts the value in a custom attribute on the select element whenever the value changes. You can then use a simple selector to find all of the select elements that have that value. For example:
$("select").on("change", function (e) {
var $select = $(e.currentTarget);
$select.attr("select-value", $select.val());
});
And then you can do this:
var $matches = $("select[select-value='" + searchVal + "']");
$matches will have all of your matching selects.
This is a lot easier than having to iterate through elements. Remember to set select-value to the initial value when rendering the page so you don't need to trigger a change event for each select so the select-value is set.

I'm trying to select the adjacent sibling of "this" in jquery

$(this+"p").slideDown("slow");
$(this)+$("p").slideDown("slow");
$("this+p").slideDown("slow");
does not work.
Yeah, your syntax is bad. You should use the jQuery Sibling function:
$(this).siblings().find("p").slideDown("slow");
The jQuery API site is awesome for looking stuff like this up, I rely on it nearly daily. I'd keep an eye on it.
Next.
$(this).next("p").slideDown("slow")
Make sure that the "p" element is directly adjacent, though. Otherwise you'll want to use nextAll.
jQuery have not seemed to apply this? Possibly the syntax we are trying to use is incorrect.
next() can only select elements with an ID or Class - Not just a naked dom element as expected.
Instead use. > means select first level decends only.
$('body > div').hide();
But this gives the exact same result
$('body').children('div').hide();
But,
Next
$('body + div').hide();
and
Previous
$('body ~ div').hide();
Do not seem to work as expected? But jQuery use it as example for CSS selection...
Possibly there is a complex syntax to achieve this but I could not figure it out...