Interesting things. When I try to bind event like this - that doesn't work
<button :onMouseEnter="hi">Hi!</button>
But on like this, it still works
<button :onClick="hi">Hi!</button>
or
<button :onFocus="hi">Hi!</button>
What's a problem? It is a bug?
Although I can bind like this:
<button :onmouseenter="hi">Hi!</button>
But is not the same things
Need to use this spelling - onMouseover, not onMouseOver
Related
Ok peep's so the file input tag is very cumbersome and static, but I don't know any other way to do what it does.
Thing is.. I want to be able to split it like siamese twins, right down the middle, if you'll excuse the pun...
<input id="upload_input" type="text" placeholder="Upload A File">
<button id="upload_button">Upload..</button>
<input id="hidden_input" type="file" style="display:none">
$('#upload_button').click(function(){
// initiate hidden_input
})
$('#hidden_input').change(function(){
$('#upload_input').text(
$('#hidden_input').text()
)
// or upload_input.innerText = hidden_input.innerText
// if the jQuery isn't right, I don't know much jQuery...
})
I think that explains what I'm trying to do, if not just ask away... thanks in advance!
dude never mind I found what i was lookin for, it was the $().click() event I'd been usin all along
I am unable to click the Continue button present in the screen. Following is the code which I am using,
LoginPage2.driver.findElement(By.name("Continue")).click();
Two buttons are placed side by side Continue and Cancel. I am able to click on the Cancel button using the same command, but not the former one.
Following is the HTML format:
<*input value="Continue" class="btn" title="Continue" name="save" type="submit">
<*input value="Cancel" class="btn" title="Cancel" name="cancel" type="submit">
Kindly help..
Regards,
Sambit
Try
LoginPage2.driver.findElement(By.name("save")).click();
Or
LoginPage2.driver.findElement(By.xpath("//input[#title='Continue']")).click();
See your HTML elements:
LoginPage2.driver.findElement(By.name("Continue")).click();
It didn't work because By.name is wrong and it is correct in case of cancel. Instead of By.name you should use By.value("Continue") than it will work.
I have a asp.net button and I am using OnclientClick to close the window
<asp:Button ID="btnCancelSomething" runat="server" class="type-button"
Text="Cancel" OnClientClick = "Javascript:self.close()"
onclick="btnCancelSomething_Click"/>
the onclick event does nothing and I am planning to remove it. However, when I click the button the first time it is loading the page again. I click the button again then the script is fired.
How to make the window close the first time?
If the button isn't going to have any server-side functionality behind it anyway, why make it an asp:Button at all? A regular button will do the trick just fine:
<input type="button" value="Cancel" class="type-button" onclick="self.close()" />
That way it's purely client-side, since that's all the functionality that's needed anyway. It won't cause any "post-back" unnecessarily.
You could even take it a step further and break apart markup from functionality:
<input type="button" value="Cancel" class="type-button" id="cancelButton" />
Then in a script tag elsewhere, or in a separate file:
$('#cancelButton').click(function() {
self.close();
});
(Of course, this example assumes jQuery. But then what doesn't? The separation of markup and functionality if the key point here, though. How you achieve it, even how you identify the element with an id as in my example or some other way, is up to you.)
I am working on a ASP.NET MVC web site that has multiple submit buttons. i.e.
<input type="submit" name="SubmitButton" value="Reset" />
<input type="submit" name="SubmitButton" value="OK" />
<input type="submit" name="SubmitButton" value="Back" />
I need to allow users to quickly submitting the form by pressing the 'Enter' key. HTML standard seems to specify that the first submit button will be assumed if a user press the 'Enter' key. However, I need to make the 2nd button (i.e. the "OK") button the default button and for reasons I don't even want to talk about, changing the button order is not an option.
I googled around and I found this post about using Page.Form.DefaultButton in ASP.NET but this doesn't work with ASP.NET MVC.
I also tried the following javascript solution, while it works in Chrome but doesn't work in IE6
$('body').keypress(function(e) {
if (e.which === 13) {
$("input[value='OK']").trigger('click');
}
});
I can think of some really extreme solutions such as going through every single controls in the form an attach the above function to them. However, I don't think that's a very neat solution so I am wondering has anyone got a better solution?
First off, this is wrong:
<input type="submit" name="SubmitButton" value="Reset" />
<input type="submit" name="SubmitButton" value="OK" />
<input type="submit" name="SubmitButton" value="Back" />
All three of them are submit buttons. A reset is an input of type="reset". Get that sorted. Second of all, I've successfully implemented something like that, and it works on IE6. Try this:
function keypressHandler(e)
{
if(e.which == 13) {
e.preventDefault(); //stops default action: submitting form
$(this).blur();
$('#SubmitButton').focus().click();//give your submit an ID
}
}
$('#myForm').keypress(keypressHandler);
The focus() part makes the button appear to be pressed when the user presses enter. Quite nifty.
Use this.
$(function(){
$('input').keydown(function(e){
if (e.keyCode == 13) {
$("input[value='OK']").focus().click();
return false;
}
});
});
You should only have one submit button. The reset button should be type="reset" and the back button should probably be type="button" like this:
<input type="reset" name="ResetButton" value="Reset" />
<input type="submit" name="SubmitButton" value="OK" />
<input type="button" name="BackButton" value="Back" />
Then, Reset and OK will just work the way they are supposed to and you'll only need to handle the Back button click with Javascript.
Edit: The other option would be to place the Reset and Back submit buttons each in their own forms inside iframes. Then they would be ignored by the main form and wouldn't be default buttons. Also, this would allow you to point them to different server actions if needed and there wouldn't be any reliance on Javascript for the button actions.
HTML standard seems to specify that
the first submit button will be
assumed if a user press the 'Enter'
key.
No, the usage of the enter key isn't defined, it's a propritary extension that's been added under various interpretations. You will get different behavoir in different browsers (and it can become very dangerous when you start mixing in different cultural or UI conventions about left to right/right to left ordering of options).
If there is only 1 button on the form then all the mainstream browsers happen to follow the same behavior - they submit the form as if that button was pressed (a buttonName=buttonValue is included with the form data). Of course this doesn't mean the buttons onclick handler is going to fire - that behavoir is browser specific.
When there are several buttons it's a complete crap shoot. Some browsers decide that the first button (and the definition of first can vary - most use the first one mentioned in the Html tree, while others attempt to use screen position) was clicked and use it in the submission, while other browsers (notably some versions of IE) make the equally correct assumption that no specific button was pressed, and so don't include a buttonName=buttonValue (the rest of the form is submitted fine).
Since you use jquery, if you use hotkeys plugin, you can make a such approach:
$(document).bind('keydown', 'return', function (evt){
$.next("input[value='OK']").trigger("click");
return false;
});
Change button order in source but not visually (ie, use CSS to swap the buttons)?
I'd like to use the newer <button> tag in an ASP.NET website which, among other things, allows CSS-styled text and embedding a graphic inside the button. The asp:Button control renders as <input type="button">, is there any way to make a preexisting control render to <button>?
From what I've read there is an incompatibility with IE posting the button's markup instead of the value attribute when the button is located within a <form>, but in ASP.NET it will be using the onclick event to fire __doPostBack anyway, so I don't think that this would be a problem.
Are there any reasons why I shouldn't use this? If not, how would you go about supporting it with asp:Button, or a new server control based on it? I would prefer to not write my own server control if that can be avoided.
At first the <button runat="server"> solution worked, but I immediately ran into a situation where it needs to have a CommandName property, which the HtmlButton control doesn't have. It looks like I'm going to need to create a control inherited from Button after all.
What do I need to do in order to override the render method and make it render what I want?
UPDATE
DanHerbert's reply has made me interested in finding a solution to this again, so I've spent some more time working on it.
First, there's a far easier way of overloading the TagName:
public ModernButton() : base(HtmlTextWriterTag.Button)
{
}
The problem with Dan's solution as it stands is the innerhtml of the tag is placed into the value property, which causes a validation error on postback. A related problem is, even if you render the value property correctly, IE's braindead implementation of the <button> tag posts the innerhtml instead of the value anyway. So, any implementation of this needs to override the AddAttributesToRender method in order to correctly render the value property, and also provide some sort of workaround for IE so it doesn't completely screw up the postback.
The IE problem may be insurmountable if you want to take advantage of the CommandName/CommandArgument properties for a databound control. Hopefully someone can suggest a workaround for this.
I have made progress on the rendering:
ModernButton.cs
This renders as a proper html <button> with the correct value, but it doesn't work with the ASP.Net PostBack system. I've written some of what I need to provide the Command event, but it doesn't fire.
When inspecting this button side-by-side with a regular asp:Button, they look the same other than the differences I need. So I'm not sure how ASP.Net is wiring up the Command event in this case.
An additional problem is, nested server controls aren't rendered (as you can see with the ParseChildren(false) attribute). It's pretty easy to inject literal html text into the control during render, but how do you allow support for nested server controls?
Although you say that using the [button runat="server"] is not a good enough solution it is important to mention it - a lot of .NET programmers are afraid of using the "native" HTML tags...
Use:
<button id="btnSubmit" runat="server" class="myButton"
onserverclick="btnSubmit_Click">Hello</button>
This usually works perfectly fine and everybody is happy in my team.
This is an old question, but for those of us unlucky enough still having to maintain ASP.NET Web Forms applications, I went through this myself while trying to include Bootstrap glyphs inside of built-in button controls.
As per Bootstrap documentation, the desired markup is as follows:
<button class="btn btn-default">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Search
</button>
I needed this markup to be rendered by a server control, so I set out to find options.
Button
This would be the first logical step, but —as this question explains— Button renders an <input> element instead of <button>, so adding inner HTML is not possible.
LinkButton (credit to Tsvetomir Tsonev's answer)
Source
<asp:LinkButton runat="server" ID="uxSearch" CssClass="btn btn-default">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Search
</asp:LinkButton>
Output
<a id="uxSearch" class="btn btn-default" href="javascript:__doPostBack('uxSearch','')">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Search
</a>
Pros
Looks OK
Command event; CommandName and CommandArgument properties
Cons
Renders <a> instead of <button>
Renders and relies on obtrusive JavaScript
HtmlButton (credit to Philippe's answer)
Source
<button runat="server" id="uxSearch" class="btn btn-default">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Search
</button>
Result
<button onclick="__doPostBack('uxSearch','')" id="uxSearch" class="btn btn-default">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Search
</button>
Pros
Looks OK
Renders proper <button> element
Cons
No Command event; no CommandName or CommandArgument properties
Renders and relies on obtrusive JavaScript to handle its ServerClick event
At this point it is clear that none of the built-in controls seem suitable, so the next logical step is try and modify them to achieve the desired functionality.
Custom control (credit to Dan Herbert's answer)
NOTE: This is based on Dan's code, so all credit goes to him.
using System.Web.UI;
using System.Web.UI.WebControls;
namespace ModernControls
{
[ParseChildren]
public class ModernButton : Button
{
public new string Text
{
get { return (string)ViewState["NewText"] ?? ""; }
set { ViewState["NewText"] = value; }
}
public string Value
{
get { return base.Text; }
set { base.Text = value; }
}
protected override HtmlTextWriterTag TagKey
{
get { return HtmlTextWriterTag.Button; }
}
protected override void AddParsedSubObject(object obj)
{
var literal = obj as LiteralControl;
if (literal == null) return;
Text = literal.Text;
}
protected override void RenderContents(HtmlTextWriter writer)
{
writer.Write(Text);
}
}
}
I have stripped the class down to the bare minimum, and refactored it to achieve the same functionality with as little code as possible. I also added a couple of improvements. Namely:
Remove PersistChildren attribute (seems unnecessary)
Remove TagName override (seems unnecessary)
Remove HTML decoding from Text (base class already handles this)
Leave OnPreRender intact; override AddParsedSubObject instead (simpler)
Simplify RenderContents override
Add a Value property (see below)
Add a namespace (to include a sample of # Register directive)
Add necessary using directives
The Value property simply accesses the old Text property. This is because the native Button control renders a value attribute anyway (with Text as its value). Since value is a valid attribute of the <button> element, I decided to include a property for it.
Source
<%# Register TagPrefix="mc" Namespace="ModernControls" %>
<mc:ModernButton runat="server" ID="uxSearch" Value="Foo" CssClass="btn btn-default" >
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Search
</mc:ModernButton>
Output
<button type="submit" name="uxSearch" value="Foo" id="uxSearch" class="btn btn-default">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Search
</button>
Pros
Looks OK
Renders a proper <button> element
Command event; CommandName and CommandArgument properties
Does not render or rely on obtrusive JavaScript
Cons
None (other than not being a built-in control)
I stumbled upon your question looking for the same exact thing. I ended up using Reflector to figure out how the ASP.NET Button control is actually rendered. It turns out to be really easy to change.
It really just comes down to overriding the TagName and TagKey properties of the Button class. After you've done that, you just need to make sure you render the contents of the button manually since the original Button class never had contents to render and the control will render a text-less button if you don't render the contents.
Update:
It's possible to make a few small modifications to the Button control through inheritance and still work fairly well. This solution eliminates the need to implement your own event handlers for OnCommand (although if you want to learn how to do that I can show you how that is handled). It also fixes the issue of submitting a value that has markup in it, except for IE probably. I'm still not sure how to fix IE's poor implementation of the Button tag though. That may just be a truly technical limitation that is impossible to work around...
[ParseChildren(false)]
[PersistChildren(true)]
public class ModernButton : Button
{
protected override string TagName
{
get { return "button"; }
}
protected override HtmlTextWriterTag TagKey
{
get { return HtmlTextWriterTag.Button; }
}
// Create a new implementation of the Text property which
// will be ignored by the parent class, giving us the freedom
// to use this property as we please.
public new string Text
{
get { return ViewState["NewText"] as string; }
set { ViewState["NewText"] = HttpUtility.HtmlDecode(value); }
}
protected override void OnPreRender(System.EventArgs e)
{
base.OnPreRender(e);
// I wasn't sure what the best way to handle 'Text' would
// be. Text is treated as another control which gets added
// to the end of the button's control collection in this
//implementation
LiteralControl lc = new LiteralControl(this.Text);
Controls.Add(lc);
// Add a value for base.Text for the parent class
// If the following line is omitted, the 'value'
// attribute will be blank upon rendering
base.Text = UniqueID;
}
protected override void RenderContents(HtmlTextWriter writer)
{
RenderChildren(writer);
}
}
To use this control, you have a few options. One is to place controls directly into the ASP markup.
<uc:ModernButton runat="server"
ID="btnLogin"
OnClick="btnLogin_Click"
Text="Purplemonkeydishwasher">
<img src="../someUrl/img.gif" alt="img" />
<asp:Label ID="Label1" runat="server" Text="Login" />
</uc:ModernButton>
You can also add the controls to the control collection of the button in your code-behind.
// This code probably won't work too well "as is"
// since there is nothing being defined about these
// controls, but you get the idea.
btnLogin.Controls.Add(new Label());
btnLogin.Controls.Add(new Table());
I don't know how well a combination of both options works as I haven't tested that.
The only downside to this control right now is that I don't think it will remember your controls across PostBacks. I haven't tested this so it may already work, but I doubt it does. You'll need to add some ViewState management code for sub-controls to be handled across PostBacks I think, however this probably isn't an issue for you. Adding ViewState support shouldn't be terribly hard to do, although if needed that can easily be added.
You could make a new control, inheriting from Button, and override the render method, or use a .browser file to override all Buttons in the site, similar to the way the CSS Friendly stuff works for the TreeView control etc.
You can use the Button.UseSubmitBehavior property as discussed in this article about rendering an ASP.NET Button control as a button.
EDIT: Sorry.. that's what I get for skimming questions on my lunch break. Are there reasons why you wouldn't just use a <button runat="server"> tag or an HtmlButton?
I would go with a LinkButton and style it with CSS as appropriate.
I've been struggling all day with this -- my custom <button/> generated control not working:
System.Web.HttpRequestValidationException: A potentially dangerous Request.Form value was detected from the client
What happens is that .Net adds a name attribute:
<button type="submit" name="ctl02" value="Content" class="btn ">
<span>Content</span>
</button>
The name attribute throws the server error when using IE 6 and IE 7. Everything works fine in other browsers (Opera, IE 8, Firefox, Safari).
The cure is to hack away that name attribute. Still I haven't figured that out.