I have the following button in one of my web pages.
For some reason, Voiceover/Chrome will read "Add the new customer, button list 2 items".
I have no idea why it is being read like this.
On JAWS/IE11, it reads correctly as "Add the new customer, button".
Any ideas?
<button aria-label="Add the new customer" class="btn btn-primary" ng-click="addNewCustomer()">Add</button>
Related
I'm a newbie to NgbDropdown and related ng-bootstrap code, and I'm having trouble figuring out how to close all previous NgbDropdowns when a new one is opened using the enter key.
I've created a number of NgbDropdowns on a page in my Angular project, and I find that when I click from dropdown button to dropdown button, the previously opened dropdown closes; however, if I TAB from an open dropdown to another dropdown button and use the enter key to open the second dropdown, as may be needed for accessibility, the first dropdown does NOT close. I am left with two drop-downs overlaying each other.
This sequence can be duplicated on the main NgbDropdown example page at https://ng-bootstrap.github.io/#/components/dropdown/examples: on a different button (First example at the top.)
Sequence:
1. Tab to "Toggle Dropdown"
2. Hit the enter key to open the dropdown
3. Tab through the dropdown options, pluse one more time, so that you've
tabbed to the "toggle drop-up" button.
4. Hit the enter key
5. Both dropdowns will be open simultaneously.
Screen Shot
So apparently the code that closes previous dropdowns on click doesn't work when the enter key is pressed on a different button. Not finding much documentation about what can be done with the various Ngb objects in typescript, I am left not knowing how to close all previous dropdowns when a new dropdown is opened with the enter key. All I can think of doing is:
1) Loop over all dropdowns in the ts file, closing them prior to opening the latest. If this is the best solution, I do not see any way to loop over a collection of open drop-downs. Is there such an object/array available to me as part of the NgbSolution, or would I have to add each to an array on my own?
2) Trigger the click event when the enter key is pressed on a button. Again, I am unaware of how to have one event trigger another on an NgbDropdown object.
Any pointers would be appreciated. I've not posted my code here because it is the same as the basic example referenced above.
For your suggestion #1 (loop over all dropdowns and close them), you can implement it as follows:
In your HTML, declare each dropdown as a DOM variable using Template Reference Variables (the # syntax):
<div ngbDropdown class="d-inline-block" #dd1="ngbDropdown">
...
</div>
Add a click handler to the button as follows. This allows you to pass in a reference to the dropdown to the function called by the click handler:
<button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle (click)="closeOthers(dd1)">Toggle dropdown</button>
The complete HTML for a dropdown should look like this:
<div ngbDropdown class="d-inline-block" #dd1="ngbDropdown">
<button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle (click)="closeOthers(dd1)">
Toggle dropdown
</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
<button ngbDropdownItem>Action - 1</button>
<button ngbDropdownItem>Another Action</button>
<button ngbDropdownItem>Something else is here</button>
</div>
</div>
Add the following as a class variable of your Typescript component. This allows you to reference all the dropdowns displayed in the component from the Typescript file:
#ViewChildren(NgbDropdown) dropdowns: QueryList<NgbDropdown>;
Add a click function to your Typescript component:
closeOthers(clickedDropdown: NgbDropdown) {
// Close all dropdowns
this.dropdowns.toArray().forEach(el => {
el.close();
});
// Open the dropdown that was clicked on
clickedDropdown.open();
}
Now whenever you click on a dropdown (or select it by tabbing and pressing return) it will call the closeOthers function which will:
Close all dropdowns
Open the dropdown that was clicked
Please see this StackBlitz for a working demo.
#Dordrecht - the approach I would take for the functionality mentioned in your comment below would be to create a service as follows:
export class ModalNotificationService {
private _closeModals: Subject<void> = new Subject<void>();
private _closeModals$: Observable<void> = this._closeModals.asObservable();
public emitCloseModalEvent() {
this._closeModals.next();
}
get closeModals$(): Observable<void> {
return this._closeModals$;
}
}
This service would be injected into any component that has modals and those components would subscribe to the observable closeModals$ and then close the modals in their own component. Modify the closeOthers method to call the new service's emitCloseModalEvent method to notify all the other components.
We're creating a HTA file so withe the information the user has input, we can automate the process of logging a ticket. The user will input the information in the HTA form and click Submit. This will then open a link in IE, input the data from the HTA to the relevant fields and then automatically click the Submit button at the end of the page.
The majority of it works so far but I'm unable to automate the Submit action. I've checked various forums but haven't been able to get this working with any suggestions so far. I'm just looking for a way to automate clicking the submit button in the IE window.
There are 3 buttons on the IE page and I'm not sure how to specify I want to click submit.
New to VBScript so any help is much appreciated.
<input value="Reset" onclick="return myReset();" class="secondary" type="button">
<input value="Add to a Bundle" onclick="return myAddRequisition();" class="secondary" name="submitorderform" type="submit">
<input value="Submit " onclick="return myOrderNow();" class="primary" name="submitorderform" type="submit">
I think the code that you posted is kind of weird, since it has two buttons with the same name.
I assume that the webpage in IE to which the information is to be sent contains only one form.
I also assume that an instance of IE automation object is stored in IE variable.
After you filled out the form via your HTA programmatically, if you want to simulate a click on the button "Add to bundle" , use the code below:
var frm = IE.document.forms[0];
for (var i = 0;i < frm.elements.length;i++)
if (frm.elements[i].type == "submit" && frm.elements[i].value == "Add to a Bundle")
frm.elements[i].click();
Or, if you want to click on the button "Submit ", you can use the code above, but be sure to replace "Add to a Bundle" with "Submit ".
Edit: In VBScript, you can use the code below:
Dim frm, i
Set frm = IE.document.forms.item(0)
For i = 0 to frm.elements.length - 1
If frm.elements.item(i).value = "Add to a Bundle" And frm.elements.item(i).type = "submit" Then
frm.elements.item(i).click
End If
Next
Edit 2: According to your comments, i guess you don't wait for your webpage until it is completely loaded. Thus, you get an Unspecified Error. To solve this problem, you should set an interval to repeatedly check if IE.ReadyState equals 4. To do so, use the code below after calling Navigate method of IE:
Dim interval
interval = window.setInterval(GetRef("fillOutForm"), 1000)
Sub fillOutForm()
If IE.ReadyState = 4 Then
window.clearInterval interval
'Here place code that fills out the form in the webpage and submits it.
End If
End Sub
As you can see, you should call setInterval method and set the first parameter to a function pointer. Use the GetRef function to obtain a function pointer. In the code that I sent, I passed a pointer to the subroutine fillOutForm. So this subroutine will be called every 1 second. In this subroutine, you check if IE.ReadyState equals 4 then you fill out the form and submit it.
I'm trying to add event tracking to my two buttons, but my button code looks like the following. I'm popping the user down to the section they clicked and hiding the other button's section:
<button class="btn btn-primary btn-lg" onclick="$('#order-form').show();$('#digital-download').hide();location.href='#Print'">
Order Print
Version
</button>
Anyone know how would I add the GA tracking code?
// Form Tracking for Google Analytics
$('.form-track').click(function(e){_gaq.push(['_trackEvent', 'Form', 'Completions', 'Form_'+$(this).attr('title')+'_'+location.href]); });
You can try something similar to this, adding the following code to your buttons:
$('.btn.btn-primary.btn-lg').click(function(e){
ga('send','event','your_category', 'your_action',$(this).text().trim());
})
When the button is clicked, it will send the event with your specified category, action, and the button text as the label. Note that you are using UA, so the event tracking syntax in your example is incorrect.
I have a create view where the user and fill some data and if they click on a button a dijit.dialog opens with a list of items to select. Everything works fine, except that when the dialog confirms the selected items it goes to the controller to do some logic and refreshes the create view deleting the data that the user filled previously.
How can I make the dialog persist what the user already filled (maybe going to the controller to set the data before opening it)? Or maybe try to close the dialog, refresh the list that I show on the dialog and part of the create view that uses what the user selected.
Not sure if I make myself clear enough.
Edit
My project is based on Spring Roo:
<form:create .....>
.. inputs and tables ..
<input type="button" ../> //goes to controller and loads page with dialog open
<tiles:insertTemplate template="/WEB-INF/views/dialog.jspx" />
</form>
Dialog code:
<div id="dialog" dojoType="dijit.Dialog">
<form id="items" dojoType="dijit.form.Form">
<jsp:doBody/>
<input id="save" type="submit" name="sendDialogData">
</form>
</div>
I thought that would make the dialog part of the form but just checked with firebug and it is created after the "wrapper" (the div that contains everything)
I am using the example in the jqGrid Demos page located in Row Editing > Inline Navigator, but I need to have my add button out of the navigator like in example Live Data Manipulation > Add Row. I have already placed the add button:
<table id="editgrid" ></table> <div id="pagered" ></div> <input type="BUTTON" id="bedata" value="Edit Selected" />
and the event
$("#bedata").click(function(){ jQuery("#editgrid").jqGrid('editGridRow',"new",{height:280,reloadAfterSubmit:false}); });
My question is, what is the name of the event or the configuration of the jqgrid that I have to use, in order to insert the new row directly in the grid like in the inline navigator example whitout the modal form dialog when I click the betadata button?
I have already set the modal property to false, but it doesn't work,
Any help would be really appreciated
ANSWER:
The name of the event is addRow, I found it in the inline-editing document.