I have multiple mat-slider elements in my template and i want to change the value of a specific slider. I know how to do it with MatRadioButton and other Material design components but it looks like mat-slider doesn't offer the option to get the id of a specific mat-slider and change his value !!
With MatRadioButton i can do this
#ViewChildren(MatRadioButton) rbuttons;
this.rbuttons.filter(x => x.id == "cars" + id)[0].checked = true;// Works
But how to change the value of a mat-slider element since i cannot filter by id with mat-slider ? What i want to do is something like this :
#ViewChildren(MatSlider) sliders;
this.sliders.filter(x => x.id == "cars" + id)[0].value= 2; // Not working since i cannot filter by Id like i do with MatRadioButton
Template :
<mat-slider min="0" max="2" step="1" value="2" (change)="changeCar(id)" id="car{{id}}"></mat-slider>
<mat-slider min="0" max="2" step="1" value="0" (change)="changeCar(id)" id="car{{id}}"></mat-slider>
So let say if i change the first slider having the id = car34 and value 2, i want to update the second slider with id = car35 and put value = 2 instead of 0.
Thanks
Related
Web page has the following HTML without an ID - how do I set the value of the form?
<input name="loanxFindBorrower" onkeypress="if((window.event&&window.event.keyCode==13) ||
(event.which&&event.which==13 )){ findByBorrowerAction()}" type="text" size="25" value="">
I've tried
IE.Document.getElementByTagName("loanxFindBorrower").Value = "New Value"
Aswell as
IE.Document.getElementByTagName("loanxFindBorrower").Focus
IE.Document.getElementByTagName("loanxFindBorrower").Value = "NewValue"
Any help would be much appreciated
You should use getElementsByName() to get the element. It returns a collection, you'll need to specify the index to get the element you want.
For example, if it's the first element with name "loanxFindBorrower" in the page, the index is 0:
IE.Document.getElementsByName("loanxFindBorrower")(0).Value = "New Value"
Trying to input a Value into an Input Box and press the Search button to get the results from a table.
I can't seem to figure out how to input the Value into the Box. The input box and button seems to be inside a form inside a table. No ID element.
**> Input Box has these properties**
<td Class = "searchRow">
<input type = "text" name = "name" value onblur = "Numberfield();" style = "width: 200px;" class = "required">
This is all inside Form ID "SearchForm" > div ID "Search" > Tr > Td CLass "searchRow"
After I grab the correct internet explorer tab, I need to getElementByClassName and inp9ut value
IE.Document.getElementsByTagName("tr").getElementsByTagName("input").Value = "Search"
IE.Document.getElementsByClassName("searchRow").getElementsByTagName("input").Value = "Search"
I can't seem to get any combination to work.
Another element is the Button.
Button has these properties
<td colspan = "6" style = "align:right;" class = "searchonly">
<input type = "button" class = "actionbutton" value = "search" onclick = "submitform()">
How do i Click this button that is in the Table Row.
IE.Document.getElementsByClassName("searchonly").getElementsByTagName("actionbutton").Click
Does this make sense?
Appreciate the help.
Better to add ID attribute and then use getElementsByID.
And If that is not possible then you can use XPATH and get the element by using following function.
function getElementByXpath(path) {
return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}
console.log( getElementByXpath("VALUE OF XPATH") );
And you can easily get the XPATH by using the extension in any browser. Like XPath Finder available in google chrome.
I write the Answer as comments and code:
'What you want first
'**> Input Box has these properties**
'<td Class = "searchRow">
' <input type = "text" name = "name" value onblur = "Numberfield();" style = "width: 200px;" class = "required">
'This is all inside Form ID "SearchForm" > div ID "Search" > Tr > Td CLass "searchRow"
'What you try
'IE.Document.getElementsByTagName("tr").getElementsByTagName("input").Value = "Search"
'IE.Document.getElementsByClassName("searchRow").getElementsByTagName("input").Value = "Search"
'What should work
'Attention: the get methods work case sensitive. It's a difference between "Search" and "search"
'I write that because I wonder if the first letter of the ID "Search" is upper case in the original document
'
'You can seperate the div tag include all inner tags as own DOM object
Dim nodeDivSearch As Object
Set nodeDivSearch = IE.Document.getElementByID("Search")
'
'Now you can work on the new DOM object only
'Note that the getElements methods always create a NodeCollection
'All elements of the collection have an index. The first element always has
'index 0, so you can access the first input tag in the new DOM object as follows
'(getElementByID does not create a NodeCollection, because an ID should always
'be unique. So there is only one element for this criterion anyway)
nodeDivSearch.getElementsByTagName("input")(0).Value = "Search"
'
'I think your code will work with setting indexes
IE.Document.getElementsByClassName("searchRow")(0).getElementsByTagName("input")(0).Value = "Search"
'What you want second
'Button has these properties
'<td colspan = "6" style = "align:right;" class = "searchonly">
' <input type = "button" class = "actionbutton" value = "search" onclick = "submitform()">
'What you try:
'IE.Document.getElementsByClassName("searchonly").getElementsByTagName("actionbutton").Click
'I think you know what to do here
IE.Document.getElementsByClassName("searchonly")(0).getElementsByTagName("actionbutton")(0).Click
getElementsByClassName returns an array-like object of all child elements which have all of the given class names. So you need to choose which element you need using index in the returned array. So does it with getElementsByTagName.
So if the html code is like below:
<form id="SearchForm">
<div id="Search">
<table>
<tr>
<td Class="searchRow">
<input type="text" name="name" value onblur="Numberfield();" style="width: 200px;" class="required" id="a1">
</td>
<td colspan="6" style="align:right;" class="searchonly">
<input type="button" class="actionbutton" value="search" onclick="submitform()">
</td>
</tr>
</table>
</div>
</form>
Then the vba code to set value and click button should be like below:
IE.Document.getElementsByClassName("searchRow")(0).getElementsByTagName("input")(0).Value = "Search"
IE.Document.getElementsByClassName("searchonly")(0).getElementsByClassName("actionbutton")(0).Click
The code above is just for example, you should change the index according to the actual situation of the website you visit.
I am trying to select the value from a dropdown box using vba, the code block for the dropdown box is as follows
<input type="text" id="form_autocomplete_input-1542902425322" list="form_autocomplete_suggestions-1542902425322" placeholder="Search keyword or select filter" role="combobox" aria-expanded="false" autocomplete="off" autocorrect="off" autocapitalize="off" aria-autocomplete="list" aria-owns="form_autocomplete_suggestions-1542902425322 form_autocomplete_selection-1542902425322">
If the value of form_autocomplete_suggestions-1542902425322 was static I would use .Document.getElementById("form_autocomplete_suggestions-1542902425322").Value = "Role: Student" however this seems to be a randomly generated numerical value.
I have had a look and it seems I cannot simply add a wildcard in such as .Document.getElementById("form_autocomplete_suggestions-*").Value = "Role: Student"
And as its randomly generated and such a long number it cannot loop through an array of values. so I am unsure on how to solve this issue.
You can use css attribute equals value selector syntax with the ^ operator to say starts with a certain substring. You could also use * instead, which means contains.
[id^='form_autocomplete_input-']
VBA:
ie.document.querySelector("[id^='form_autocomplete_input-']")
You might also use:
[placeholder='Search keyword or select filter']
Which would be:
ie.document.querySelector("[placeholder='Search keyword or select filter']")
As you indicate this needs to be selected you may need:
ie.document.querySelector("[id^='form_autocomplete_input-']").Selected = True
Reference:
CSS attribute selectors
I was wondering how do I add two numbers, in this case Car.number.Audi and Car.number.VW using <h:outputText> to display the result:
#{Car.number.Audi} = 3
#{Car.number.VW} = 2
<div>
<h:outputText styleClass="Car-Column"
value="#{Car.number.Audi} + #{Car.number.VW}"/>
</div>
The way you do it, what will be rendered will be 3+2 as a plain String.
In order to apply the addition, you have to do:
value="#{Car.number.Audi + Car.number.VW}"
I have a field called ID-Text that varies in length from 1 to 3000 words stored in a database. I want to display that in a form. Based on its size I want to vary the size of the <h:inputTextarea>. How can I do it.. will I be able to set row property from bean?
The <h:inputTextarea> supports both cols and rows attributes, as you can see from the VLD. Example:
<h:inputTextarea value="#{bean.idText}" rows="#{bean.rowNrs}" cols="40" />
Yeah you can.., Have a look this example...
Bean Class:
private int rowValue;
//getters & setters for rowValue
//if you want column size as "50" then make rowValue is divided by 50.
this.rowValue = para.length()/50; //para is a string which would have database value
Now you have row value in back bean... just use this value as..
<h:inputTextarea id="para" value="#{beanName.idText}" rows="#{beanName.rowValue}" cols="50" />
Secondary Option..
By JavaScript:
You can try by using JavaScript like..
<script language="javascript">
function SetNewSize(textArea) {
if (textArea.value.length > 5) {
textArea.cols = 50;
textArea.rows = 50;
} else {
textArea.cols = 30;
textArea.rows = 20;
}
}
</script>
<textarea name="x" onKeyUp="SetNewSize(this);" cols="15" rows="10"></textarea>
Try similar way to implement this in your inputTextArea...