I have a use case, where I need to open a new tab on users choice in select.
<select ng-model="selected" ng-click="switchAction(data.id, selected)">
<option disabled hidden selected value=""></option>
<option value="run">1</option>
<option value="edit">2</option>
<option value="deleteEnvironment">3</option>
<option value="addSoftware">4</option>
<option value="openLandingPage">5</option>
</select>
Javascript:
function switchAction(id, selected) {
vm[selected](id);
}
vm.openLandingPage = function (id) {
window.open(vm.landingPage + "?id=" + id);
};
This code works perfectly in Chrome and Firefox, but doesn't in Safari. It could be partially solved, if I replace ng-click to ng-change. But then browser blocks a pop-up. Since, I render this code inside a grid cell, bootstrap's dropdown doesn't work either. I tried to put ng-click directly in option element, but it works only in firefox.
Is there any way to fix it?
Following plunker proofs that safari doesn't send a mouse-click event.
https://plnkr.co/edit/g3W2JLKxZFkzp1dGgrg4?p=preview
Found a solution. With angular-ui/bootstap and dropdown-append-to-body option I was able to break throw the ag-grid border. Issue is finally fixed!
Related
I'm working with Angular 1.6.6 and I have found a bug related to the select component.
I have the following component:
<select ng-model="searchCriterion" ng-change="change()">
<option value="title">Title</option>
<option value="description">Description</option>
<option value="price">Price</option>
<option value="email">Email</option>
</select>
And the change method is showing on the console the value selected. The first time that I select an option it works well, but the second one it return the value selected + 1:
For instance, if I select description, searchCriterion will be price.
The change method is as simple as follows:
$scope.change = function () {
console.log($scope.searchCriterion)
}
If I use the value in other method, for instance a method that is triggered from a ng-click in a button, it happens the same
I have found on the internet some related info, but I don't get with how to fix the error
The code you have provided works properly.
See this plunker to convince yourself: https://embed.plnkr.co/IVg6KXVTPrBP3UhDxkbk/
Your problem shouldn't exist.
I got this selectbox in a searchform:
<select name="searchFor" id="searchFor">
<option name="option0" value="Choice">Pick one</option>
<option name="option1" value="person">Person</option>
<option name="option2" value="title">Title</option>
</select>
Because the top option shouldn't be selectable, I remove it using JQuery:
$("#searchFor").focus(function() {
$(this).find("option").eq(0).remove();
});
Works like a charm except offcourse for Internet Explorer.
In All browsers the option0 is removed when the select-tag is selected.
In IE the option only gets removed after one of the options gets selected. which makes you always choose the wrong one.
The action is repeated as well untill all of the options are gone.
Anyone got an idea on how to get this working in IE?
So the top-option should be removed from a select-tag when the select gets activated.
cheers
unbind the focus event like this
$("#searchFor").on('change',function() {
$(this).find("option").eq(0).remove();
$(this).off('change');
});
Fiddle Demo
Try the following, use "focusin" event and one() function to make the event handler run only once.
$("#searchFor").one("focusin", function() {
$(this).find("option").eq(0).remove();
});
I know that you can use the onchange event on the select to trigger a JavaScript function, but what if they choose the option that is currently selected?
The reason for this is I want to have a drop down list of a bunch of websites. This is used as a sort of jumppage, if you will. When the user selects a site the selected site opens in a new window. Now if they close the new tab/window the select is on the last option they selected. If the user wants to go to the same website again the onchange event does not fire.
I know that you can change the select option back to the default option with a null value like this:
html
<select onChange="jsFunction(this.value)" id="selectOpt">
<option value="">1</option>
<option value="websiteURL2">2</option>
<option value="websiteURL3">3</option>
</select>
javascript
function jsFunction(opt){
window.location = opt;
document.getElementById("selectOpt").options[0].selected = true;
}
http://jsfiddle.net/XqLmY/1/
But I was wondering if it could be done without that.
Can I trigger an event using a HTML select without changing its value?
What about using onClick instead
Look here http://jsfiddle.net/9X4Ks/1/
<select onclick="clickFunction(this)" id="selectOpt">
<option value="websiteURL1">1</option>
<option value="websiteURL2">2</option>
<option value="websiteURL3">3</option>
</select>
function clickFunction(o){
alert(o.value)
}
It fires even when user clicks the selected option second time.
Unfortunately it works only in chrome and opera.
Does not work in firefox
Not really an answer, but I just ended up using this method because it was easy and didn't have other dependencies.
function jsFunction(opt){
window.location = opt;
document.getElementById("selectOpt").options[0].selected = true;
}
When I click an item in a drop down it doesn't activate the javascript on a given page.
Here is the element I am interacting with
<select id="DocumentComment_document_id" name="DocumentComment[document_id]">
<option value=""></option>
<option value="1">Document 1</option>
<option value="2">Document 2</option>
</select>
Here is the Javascript that actually does the work
jQuery(function($) {
$("#DocumentComment_document_id").live("change", function(){
$.post(
"/wg/wg2/documentComment/ajaxLoadDelineators",
{"docID": $(this).val(),"ajax":true},
function(data){
$("#delineator_options").html(data);
}
);
return false;
});
Your question isn't very clear but you can define a "mouse action" with the Action class that will physically move the point pointer and click. I would bet that would work where it wasn't working using the JavascriptExecutor.
Really, I don't see how you could go wrong here because you seem to see the entire option element contents which means that WebDriver should have no problem getting one of the 2 option elements and clicking it the standard way.
A browser independent way to select an option from a traditional dropdown is just to click the option, without clicking the select first. It goes against the norm for Selenium, but it works
C# code (to select Document 1):
IWebElement theOption = _webDriver.FindElement(By.XPath("//select[#id='DocumentComment_document_id']/option[#value='1']"));
theOption.Click();
I have an onChange event on a select.
When I do an alert(this.value), it's working on Firefox, but not on Internet Explorer. Why not?
This is the code:
<select onchange="new Ajax.Updater('fiches', '/~project/index.php/folder/fiche', {asynchronous:true, evalScripts:true, parameters:'fiche=' + this.value});" class="input" id="fiche" name="fiche">
<option value="0">Choisir ma fiche</option>
<option value="1">Vous etes salariés</option>
<option value="2">Sans emploi</option>
</select>
I have had similar problems in the past with IE and selects. The value property of select items is a pain in IE. Usually the solution is to care about the selected option (not the select element) and access to its text attribute.
I'll do this in jQuery to access the text selected:
$("#my_select_item option:selected").text()
So, in raw JavaScript it should be something like:
document.getElementById("myselect").options[document.getElementById("myselect").selectedIndex)].text
or
document.getElementById("myselect").options[document.getElementById("myselect").selectedIndex)].value
That is the general idea to make selects + JS happen in IE.
Try this.options[this.selectedIndex].value.
It looks like you're using Prototype. Try calling $F(this) rather than this.value.