I have a button here.
<button type="button">#item.StepsToList steps to list</button>
I want the button to go to the page similar to my action below.
/ManageSpaces/id/Overview
I'm trying to do this by putting this action link inside the button.
#Html.ActionLink("Manage Yoga Space and Calendar", "Overview", new {controller = "ManageSpaces", action = "Overview", id = item.YogaSpaceId })
How to make the action link above work inside the button tag?
Buttons aren't for navigation. That's what hyperlinks are for. Putting a non-anchor <a> inside of a <button> isn't valid, either. If your focus is on the look of a button, your choices are to
use a button. Capture the click event and navigate the page using window.location, or
use a hyperlink. Add a CSS framework such as Bootstrap or Foundation, and apply one of their button styles.
Assuming you're familiar with jQuery at all, something like this works for the former point:
<button class="link-button" data-url="/some/url">I navigate somewhere</button>
<script>
$('.link-button').on('click', function(e) {
window.location = $(this).data('url');
});
</script>
For the latter point, Bootstrap and Foundation both have dedicated styles for making just about anything look like a "button":
Bootstrap
I navigate somewhere
Foundation
I navigate somewhere
It's unclear what you're trying to achieve. Do you want to simply navigate to a new page? If so you should use an Html.ActionLink by itself instead of a <button> - that's what they're for. You can style the resulting <a> element to look like a button. If you want to post a form to a new action method, you should specify that in your call to Html.BeginForm, then the button will automatically submit to that action when clicked.
#Html.ActionLink("Manage Yoga Space and Calendar", "Overview", new { controller = "ManageSpaces", action = "Overview", id = item.YogaSpaceId }, new { #class = "btn btn-default " })
Related
Hey I have a div which is wrapped by a Link component, and inside that div I have more buttons, but the problem is, when I click on the inner smaller buttons, I actually click on the Link component as well, so I get redirected which is not what I want... How do I fix this?
it seems as though both the link and the button get clicked but if i am intending to click the button only i want to avoid the parent link.
What I mean is, the Link is used to navigate to some URL when you click on it. Putting elements inside that for other tasks. like a blog post, you click on the parent it will redirect you, but on the child the button will allow you to delete it
was coding this in nodejs react so i was using onClick events
example
<Link to="/blog-post">
<div className="link-post-container">
...blog
<button className='deleteButton'></button>
</div>
</Link>
I have tried event.stopPropagation on the button but it still doesn't seem to do anything. Is it because the Link is an href instead of a onClick?
SOLUTION
so using some of the possible solutions below i started messing around and noticed by in the onClick of the deleteButton, if i add the following in, it works:
event.preventDefault()
with this, the redirect because of the href does not occur anymore and only the button click event will take place
const handleClick = event => {
event.stopPropagation()
// then write rest of your onclick code
}
<button className='deleteButton' onClick={handleClick}></button>
The click event propagates from the button upwards in the DOM tree until it reaches the root (simplified explanation - you can learn more about event propagation here). This is why the link also registers it and runs its onclick handler, redirecting you to another site.
You can call event.stopPropagation() inside your button's onClick handler to stop the event from reaching the encapsulating link.
source
Is there any way to listen for clicks on hyperlinks in a mx.control.HTML component.
Meaning, if a have a HTML component that has a link
<a href='event:SomeText'>A clickable link</a>
then can i set up some kind of listener to catch such clicks?
for instance
var myHTML:HTML = new HTML();
myHTML.htmlText = "<a href='event:SomeText'>A clickable link</a>";
myHTML.addEventListener(SomeEvent.LINK_CLICK, linkFunction);
function linkFunction(event:SomeEvent):void{
//do some stuff
}
or something like this, i need to execute AS3 code when that link is clicked.
EDIT
Or is there any way to access AS3 methods in javascript of the mx:HTML component? Something like this
var myHTML:HTML = new HTML();
myHTML.htmlText = "<a href='event:SomeText' onclick='linkFunction()'>A clickable link</a>";
function linkFunction():void{
//do some stuff
}
You can just had an "onclick" attribute.
<html>
<body>
CLICK ME
</body>
</html>
For example...
In this code, the link tag first fires off an alert, and only then directs you to the supplied link.
There is two-way communication between AS and JS. You can check the link below and find out how to notify AS from a JS function/method.
Adobe Flex Developer Centre
I created a button
<button type="button" ng-click="chooseOptions()" id="chooseOptionButton" ng-bind="whatToDisplay()"></button>
Which shows a <div ng-show=appearOnChoice>on click and toggles back when clicking again!
$scope.chooseOptions=function(){
$scope.appearOnChoice=!$scope.appearOnChoice;
}
However, I also want this element to hide again, when the user clicks anywhere outside this div
element. How can I do this? I need strictly stick with AngularJS and not use jQuery.
Hope you can help me with that.
EDIT: I tried to adapt some of the events of bootstrap datepicker, but I am not sure how to apply it properly
$scope.$on('datepicker.focus', focusElement);
scope.$watch('isOpen', function(value) {
if (value) {
scope.$broadcast('datepicker.focus');
scope.position = appendToBody ? $position.offset(element) : $position.position(element);
scope.position.top = scope.position.top + element.prop('offsetHeight');
$document.bind('click', documentClickBind);
} else {
$document.unbind('click', documentClickBind);
}
});
var focusElement = function() {
$timeout(function() {
self.element[0].focus();
}, 0 , false);
};
How can I adapt this to my case?!
I think that you dont have to write a function, you can use ng-init to create a model, ng-show to show/hide the div based on the value of the model, and with ng-click change the value of the model. See example below:
var myapp = angular.module('myapp',[]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
<div ng-init="showDiv = true;" >
<div ng-show="showDiv"> SHOOOOOOOOW </div>
<button ng-click="showDiv = !showDiv;">Click me</button>
</div>
</div>
You can set the model value to be false when the user is clicking everywhere else, and set it again to true when it clicks the button. If you made a fiddle I can help you easier :)
If the DIV has focus, then you can use the ng-blur directive on the DIV to run set appearOnChoice to false. However, if the DIV does not already have focus (which it won't if you are depending on the button to make it visible), you will need to manipulate the DOM in your code (to provide focus) OR create a custom directive to set focus so that the ng-blur directive will work. Check out possibilities for that with this link.
alternatively, you can add an ng-click directive to every clickable object on your view that will hide the DIV when fired. But I don't really think that's the best way to go...
The easiest and cleanest way to handle the click away is to register and event on the document that will remove the element when anything other than it, or its children, are clicked.
For an example of a service that does this see GitHub EnzeyNet/Services
Sorry about the lack of documentation there but after injecting the service you would use it like this.
var divElem
nzService.registerClickAwayAction(function() {
divElem.remove();
}, divElem);
I simply solved it by using a ui bootstrap dropdown. This comes along with an is-open option and closes on click outside.
I currently have a button that is functioning a little strange. Whenever you click right in the middle of the button, it works and carries on the requested action. However, if you click anywhere near the outside border of the button, then the action doesn't get carried out.
Here is the current code:
#if(mode == "Edit"){
<div class="Delete"><button class="btn btn-danger">
#Html.ActionLink("Delete Profile", "Delete", "GPS", new { Id = Model.provider.Company.Id.Value, oem = Model.provider.Id},
new { onclick = "return confirm('Are you sure you want to delete this provider?
All GPS Devices attributed to this provider will be removed as well.')" })</button></div>
}
If you check the resulting HTML of your code you will see the following structure:
<div>
<button>
<a></a>
</button>
</div>
Your event onclick is only attached to the <a> tag, so if you click in any place inside the <button> but outside the <a>, the action won't be fired.
By default <a> tags are inline, it means (among other things) its size is defined by its content so it won't fullfill the <button>, you can see this visually using the inspect tools from any brosers (like Chrome Developer Tools).
You can fix this using CSS to change the dimensions of your <a> tag. Try with display:block, width and height.
The final answer will depend on your other style rules.
i want to use a button as a link to another page. i have looked around and read some solutions but none worked. i dont want to use action in my form tag because i might want to have couple of buttons as links in that form tag.
here is what i have tried last:(didnt work)
<button onclick="location.href='../ClientSide/Registration/registration.aspx'">register</button>
what am i doing wrong? or is there a better/other way?
i really would like to use only html if possible, if not then to use: javascript or asp.net( i dont know jquery or php)
You cannot do this directly using only HTML.
You have two options:
Option 1 Post the data to a single script on the server that decides what to do based on which button is clicked.
<form action="/some-url.aspx" method="post">
<button name="button_action" value="register">register</button>
<button name="button_action" value="another">another</button>
</form>
Then your script at /some-url.aspx would decide what to do next based on the value of button_action.
Option 2 Use JavaScript to change the form's action attribute based on which button is clicked.
<form id="form-with-buttons" action="/some-url" method="post">
<button id="register-button" data-url="/some-url.aspx">register</button>
<button id="another-button" data-url="/another-url.aspx">another</button>
</form>
<script>
$("#register-button, #another-button").click(function(e) {
e.preventDefault();
var form = $("#form-with-buttons");
form.prop("action", $(this).data("url"));
form.submit();
});
</script>
Option 1 is more accessible but requires some messiness on the server side. Option 2 is fairly clean but requires JavaScript and a little messiness to work. It really depends on where you want the extra logic and how you feel about the accessibility of your form.
use jQuery on you page and this code
$(function(){
$("button").on("click",function(e){
e.preventDefault();
location.href='../ClientSide/Registration/registration.aspx';
})
});
e.preventDefault() makes form NOT SUBMITING
Use the formaction="url" tag on the <input> or <button>, as per: https://css-tricks.com/separate-form-submit-buttons-go-different-urls/
A simple answer would be wrapping the button inside anchor
<a href='../ClientSide/Registration/registration.aspx'>
<button>Click Here</button>
</a>