Without involving Jquery, how can the javascript of a component click an HTML button? All the documentation is for the opposite interaction of a button being on the page and handling that click, which won't work because it belongs to a ngNoForm element that the browser needs to handle itself.
You can just use a normal javascript click
Here is the doc
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click
Here is an example code
document.getElementById( "exit-cancel" ).querySelector( "a" ).click()
Related
I am working on a project in Angular 6, where I have used (click)="actionNavigateAway()" to direct page to a new Url. This works perfectly fine on the left click. But on the right click, it shows up a context menu having options like Back, Reload, etc (as shown in the 1st photo).
Instead, what I want to show is the default context menu that we usually find on right clicking a link (figure 2). I have searched the web and found ways to make a custom contextmenu, but nothing for the default. Can you please help me with that? Thanks.
Take a look at this
If the a element has an href attribute, then it represents a hyperlink
(a hypertext anchor) labeled by its contents.
If the a element has no href attribute, then the element represents a
placeholder for where a link might otherwise have been placed, if it
had been relevant, consisting of just the element’s contents.
So it's not considered as a hyperlink.
Just add an empty href attribute. Like this,
<a (click)="actionNavigateAway()">Not Working</a>
<br/>
Working
If you need to use JS to route your link, but want the href context menu -you can use both. You can add a blank href or any href, and then pass the event to prevent default on a function. like so
This link has both
Now the page won't try to route you to "/somepath" when you click that href link. You can either add more code to the function, or use a JS SPA router to handle the routing. You now have javascript handling your links, and a normal context menu. Since the context menu has an actual route -it will actually open if and only if you select to open in new tab. not an actual click
The default context menu is normally working on link, it's normal that nobody tried to reproduce it ^^
In your case, the only possible problem is that you're not aiming correctly the link
But you can also create a custom contextmenu like this : Angular 2: Implement a custom context menu
The context menu should work when right clicking a link with a href attribute.
<a>This is a A tag without attributes</a><br>
This A tag has a href attribute<br>
<a onclick="hi()">This A tag has a onclick attribute</a><br>
So that means that you should use the href attribute instead of a click handler.
Try and run the snippet and right click on the different 'links' to see what I mean.
Using Google Apps ScriptI created a panel with a submitbutton and an anchor .
If the user clicks on the button I want to activate the anchor and perform its actions as if it has been clicked itself.
So I thought generating a mouseclick on the anchor by CreateEvent would be sufficient.
But I can't find a way to generate that clickevent.
How can I do that(or achieve my goal differently) ?
You'll want to just assign the same client / server handlers that the anchor has to the submit button. Try a regular button instead of submit if a form isn't involved. Can't create a mouse click event through code either.
How I can detect element I click in UIWebView. I have simple html, but I want differ elements, so I want get for example "alt" from the element I click.
In points:
User click one of images loaded in WebView.
It calls function that has info which about clicked element.
Is it possible?
You should add some bindings between your webview and your Objective-C. You can do this using javascript.
You pretty much inject javascript into the webview so you will get a event when some HTML element is touched. Then your javascript will communicate to Objective C, to trigger some action.
This is technique is described pretty well here: http://blog.techno-barje.fr/post/2010/10/06/UIWebView-secrets-part3-How-to-properly-call-ObjectiveC-from-Javascript/
I use web developer tools to inspect html and subsequently see the css that is attached to the html element. This is proving to be a great process for learning from other websites (and the debugging my own)
Is there a way to inspect the javascript as well? So when I select the element, to be able to see the javascript related to the element?
In the element panel you can find all information related to an element including events attached to it.
You can use console in the element panel to inspect an element using dir(elementId)which dumps the object with the given id, as a JavaScript object with its properties.
You can see javascript code that is attached as event to any element on the page. In Developer tools its in the Elements tab and each element has "Event Listeners" - there you see what events and what javascript will be catched and executed.
I had the same problem and have been wandering a bit until I found how to do it on Chrome:
1. Open the Inspector Ctrl + Shift + i
2. Select the element that you would like to inspect
3. Click on the Event Listeners tab
4. Click on the link next to the event listener you would like to check
5. Click on Pretty Print (Symbolized as {} at the bottom of the window)
I have a group of links on a page. when the user clicks a link it triggers an asynchronous request and a content area on the page is updated with the response html.
This works fine, except for if the user clicks the link with the 'middle-button' (or mouse wheel, whatever it's called!). Then a new tab opens and the response gets returned and rendered to that tab.
Is there any way for me to prevent this from happening?
catch the link with javascript and override the default link behaviour.
like this:
$('a.ajax').click(function(e){
e.preventDefault();
// do ajax stuff, and add an onfinish function that does
// something like document.location.href = this.attr('href');
});
You don't have to do the document.location.href, as I just noticed that a content area is updated. Just catch the default behaviour with the e.preventDefault();
// edit
The preventDefault won't stop the middle mouse button... Have you considered not using tags? I know it should be accessible so maybe a span containing the link, so you can add the onclick event on the span and hide the link with css?
Unfortunately no, Javascript wont have access to that sort of control for security reasons as it would be wide open for abuse.