I'm having issues accessing the search bar with a dropdown menu. It looks like the element that I need to get is named "data-value" so that I can enter a sample id in the search bar but cannot access it.
I've been able to access a search bar in a different website before by using the .getElementbyID or .getElementbyClassName and using the .Value="123" to enter a sample id but cannot make it work with this website. Unfortunately, this is a company website and cannot be accessed publicly.
This is the code that I see when I click on inspect element on the search bar.
<div class="select-input items"> 'event symobol here
<div class="item" data-value="123456_S11">123456_S11</div>
<input type="text" autocomplete="off" tabindex="" style="width: 4px;opacity: 0; position: absolute; left: -10000px;"> 'event symbol here
::after
</div>```
I also tried this that I saw from a different post but it doesn't work.
```For Each pElement In pHTML.getElementsByClassName("item").getElementsByTagName("div").getElementsByAttribute("data-level")```
You can use a css attribute selector but you will need to ensure you are targeting the right element
ie.document.querySelector(".item[data-value]").getAttribute("data-value")
This assumes the first match for an element with class item and attribute data-value is the correct one. Otherwise, you need a different strategy such as gathering a nodeList of all matches and indexing in e.g.
ie.document.querySelectorAll(".item[data-value]").item(1).getAttribute("data-value")
Or adding in parent class
ie.document.querySelector(".select-input [data-value]").getAttribute("data-value")
Related
I am trying to make the mid-section to be read only and just enabling the button "OPEN".
I have the below original code. "router-outlet" renders the combination of several feature components. And I do not want to disable each and every elements or feature components
<div="row mid-section">
<router-outlet></router-outlet>
</div>
<div class="row">
<button class="btn btn-default"> OPEN </button>
</div>
I tried by adding as below:
<div="row mid-section" readonly="readonly">
But it still allows to edit and click on button inside mid-section div.
I would really appreciate your help. Thank you!
The HTML readonly property doesn't work like that. Its only for form fields and must be on that actual DOM element.
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly
Without seeing more of your code, I can't really give a better answer than these 2 options.
Option 1, a shared service that has that read only property. You could have a service, that has a behavior subject that you can update from the parent component. The inner components would all need to have that service injected, and do something appropriate when the value changes.
Option 2, you would need a container component that has a new boolean input, and it would need to pass that value down to all the children components (which would also need an input).
I'm using Vimium on Firefox and Chrome and it helps me a lot https://github.com/philc/vimium
I noticed that some divs can be clicked and I found that class='demo-button' is one of them
<div class='demo-button'>demo-button</div>
<div class='demobutton'>demobutton</div>
<div class='demobuttonnn'>demobuttonn</div>
<div class='demobutto'>demobutto</div>
Here is a screenshot of Vimium links https://jsfiddle.net/qnvujfs6/
As you can see, only the last div demobutto can not be clicked using Vimium. I tried to search Vimium source for demo-button or demobutton but no results.
Does anyone have an idea why there is a difference between this demo button div-s ?
I want to be able to click on some generated elements using bootstrap plugins, for example Bootstrap Toggle. Here is code for two toggles, but only second one can be clicked because it contains demo-button class
https://codepen.io/duleorlovic/pen/VqWaEg
The first three are clickable because the class attribute contains the word "button" (See source).
For usability purposes it preferred to simply use the elements that are meant to do that job. For instance anchors (<a>) and buttons (<button>).
But if that is not possible (which seems to be the case here) you can also add the role attribute to the element. Elements with the attribute role with one of the following values will also be considered clickable:
button
tab
link
checkbox
menuitem
menuitemcheckbox
menuitemradio
(Source)
So if your div elements represent check boxes, your code would look like this:
<div class="demo-button" role="checkbox">demo-button</div>
<div class="demobutton" role="checkbox">demobutton</div>
<div class="demobuttonnn" role="checkbox">demobuttonn</div>
<div class="demobutto" role="checkbox">demobutto</div>
In this case you are not depending on specific class names, which are by the extension considered "as unreliable".
Here is my current code:
<select [(ngModel)]="items">
<option *ngFor="let item of items" [ngValue]="item " {{item .symbol}} : {{item.companyName}}</option>
</select>
The problem is this is a dropdown that is not fully expanded by default. My goal is to have this list act similar to how Google has their search; A fully expanded list that updates based on the input.
I have the binding correct, but I can't seem to get the HTML correct to where it's always expanded and there is no empty entry for the first element.
Are the Select/Option tags the incorrect tags to use?
I can't find any other tags to use. Anything in Angular?
I don't know if natively you can have this feature inside a browser. But you can write one component to do this job. Basically, it'll have two parts, one input, and one panel with some help via Bootstrap.
<input type="text" class="form-control input-xs">
<ul class="dropdown-menu"></ul>
When you type in anything in the input, you can make the list of items displayed. After you select one item, the list can disappear. In terms of style, it'll be very similar to http://getbootstrap.com/docs/3.3/javascript/#dropdowns
Then you can wrap up everything inside an angular component. I know it's a long answer.
I am trying to click a button within a table on a webpage within IE, the source of the button shows:
<input type="image" src="img/testimg.png" onclick="picture_return(this,'92b84574a336a090618f151b6fc821cf:5','http://testwebpage.com/in/834');" value="Test Web Button">
This is a part of a large table with multiple <td> within the source, this is within another table which is then within the following class:
<div class="section_client_dnBox">
I tried to go through a few of the items within the class by using the following VBA code:
IE.Document.getElementsByClassName("section_client_dnBox")(0).Click
However, had no luck as (0) didn't press anything and anything larger ie, (1) gave me an error. So my question now is basically, is there any way of clicking the button using something simple such as reffering to it's value within the table (value="Test Web Button")?
From my experience, you need to look at the tag name rather than the class name. This is an example of the code I generally use when finding buttons.
For Each MyHTML_Element In document.getElementsByTagName("input")
If MyHTML_Element.Type = "submit" Then
MyHTML_Element.Click: Exit For
End If
Next
You might be able to change the . type to = "image". I too am just learning how to use IE automation in VBA so I am not a champ at it either. I hope that helps.
CSS selector:
It is far simpler to use a CSS selector of input[value='Test Web Button']. No loop required.
It says get element with input tag having attribute value having value = 'Test Web Button'. "[]" means attribute.
.querySelector method of document is how you apply the selector.
CSS query:
VBA:
ie.document.querySelector("input[value='Test Web Button']").Click
In my AngularJS project I have an account details page where you can change your personal account information. This page allows for multiple phone numbers and e-mailaddresses to be supplied. Using mouse input (or tabbing to buttons and pressing them with space bar) works perfectly, however I'd like to add the convenience of the enter key pressing the 'logical' buttons.
My form looks like (accidentally forgot to translate a few items):
A simplified version of the HTML for the form can be found on PasteBin, I've mainly removed the directives for managing the lists.
All buttons are <button> elements except for the cancel button which an <a> to the previous page, and the submit button is <button type="submit">.
When selecting any text box and pressing enter, the first (non-disabled) <button> element is 'clicked'. Meaning if I would change the last name, hit enter, the first phone number would be removed.
When you're in a new entry of phone numbers or e-mailaddresses (the row with the green + button) it should click that button, and if it's disabled do nothing.
When you're in any other text box on the form it should hit the save button, and also if the save button's disabled, do nothing.
Both buttons will be disabled based on form validation.
There'd be no trouble in changing the type of a button from button to submit if that'd help.
I would preferably have an all HTML solution, using just semantics, but I doubt that's really possible. So the logical alternative would be to use an AngularJS directive.
Please do not provide a jQuery or plain JavaScript solution relying on IDs or something like that. I don't want to hack my way around AngularJS, rather embrace it.
In the meantime I've worked on a directive that allows me to declare what I've called 'submit scopes'.
In essence you have actions (inputs) and targets (buttons), they're bound through a service by a key you can assign in the template. To avoid keys from clashing and from simple annoying work you can create a submit-scope which will cause it's children to prepend a unique key to the value they're accessing.
Within a submit-scope you can still override an action to use a global key instead by setting the attribute global-submit="true".
Example code:
<div submit-scope>
<input type="text" submit-action />
<button type="button" submit-target>Pressing enter in the above field will click this button.</button>
</div>
You can view the entire source code and a slightly larger example on Plnkr.
I just tried to replace
<button>Cancel</button>
with
<input type="button" value="Cancel">
and it seems to work correctly...