I have multiple nested groups(compound node) in my graph and trying to add a new group with z-index-compare:"manual" and z-compound-depth:"top" for all the links and nodes in that group so that this group remains on the top always. It is working just fine. But now when I collapse any other group then the links which have z-compound-depth:"top" are rendered behind. Looks like it is not honored.
Could you please take a look at and provide any solution?
I have created a simple fiddle to reproduce this issue.
Demohttps://jsfiddle.net/kmprakashbabu/tug2e01r/8/
Reproduction Steps:
Run the fiddle. You will see a group "p1"
Now click "Add Top Group" button from left. A new group "p2" will be added and drag around to see that it remains always on top of the group "p1"
Now collapse "p1" and see that all the links in "p2" and the links connecting "p1" and "P2" will go behind the "p2".
Thanks
Prakash
Related
Referencing this page, I'm trying to get all of the n Markets > links but ONLY those that are followed by odds. You may have to scroll through a few pages to see an example on the site or there is a screenshot posted below.
From the screenshot, the links that I want (circled in green) are followed by odds (circled in red). I do NOT want the links (marked with a red X) that are not followed by odds (circled in yellow).
Is it possible to get all the .purple-arrow elements based on if .bettype:nth-child(1) .bet-party exists beside it?
Should be simple enough with following and preceding yet this is not giving desired.
//*[contains(#href,'/sports-betting/soccer/')]/ancestor::*[contains(#class,'bet-party')]/preceding-sibling::span['other-matches']//*[contains(#href, '/sports-betting/soccer/')]
You can do this with XPath.
//div[#class='container-fluid'][not(.//div[contains(#class,'no-outcomes')])]//a[#class='purple-arrow']
Breaking it down
//div[#class='container-fluid']
Find a DIV that contains the class 'container-fluid'. These are the top level containers that hold the entire row of HTML for each match.
[not(.//div[contains(#class,'no-outcomes')])]
It must not have a descendant DIV that contains the class 'no-outcomes'. If the DIV has this class, that row has no odds posted so we don't want these.
//a[#class='purple-arrow']
and finally... return the link with the class 'purple-arrow'.
You can test this in Chrome dev tools using $x().
I have problem in rendering a template
When a new data has been added, it won't go to the process of v-if even if the condition is both TRUE.
Can some please explain why?
I have provided some screenshot below to explain further my issue
This first image was my template for displaying the products, you will notice the add, update and remove in here.
The second image shows that I'm trying to add a new product
The third image shows that I have successfully added the new product. The problem is, the action button "update" is triggered but won't take any effect.
The image above shows that the update button works with the past data, but not with the new one.
This last image will prove that the button has been triggered. I've added a console.log to display the following upon clicking the update button.
INDEX of the row, which is [0].
The typeOf the variable 'isUpdate' [boolean].
The value of 'isUpdate' [True, False]
and the productID which is [151]
Any idea why it hasn't been triggered, or any idea how to debugged this?
If you want to see the code. I can provide it, just tell me which part are you looking for. As I don't have any idea which part has the error.
Thank you in advance.
Updated
AS per Amresh Venugopal Request
Here is the v-if in the template
<tr v-if='product.id > 0 && product.isUpdate' class='table-inputs'>
And the updatebtn function
canUpdate: function(data) {
console.log(data.pindex);
this.products[data.pindex].isUpdate = !this.products[data.pindex].isUpdate;
console.log(typeof this.products[data.pindex].isUpdate);
console.log(this.products[data.pindex].isUpdate);
console.log(this.products[data.pindex].id);
}
I only set the isUpdate value to 'true' if 'false', and viceversa.
The productID is added after the ajax save function.
I figure it out!
When I push the data in this.products, I didn't include the 'isUpdate' field.
Got it working now.
I have this logic which gets the current page's title first clicks on next button, fetches the title again and if both the titles are the same, meaning navigation has not moved to the next page, it clicks on Next again.
However, my problem is that the title element's Xpath differs - the same title element has two Xpaths. One is some pages the other in some other pages.
It is either this,
(.//span[#class='g-title'])[2]
OR
.//span[#class='g-title']
So, how can I handle this?
If the element has two xpath, then you can write two xpaths like below
xpath1 | xpath2
Eg: //input[#name="username"] | //input[#id="wm_login-username"]
It will choose any one xpath
You can use or operator like
(.//span[#class='g-title'])[2] or .//span[#class='g-title']
For more details : Two conditions using OR in XPATH
You can use or, like below:
//tr[#class='alternateRow' or #class='itemRow']
I had an interesting insight I had using this method. In my python code I was clicking a cart button and the or "|" ONLY works with separate xpath statements like so ...
WebDriverWait(webdriver,20).until(EC.visibility_of_element_located((By.XPATH,"//*[#class='buttoncount-1'] | //button[contains(text(), 'Add to Cart')]")))
or
btn = webdriver.find_element_by_xpath("//*[#class='buttoncount-1'] | //button[contains(text(), 'Add to Cart')]")
I found that "or" ONLY works when they share the same bracket []
WebDriverWait(driver,10).until(EC.element_to_be_clickable((By.XPATH,"//button[contains(text(), 'Add to Cart') or contains(text(),'Buy')]"))).click()
And since you're here. If you're curious about "and" statements this worked for me...
WebDriverWait(driver,10).until(EC.element_to_be_clickable((By.XPATH,"//button[contains(text(), 'Continue To Order Rev')][#data-attr='continueToOrderReviewBtn']"))).click()
Simply pairing two separate statements was sufficient. No "and" necessary.
Note: This was all in python. I do not know how this will transfer over to java. Hope this was somewhat useful. It took me a few migraines to narrow this down.
Can I add an item to the container as the first one rather than appending all existing ones.
From what I understand this.add([item]) will add item as the last one, however I would like it to apper it on the top of the screen before anything else has been added.
You can use insert method of container like this:
this.insert(0 , item);
where it would appear depends on your layout.
I am encountering a problem of jquery live function not consistently working for me (or that what I think).
I have the same html form which is used for both adding new comment and editing an existing one; this form is propagated using a php code at the server side through a GET call. The two forms are displayed in two different tabs (tab1: adding a comment, tab2: listing the comments; tab3: edit a comment selected in tab2) based on the tab selection. The "Add comment" form appears as the main content of the tab1; however, the 'edit' form appears based on the selection of the comment that needs to be edit in tab2, so let assume that the "edit comment" form appears as tab3. The below code work perfectly for tab1 when the form is the main content of that tab; but it doesn't work consistently when it is the main content of tab3, which is showed based on which comment need to be edit in tab2.
$("input.sample_radio").live('change',function(){
if ($(this).val() == 'no')
$('#sample_table').hide();
else if ($(this).val() == 'yes')
$('#sample_table').show();
return false;
});
If you can provide me with some thoughts, it would be appreciated. My observations were:
I used $("input[name='sample_radio']") but this didn't work for the form of tab3 because it always end up at the form of tab1
by using $("input.sample_radio") I assumed all the classes of type 'sample_radio' would work, but it not working either.
live is supposed to bind events to the new elements added to the DOM tree after jquery calls, but it seems this is not the case for me.
Thanks
Following the suggestion of Mark Schultheiss
Look into .delegate() which was presented specifically to address this by allowing you to specify a context.
I managed to solve this issue by binding the event to the selected parents (tab1 and tab3) of the radio buttons and then filtering based on the selector which is here is the name of the radio button element and as shown below:
$('#tab1,#tab3').delegate('input[name="policy_radio"]','change',function(){
if ($(this).val() == 'no')
$('.policy_table').hide();
else if ($(this).val() == 'yes')
$('.policy_table').show();
return false;
});
Thanks for pointing me to this point.
By using .live you have ran into one of it's challenges. When you change the selection context you prevent it from working properly.
Look into .delegate() which was presented specifically to address this by allowing you to specify a context.
See this post for some notes on delegate from Brandon Aaron: http://brandonaaron.net/blog/2010/03/4/event-delegation-with-jquery
And see this nice one on context: http://brandonaaron.net/blog/2009/06/24/understanding-the-context-in-jquery