in a list of 10 li elements, I'm sorting the list via Sortable.js. But I need the id of the item the dragged li was dropped on. How would I get that?
I'm using SortableJs to sort items within the same category list but also to be able to move items from one category list to another and vice versa.
Not sure if this is what you are looking for but this is the way I get the ID of the destination container(list).
event.oldIndex is the original position of the item.
event.from is the original container element of the item (e.g ul tag)
event.newIndex is the final position of the item.
event.to is the final container element of the item (e.g. ul tag)
Whit that said you can do something like this:
/* If position did not change neither the containing list */
if (event.oldIndex === event.newIndex && event.from === event.to) { return; }
/* If position changed within the same category */
if (event.oldIndex !== event.newIndex) {
const newPosition = event.newIndex
}
/* If product was moved to another category list */
if (event.from !== event.to) {
/* Accessing `<ul data-id="10">` */
const categoryId = event.to.dataset.id;
/* Accessing `<ul id="list_on_the_right_11">` */
const elementId = event.to.id;
}
Hope it could be helpful in some way.
Related
I'm having trouble while trying to find a way to click the submenu option in this nav menu
The submenu option I want to click and the code of it
Is there a way of selecting it by it's content of it or by other alternative?
I tried await page.click(); but since i don't have any id, name or value to identify that option it automatically closes the chromium page
also tried clicking wit the content
const select = require('puppeteer-select'); const element = await select(page).getElement('div:contains(Negociação)'); await element.click(); didn't work either.
It is possible to filter certain elements by its text. Here is an example on how to select a table element and search in all its cells for a given text.
I started by writing 2 helper functions for getting text from an element and another to search text within an array of elements:
// returns text for an array of elements
async function findElementByText(elements, searchText) {
for(let el of elements) {
// get the text of the element and return
// element if text matches
const text = await getText(el)
console.log(`found text: "${text}", searchText: "${searchText}"`)
// alternatively you could use this for being a little more error tolerant
// depends on your use case and comes with some pitfalls.
// return text.toUpperCase().includes(searchText.toUpperCase())
// compare text and return element if matched
if(searchText === text) {
return el
}
}
// NO element found..
console.log('No element found by text', searchText)
return null
}
// returns text from a html element
async function getText(element) {
const textElement = await element.getProperty('textContent')
const text = await textElement.jsonValue()
// make sure to remove white spaces.
return text.trim()
}
With given helper functions you can now select the table and search within its td elements (the cells) .
// This selects the first found table. You may wanna grab the correct table by a classname.
const table = await page.$('table')
// select all cells in the table.
const cells = await table.$$('td')
// search in the cells for a given text. "cell" will be a JSHandle
// which can be clicked!
const searchText = 'text4'
const cell = await findElementByText(cells, searchText)
if(!cell) {
throw 'Cell with text ' + searchText + ' not found!!.'
}
console.log('clicking cell now.')
// click the element
await cell.click()
If you host the html yourselve it would make life easier by setting a classname OR id to the cells you wanna click. (only if allowed and possible ofc) .
In your next question you should provide the html as plaint text instead of an image. Plain text can easily be copied by other users to test and debug.
Feel free to leave a comment.
I am working on a polymer2 shadow dom template project need to select children elements from parent elements. I found this article introduces a way to select child shadow dom elements that like this:
// No fun.
document.querySelector('x-tabs').shadowRoot
.querySelector('x-panel').shadowRoot
.querySelector('#foo');
// Fun.
document.querySelector('x-tabs::shadow x-panel::shadow #foo');
However, when I tried in my polymer2 project, like this:
//First: works!!
document.querySelector('container')
.shadowRoot.querySelector('app-grid')
.shadowRoot.querySelector('#apps');
//Second: Doesn't work!// got null
document.querySelector('container::shadow app-grid::shadow #apps')
// Thrird: document.querySelector('* /deep/ #apps') // Doesn't work, got null
I really need the second way or the third, which to put selectors in (), but both couldn't work. Does anyone know why the second one doesn't work? Thank you so much!
::shadow and /deep/ has never(?) worked in Firefox, and is depraved in Chrome 63 and later.
Source
Eric Biedelman has written a nice querySelector method for finding all custom elements on a page using shadow DOM. I wouldn't use it myself, but I have implemented it so I can "querySelect" custom elements in the console. Here is his modified code:
// EXAMPLES
// findCustomElement('app-grid') // Returns app-grid element
// findCustomElements('dom-if') // Returns an array of dom-if elements (if there are several ones)
// findCustomElement('app-grid').props // Returns properties of the app-grid element
function findCustomElement(customElementName) {
const allCustomElements = [];
customElementName = (customElementName) ? customElementName.toLowerCase() : customElementName;
function isCustomElement(el) {
const isAttr = el.getAttribute('is');
// Check for <super-button> and <button is="super-button">.
return el.localName.includes('-') || isAttr && isAttr.includes('-');
}
function findAllCustomElements(nodes) {
for (let i = 0, el; el = nodes[i]; ++i) {
if (isCustomElement(el)) {
el.props = el.__data__ || el.__data || "Doesn't have any properties";
if (customElementName && customElementName === el.tagName.toLowerCase()) {
allCustomElements.push(el);
} else if (!customElementName) {
allCustomElements.push(el);
}
}
// If the element has shadow DOM, dig deeper.
if (el.shadowRoot) {
findAllCustomElements(el.shadowRoot.querySelectorAll('*'));
}
}
}
findAllCustomElements(document.querySelectorAll('*'));
if (allCustomElements.length < 2) {
return allCustomElements[0] || customElementName + " not found";
} else if (customElementName) {
allCustomElements.props = "Several elements found of type " + customElementName;
}
return allCustomElements;
}
Remove the if (isCustomElement(el)) { statement, and you can querySelect whatever element and get an array of it if several of them exists. You can change findAllCustomElements to implement a smarter querySelect using the recursive loop on shadowDoom as base. Again, I wouldn't use this myself – and instead pass on variables from parent element(s) to children where the children have observers that activates specific behaviors – but I wanted to give you a general implementation of a fallback if nothing else works.
The problem with your question is that you don't give any specifics about WHY you want to select the children in the first place.
I am creating a simple inventory system that will have various categories for the items, as well as the option to display all items.
Going from the 'all' category to the 'general' category will remove the unnecessary item, but leaves a gap for a significant period of time and there is not animation of the item after the gap sliding into place.
I am doing this using Vuejs and vue2-animate.
computed:
{
active_items: function()
{
var _self = this;
if(_self.active_category === 'all')
{
return _self.items;
} else
{
return _self.items.filter(function(i)
{
return i.category === _self.active_category;
});
}
}
},
https://jsfiddle.net/Crotanite/cn07tmho/8/
The gap that is left in place of disappearing list items is because an element that transition is being applied to, stays in place until leave-active animation phase is finished.
Simple fix, is to add position: absolute; to a leaving element. This will allow sibling list items to take it's position.
Below is updated version of your example with additional class zoomOut__absolute added to leave-active-class attribute. Additional class is added to avoid overwriting styles of animate.css:
JSFiddle
Hi I'm running into a little problem with DomCrawler. I'm scraping a page and it has a div with a class of .icon3d. I want to go through the page and for every div with that class I will add an "3D" item to an array, and every div without it I will add a "2D" item. Here is the code I have so far.
for ($i=0; $i < 10; $i++) {
$divs = $crawler->filter('div.icon3d');
if(count($divs)){
$type[] = '3D';
}else{
$type[] = '2D';
}
}
Check The DomCrawler Component documentation first. filter method returns filtered list of nodes, so by calling ->filter('div.icon3d') returned value will be list of all div elements which have icon3d class.
First you need to find all div elements, loop through them and add either 3D or 2D the to array depending on icon3d css class existance.
$divs = $crawler->filter('div');
foreach ($divs as $node) {
$type[] = (false !== strpos($node->getAttribute('class'), 'icon3d')) ? '3D' : '2D';
}
UPDATE
$crawler->filter('a')->each(function(Crawler $a) {
$div = $a->filter('div');
// Div exists
if ($div->count()) {
}
});
To get crawler node class use
$div->getNode(0)->getAttribute('class')
I figured it out. Here's the code I used. I'm sure there is a cleaner way.
$divs = $crawler->filter('#schedule li a')->each(function($node){
if ($node->children()->last()->attr('class') == 'icon3d') {
return '3D';
}else{
return '2D';
}
});
I am using uimap in coded ui test to get information about controlers in an application, the value returned for a listbox is "client" - controlType, technologyname MSAA and Name = session.
My goal is to be able to get all values of a listbox and then select a value using the code.
Is there a way to do that ?
Many thanks.
Given the UITestControl object for the list box you should be able to get all list entries by using the GetChildren method. It returns a collection having all the child controls of the parent control. Depending on the exact structure of your list box and its contents, you may need to call the method repeatedly to get the grandchild or deeper controls.
See http://msdn.microsoft.com/en-us/library/microsoft.visualstudio.testtools.uitesting.uitestcontrol.getchildren.aspx
Update
In C# you might write code based on the following:
foreach (UITestControl child in parent.GetChildren()) {
if ( someTestOfTheControl(child) ) {
... process the child control here ...
}
}
Or possibly on
foreach (UITestControl child in parent.GetChildren()) {
foreach (UITestControl grandChild in child.GetChildren()) {
if ( someTestOfTheControl(grandChild) ) {
... process the grandChild control here ...
}
}
}
Where someTestOfTheControl() tests whether the control is the one you are interested in.
Using UIMap - Get the control of ListBox
ItemToSelect - Is the name of item in string
WinList ListControl = new WinList(Control);
string[] CompleteList = ListControl.GetContent();
CompleteList = CompleteList.Where(x => x != null).ToArray();
string Value = CompleteList.First(x => x.Contains(ItemToSelect));
Mouse.Click((WinListItem)ListControl.Items.FirstOrDefault(x => x.Name.Contains(Value)));