$(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...
Related
I have a simple list component in Vue2 with the ability to add/delete items. My issue was that when I switched from a regular HTML element to material-ui (https://vuematerial.io/), my input-clearing functionality broke.
This is what it looked like:
With the regular HTML element, I was simply targeting the element by ID (from within the methods of my component script) and assigning it an empty string to clear it, as so:
if (input.value !== '') {
this.items.push({
text: input.value
})
input.value = ''
}
I found the solution, which I'll answer below, but again, my question was: How do I clear the field when using a material-ui element? And the bonus question, which I haven't fully answered for myself: Why did it break?
So, first the "how" to make it work:
I needed to set a "v-model" attribute on my element (I called it "inputField"), and then initialize it to empty within the component's data properties, and THEN in my component methods "addInput" function, I had to set "this.inputField = ''" instead of "input.value = ''".
To illustrate:
So, that works. Here's the result:
Now, that just leaves the question of exactly how this all works, and why the method which worked for a regular HTML failed on ? I'm not sure, and I'd welcome an explanation/education from anyone who can explain!
Vue DevTools for Chrome seems to give a hint:
"Mdclearable" seems intuitively to be related; this property is set to false. Is that something to do with it? I'm not sure.
Learning a bit more about Vue's "v-model" and reactivity was also helpful in solving this.
Again, additional comments welcome to help elucidate what is going on here! And I hope this Q&A will help someone else possibly avoid some frustrations in future.
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();
My problem seemed easy at first but i got stuck.
I have some containers (divs) in my page with some custom attributes.
<div class="myclass" myattr1="blah" myattr2="text1-text2-text3-text4-"></div>
myattr1 and myattr2 are defined by me.
All divs are visible on page load.
Now, depending on user selection from a list, i want to show only the divs with myattrib1="blah" and hide the rest.
I tried the following code, with no success at all
$('#mySelectID').change(function()
{
var startName = $(this).val();
$(".myclass").not('[myattrib1!="+startName+"]').toggle();
});
The same approach will be used to filter results by attrib2, but there i will use myattrib2|="+startName+" ( i think this is correct - thats why i have the extra - on the end of myattr2="text1-text2-text3-text4-").
Can anyone advice me on how to properly achieve this kind of filtering?
thank you!
You are close, but as you can see form the syntax highlighting, your are not performing string concatenation. +startName+ will be taken literally. Fix the quotes and your fine:
.not('[myattrib1!="' + startName + '"]')
Note that you should be using data-* attributes instead of custom ones.
I need to find any extra links and print them out. I started by doing:
get_xpath_count('//li/a')
and comparing it to the size of an array that holds the name of all the links for the sidebar. When the count is too high/low, I need to print out all the extra/missing links. I would like to make a list of the names so I can compare it to the array. I've tried a few things like get_text('//li/a'), which returns the name of the first. get_text('//li/a[1]) does the same, but any other index returns nothing.
Any ideas? Also, I need the name that's displayed on the link, not the actual href.
Edit* Also, i'm pretty new to selenium and Xpath. Please let me know if there's info I let out that is needed, or just any suggestions towards thew way I'm going about this.
I have been able to get this to work using CSS element locators. Since I use CSS selectors far more often than Xpath, I find it easier to always use them with Selenium as well.
$selenium->get_text("css=li a:nth-child(1)")
$selenium->get_text("css=li a:nth-child(2)")
$selenium->get_text("css=li a:nth-child(...)")
$selenium->get_text("css=li a:nth-child(n)")
Use:
(//li/a)[$someNumber]
this will get you the text of $someNumber-th //li/a in the XML document.
In order to know what values to use to substitute the $someNumber with, you need to know the total count of these elements:
count(//li/a)
This is in JAVA. You can use the same concept in perl
int totCountInPage=selenium.getXpathCount(//li/a);
for(int count=1;count<=totCountInPage;count++)
System.out.println(selenium.getText("xpath=//li[count]/a"));
This should print text inside the anchor links under all li tag.
I'm currently using Zend_Filter_StripTags in a commenting system, but stuff kinda breaks when '<3' is entered. StripTags doesn't seem to be smart enough to realize that it's not an HTML tag, and creating the filter as "new Zend_Filter_StripTags(array('3'))" doesn't seem to work either.
Should I pass the input through a regexp first, or is there a way to get Zend_Filter_StripTags to straighten up and fly right?
Ended up writing a Zend_Filter class that was basically a wrapper for HTMLPurifier. Works perfectly, because HTMLPurifier is a LOT smarter than striptags.
I'm not familiar with Zend much, but if you want stuff like <3 to be allowed, just do htmlspecialchars instead of strip_tags on it.
What you want is Zend_Filter_HtmlEntites most likely.
See: Zend_Filter_HtmlEnties
The problem with htmlspecialchars and Zend_Filter_HtmlEntities is that if you're trying to strip out all html tags ( like 'a' and 'img', etc ), then instead of stripping them, you end up with that markup in your output.
Take comments on a blog for example. If you use htmlspecialchars or Zend_Filter_HtmlEntities, in a comment where someone tries to use html to enter a link you end up with that markup showing up when you display the comment. But if you use strip_tags or Zend_Filter_StripTags you end up mangling the comment, as neither is smart enough to realize that '<3' isn't a tag, and just strips everything from '<3' until the end of the comment ( or until it finds '>' ).
It would be nice if Zend had something like HTMLPurifier, where it actually checks and validates the input before stripping tags. This means that stuff like '<3' gets left alone, where as stuff like 'Awesome Site' becomes 'Awesome Site'.
This is a problem I'm trying to work around, and at the moment it seems like I'm going to end up writing my own Zend_Filter class that's basically a wrapper for HTMLPurifier.