I m trying to set a on click event dynamically to a dijit/form/Button.
But, the method I m trying doesn't seem to work.
<button id = "newActButton" data-dojo-type="dijit/form/Button"
type = "button"
data-dojo-props="iconClass: 'newActButtonIcon', label: 'New Act'"></button>
dijit.byId("newActButton").set("onClick", newActButtonOnClick());
I have a function newActButtonOnClick(), which I want to fire.
You may try something like this:
require(["dojo/on", "dojo/dom", "dojo/domReady!"],
function(on, dom) {
var newActButton = dom.byId("newActButton");
on(newActButton, "click", newActButtonOnClick);
});
Here's tutorial
jsfiddle
It doesn't work because you have an error in your code (by.Id VERSUS byId):
dijit.by.Id("newActButton").set("onClick", newActButtonOnClick());
should be
dijit.byId("newActButton").set("onClick", newActButtonOnClick());
EDIT
Try this:
require(["dojo/parser", "dijit/form/Button"]);
<button data-dojo-type="dijit/form/Button" type="button">Click me too!
<script type="dojo/on" data-dojo-event="click" data-dojo-args="evt">
require(["dojo/dom"], function(dom){
dom.byId("result2").innerHTML += "Thank you! ";
});
</script>
</button>
<div id="result2"></div>
Related
Okay, I would like to put an onClick event on a button. For some reason this code doesn't work.
HTML:
<button id="who" class="hidden">Arresteer een verdachte!</button>
JavaScript:
var button = document.getElementById("who");
button.onclick(function(){
console.log("hoi")
})
Does anyone know why this doesn't work?
your button id is who no button :
document.getElementById("who");
Update:
document.getElementById("who").onclick = function () { alert('hello!'); };
OR
var el = document.getElementById("who");
if (el.addEventListener)
el.addEventListener("click", doFunction, false);
else if (el.attachEvent)
el.attachEvent('onclick', doFunction);
You need to remove the "onclick" function and assign click event, like this:
button.addEventListener('click', function() {
console.log("hoi");
});
i want a anchor should act like and input type submit button.
i am using a jquery plugin library that actually uses input type submit but i have styled my buttons on anchors. i dont want to use
<input type="button">
or
<input type="submit">
i want to use anchors such as
<a href="javascript to submit the form" ></a>
and here is my jquery code where i want to use
{
var submit = $('<button type="submit" />');
submit.html(settings.submit);
}
$(this).append(submit);
}
if (settings.cancel) {
/* if given html string use that */
if (settings.cancel.match(/>$/)) {
var cancel = $(settings.cancel);
/* otherwise use button with given string as text */
} else {
var cancel = $('<button type="cancel" />');
how to use anchors instead of button.
If you want an anchor tag to act like a button just do this
<!--YOUR FORM-->
<form id="submit_this">.....</form>
<a id="fakeanchor" href="#"></a>
<script>
$("a#fakeanchor").click(function()
{
$("#submit_this").submit();
return false;
});
</script>
Since you're using jQuery, just use $() to select the form element, and call submit on it; hook all this up to the anchor via $() to find the anchor and click to hook up the handler:
$("selector_for_the_anchor").click(function() {
$("selector_for_the_form").submit();
return false;
});
Probably best to return false; to cancel the click on the anchor.
Off-topic: But note that this makes your page completely unusable without JavaScript, as well as making it confusing even for JavaScript-enabled browsers employed by users requiring assistive technologies (screenreaders, etc.). It makes the markup completely un-semantic. But since you'd said quite clearly that this was what you wanted to do...
<a id='anchor' href="javascript to submit the form" ></a>
now you can use jquery to add an event handler
$('#anchor').click(function (e) {
// do some work
// prevent the default anchor behaviour
e.preventDefault();
})
now you can style your anchor as you wish and it will act as a regular button
And what about:
<form id="formOne">
...
link here
</form>
you can use input of type image (it works as a submit button for a form) or in jquery:
$("a").click(function(event){
event.preventDefault();
$('form').submit();
})
I want to navigate to another action NewPage in Home Controller when somebody click on the following button.
<input class="t-button AlignButton" type="button" value="New" />
What would be the code for performing this action.
Thanks in advance.
It might be better to use an ActionLink.
#Html.ActionLink("New", "NewPage", "Home")
If you want it to look like a button, you can add css properties.
#Html.ActionLink("New", "NewPage", "Home", new { #class="newpage" })
In the css, you can define what you want the link to look like including using an image.
I use such solutions:
#(Html.Kendo().Button()
.Name("CreateDataSubmit")
.Content("Create new")
.Events(e => e.Click(#<text>function(e) { window.location.href = "#(Url.Action("Create"))" }</text>))
)
#Html.ActionLink("Create new", "Create", null, new { #class = "k-button k-button-icontext" })
The second one is better. Good luck.
There are few options. You can do what Daniel suggested or you could do it using JavaScript.
Note navigation would not work in a browser that doesn't have JavaScript capability.
Add Id to the button
<input class="t-button AlignButton" type="button" value="New" id="my-button" url="#Url.Action("Action", "Controller")" />
Use JavaScript to find the button and do the url change. Here is a jQuery version
$(document).ready(function () {
$('#my-button').click(function (e) {
var url = $(this).attr('url');
windows.location = url;
});
});
I want basically the same as
jquery select image
a row of images that you can select one of.
But I'm trying to style the one I select, and store it.
var selectedicon = "";
function selecticon(){
$('#iconselect').children().click(function(){
$(".selectedicon").removeclass("selectedicon");
selectedicon = $(this).attr("src");
$(this).addclass("selectedicon");
});
}
on this
<div id="iconselect">
<img src="/red-dot.png" class="selectedicon" />
<img src="/green-dot.png" />
<img src="/blue-dot.png" />
<img src="/orange-dot.png" />
</div>
What am I doing wrong?
jQuery addClass and removeClass are mistyped (C should be capital).
Is the function selecticon called at all?
As you are not saying what does not work, here is a wild guess:
Probably the function selection() is never called and thus the click handler is never attached to the elements. Put your code into the document.ready callback instead:
var selectedicon = "";
$(function() {
// I would use $('#iconselect img').click(...)
$('#iconselect').children().click(function(){
$(".selectedicon").removeClass("selectedicon");
selectedicon = $(this).attr("src");
$(this).addClass("selectedicon");
});
});
This ensures that your code is executed once the DOM is loaded.
You also have some typos in the method names:
removeclass() must be removeClass()
addclass() must be addClass()
How do I apply jQueryUI styles to an asp:Button. Here is the problem: jqueryUI button requires you to have the following format <button>Test button</button>
When I try to use an asp button server control, <asp:Button />, asp:Button renders as <input type=button>Test button </input>
Update : I get the standard button styling that jquery provides. However, when I want to make a toolbar out of it, like in this example : http://jqueryui.com/demos/button/#toolbar, the standard asp:Button fails me....or maybe i am missing something.
Thanks in advance,
Sashidhar Kokku
You can apply the jQuery UI button to a number of different HTML elements: <a>, <input type="button"> and so on.
$(function() {
$("input[type=button]").button();
});
This will convert all <asp:Button>s on the page into jQuery UI buttons.
This is how you do it: Add the following to your initialize function:
$(function () {
//Converting asp buttons to html buttons
$('input:submit, input:reset').each(function () {
$(this).replaceWith('<button type="submit" name="' + $(this).attr('name') + '" class="' + $(this).attr('class') + '" id="' + $(this).attr('id') + '" >' + $(this).val() + '</button>');
});
//Adding button icons .....
$(".createbutton").button({
icons: { primary: "ui-icon-circle-plus" }
});
The jQuery UI button widget is capable of transforming the following button types:
<input type="button" />
<input type="submit" />
<button></button>
Since the <asp:Button> control renders the first type of HTML, you could include the following in your master page to apply the jQuery transform to all ASP.NET buttons:
$("input[type=button]").button();
You should also
$("input[type=submit]").button();
to handle submit buttons.
You can assign a style to the ASP.NET buttons, then use the style as a selector to selectively (pardon the pun) apply the jQuery button. For example, if you set the attribute CssClass="special" on the buttons you want to modify, then you would put the following jQuery in your page:
$(function() {
$(".special").button();
});
Hope that helps.
$(document).ready(function() {
$('#<%= Button1.UniqueID %>').click(function() {
// do something
});
});
I'm pretty sure jQuery UI will work fine with button input, as well any other element.
You just need to select the desired element.