I have a chosen combobox (with multiples values).
I have 2 buttons: first has this function in order to add a value in the combobox
$('select option[value="13"]').attr('selected', 'selected')
$('select').trigger('chosen:updated');
Second button has this function in order to remove this value:
$('select option[value="13"]').removeAttr('selected')
$('select').trigger('chosen:updated');
I call my page: everything is fine
Click on first button: ok, the value is added
Click second button: ok, the value is removed
Click another time on first button: problem, the value is not added
You can see an example here: http://jsfiddle.net/pingoooo/7NWEd/1/
Can you tell me why the second time I click on the first button, the function doesn't work.
I use chosen version 1.0
Thanks
EDIT: seems that works on chrome but why not IE and FF
I received an answer on github wich answer perfectly my question:
https://github.com/harvesthq/chosen/issues/1732
Related
I'm having difficulties using the Click trigger in google tag manager.
I want to setup a trigger to fire on a click event, only when the element class contain "scrollto".
But the thing is, it keeps firing up even when the "scrollto" class isn't part of the element I clicked on.
Here are a few screenshot I hope will help you understand the problem:
Thank you for your help,
Alexis
Ones you set up any click trigger you will get these events everytime a user makes a click but that doesnt mean the trigger it self is being fired. You can append the trigger to any tag and you ll see that if you click anywhere else the tag wont fire even when you see the event.
Hope it helps!
Instead of click classes contains scrollto,
Give click classes equals scrollto
Scenario:
Testing web application using Protractor
Element needs to be clicked on to open another page
Designed the test to have one click on the element
Issue:
Sometimes elements needs one click and the test passes but if I run it again the same element needs double clicks
This is causing my test to fails randomly
I verified this by changing the command to have a double click in protractor and it passed.
This is causing inconsistency as I don't know when the element needs one or double clicks.
Any Suggestion is appreciated?
You may just need to put the element into focus explicitly via mouseMove() and then issue a click() action:
browser.actions().mouseMove(elm).click().perform();
Inconsistency might be because of element is not yet ready to click. So you need to wait until element become clickable and click it. Below code will help you in achieving consistency.
Code Snippet:
var EC = protractor.ExpectedConditions;
var elementToBeClick=element(locator);
var timeOut=10000;
browser.wait(EC.elementToBeClickable(elementToBeClick), timeOut).
thenCatch(function () {
assert.fail(' target element is not clickable');
});
elementToBeClick.click();
you can use browser.executeScripts to inject native javascript code into the browser and click the required button. this will execute the click event on the required element that you pass into the function
try the below code,
var elementToBeClick=element(locator);
browser.executeScript("arguments[0].click()",elementToBeClick.getWebElement())
I am trying to Right click on an element and then select an option "Rename" from the list. I have got "right clicking" working but can't select option from the list. Referred links 1, 2
Note 1:
1: On right click the menu options that are visible are native context menus. So, they don't appear in my DOM that I can see.
2: The App runs only in Chrome browser(not sure if it is a browser issue)
I have tried the following code:
browser.actions().mouseMove(elementVar).perform();
browser.actions().click(protractor.Button.RIGHT).click(protractor.Button.ARROW_DOWN).click(protractor.Button.ARROW_DOWN).click(protractor.Button.ARROW_DOWN).perform();
Consider, "Rename" to be the third option in the list.
Note 2:
If I am just running the app and enter 'R' from my keyboard, it selects the "Rename" option. But when I tried to run it in my test, it doesn't select the "Rename" option. See below code I tried:
browser.actions().mouseMove(elementVar).perform();
browser.actions().click(protractor.Button.ARROW_RIGHT).sendKeys('R',protractor.Key.ENTER).perform();
None of the above code works. Let me know if more information is required.
EDIT:
I am guessing the following to be happening:
once I mouse over, the script "right clicks" and after that the "tooltip" is displayed. Since the "tooltip" is displayed after "right click" I think the menu list goes to the background(the list is still visible along with the tool-tip), which is why the arrow down keys aren't working. Is this possible? If yes, how can I wait for the tooltip to be invisible and then right click?
Input: I tried to wait for tool-tip to be invisible and then right click, but still the "Arrow_down" doesn't work.
Is there a way to bring the menu list in the front once we have right clicked?
IMPORTANT:
I took a screenshot after I right clicked on the element, and the screenshot doesn't show the "menu list". Below is the code for screenshot:
browser.actions().click(protractor.Button.RIGHT).perform()
.then(function() {
browser.takeScreenshot().then(function(screenShot) {
writeScreenShot(screenShot, "image.png");
});
});
//writeScreenShot takes two variables actual screenshot data and the file name. And the screenshot is saved as "image.png"
What needs to be done?
When you send ARROW keys to the browser, you have to send them as keys instead of passing them to click() function and the ARROW_DOWN key is part of Key object and not BUTTON. Here's how -
browser.actions().mouseMove(elementVar).perform();
browser.actions().click(protractor.Button.RIGHT).sendKeys(protractor.Key.ARROW_DOWN).sendKeys(protractor.Key.ARROW_DOWN).sendKeys(protractor.Key.ARROW_DOWN).perform();
For your second try, you should send RIGHT in the place of protractor.Button.ARROW_RIGHT to right click. When you send two actions/keys to sendKeys() function, you have to join them using chord object which combines the action of pressing two keys at a time(ex: CTRL+C for copy). But in your case i don't think its really necessary. Here's how to use it -
browser.actions().mouseMove(elementVar).perform();
browser.actions().click(protractor.Button.RIGHT).sendKeys(protractor.Key.chord("r", protractor.Key.ENTER).perform(); //Not necessary as you wont be pressing R+ENTER in your keyboard
OR
browser.actions().click(protractor.Button.RIGHT).sendKeys('R').sendKeys(protractor.Key.ENTER).perform();
Hope this helps.
use XPath to solve your problem
browser.actions().mouseMove(target).perform();
browser.actions().click(protractor.Button.RIGHT).perform();
element(by.xpath('//*[#id="context-menu"]/ul/li[1]')).click();
In your case it will be "//*[#id="context-menu"]/ul/li[3]" most probably.
I was reading the documentation of the .on event handler of jQuery and I started playing around with it.
I have a simple <select> element with the multiple attribute set to true.
However, I want the user to be able to select multiple items without having to press the ctrl or shift key(s)
According to the .on documentation, if you specify a selector it will automatically add those event handlers to any new items added inside that container that match the selector specified.
So in my case, I could for example decide to replace the <option> elements available in the listbox, but I still want to have the same functionality for those options without having to rebind those events etc.
One might think that the following snippet should do the trick (atleast, I did):
$('#dropdownlist').on('mousedown', 'option', function(e){
e.preventDefault();
$(this).prop('selected', $(this).prop('selected') ? false : true);
return false;
});
So when a users clicks on an option in that listbox, the default action will be cancelled and depending wether the item is already selected or not, it will invert that selection.
I have created a small fiddle demonstrating this behaviour: fiddle
In that fiddle, the first dropdownlist is behaving as expected, but the functionality is lost when replacing the items. This only works in FF & Chrome.
The second dropdownlist is how I thought it should've been (event handling wise), but that doesn't seem to work besides in Chrome -.-
The functionality is kept when replacing items, because the console will still log '2' when clicking on an item after replacing them.
Can someone explain me why this is happening? Am I doing something wrong?
Please point me in the right direction!
Thanks!
~ Dirk
IE doesn't respect the mousedown event on the option tag itself. You've got to use the OnChange event of the select tag, which is not what you (nor I) want. I was trying to do the exact same thing as you and was stopped at every attempt. I finally gave up and made it a list of checkboxes because I can get the same behavior out of mine that you are trying to do here.
You can see this question for some options, but I never did get it to work the way you are describing.
I'm using the Facebook Like/Send buttons along with dynamically generated HTML (loaded via AJAX requests). I've found that even though the Send button works fine when the element exists on page load, dynamically created Send buttons aren't working correctly. Clicking the button activates it and the button greys out, but the popup doesn't appear.
Here is a demonstration of what is happening: http://jsfiddle.net/Daniel15/VxpSj/
Any suggestions?
Thanks!
Yes, I can confirm the problem from your fiddle.
function addLikeButton()
{
// […]
FB.XFBML.parse(newEl);
document.getElementById('container').appendChild(newEl);
}
For some reason, this seems to be “the wrong way around”. Reverse the order of these two lines – put the new element into the DOM first and let FB.XFBML.parse parse it afterwards, then (from my test with your fiddle) it seems to work in the desired way.