Please bear with me. I've got the jQuery validation plugin working beautifully in FF, Opera, Safari and IE8. However, IE7 is giving me problems. Our back-end developer insisted on using .Net WebForm to create the form on the server (at least this is what I think she used, it's .aspx is about all I know - I can post some code if it'll help.) Anyway, in the code her submit button looks like this:
<asp:Button ID="btnSubmit" runat="server" Text="Submit the request" OnClick="btnSubmit_Click" />
and the output (in the HTML) looks like this:
<input type="submit" name="btnSubmit" value="Submit the request" onclick="if (typeof(Page_ClientValidate) == 'function') Page_ClientValidate(); " language="javascript" id="btnSubmit" />
However, when I replace her code with a simple <button type="submit" name="Submit" value="submit" class="button">Submit</button> the validation works, the error messages pop up, clouds part, etc. But she says she can't use this. Sigh.
So I guess my question is: how do I get jQuery to play nicely with her approach? I'm using jQuery to add some nice UI touches to the form, such as accordions, the calendar widget, etc. and I wanted this to be the icing on the cake. I'm also very sure that the initiation of the js is well-formed, I get no js errors for extra comma's, etc.
Thanks for whatever help you can provide.
Based on the javascript that is emitted in the button's onclick event ("if (typeof(Page_ClientValidate)....."), it looks like you are mixing ASP.NET validation and the jQuery Validate plugin. Try adding CausesValidation="false" to the attributes of the button, thereby forcing it to do a normal form submit, to which the Validate plugin responds.
Does the jQuery require the class to be set to "submit" in order for the jQuery validation plugin to work?
That seems to be the most obvious difference between the html generated by .Net and the html you wrote. If that is the case add 'CssClass="submit"' to asp:button element in the aspx page. This will be converted to 'class="submit"' in the generated html.
<asp:Button CssClass="submit" ID="btnSubmit" runat="server" Text="Submit the request" OnClick="btnSubmit_Click" />
Related
I want to use an asp.net button to launch an outlook window using the following html.
<a href="mailto:sample#website.com?subject=Insurance Text">
What do I need to do to file html code from my onClick event?
Try this
<asp:Button runat="server"
ID="btn"
OnClientClick="document.location = 'mailto:sample#website.com?subject=Insurance Text'; return false;"
Text="Mail" />
There are two approaches. If you want the standard button, you could use something like this:
<asp:Button ID="MailToButton"
Text="Send Email"
OnClientClick="javascript: navigate('mailto:blah#blah.com'); return false;"
runat="server" />
EDIT 2: Never mind about the UseSubmitBehavior property - I was incorrect. You'll just have to use return false;. Apparently ASP.NET does not render a regular non-submit button. How to disable postback on an asp Button
If you want an anchor tag, you can just use the NavigateUrl property of the Hyperlink tag:
<asp:HyperLink ID="MailToHyperlink"
Text="Send Email"
NavigateUrl="mailto:blah#blah.com"
runat="server" />
You cannot launch Outlook from the standard click event in the code behind, however. The code behind click event occurs on the server, not on the client's machine, so whatever you do it needs to happen on the client's machine either through standard HTML or through javascript.
Why an ASP.NET button?
Just use a simple HTML button.
They are plenty of example on the web. This one should work: using mailto button click event
I'm using asp forms and wanted to know if it's possible to replace the standard buttons with HTML elements that are styled using CSS.
My login page uses a standard button
<asp:Button ID="LoginButton" runat="server" Text="Login"
onclick="LoginButton_Click" />
linked to code behind (C#) which performs the login check.
I've seen some nice buttons implemented using the HTML <button> element and styled with CSS which can have features such as images and roll over highlighting. The basic HTML looks like this
<button type="submit" class="positive" onclick ="...">
<img src="/icons/tick.png" alt=""/>
Login
</button>
I've seen another question discussing the Difference between asp:button and html's button so I understand the <button> element is not a drop-in replacement but I'd like to know if the asp:button can be replaced and still call the LoginButton_Click C# code behind?
EDIT:
Although I'm using ASP I don't mind using some client side javascript if necessary.
The buttons I saw which got me thinking about this were found here: Rediscovering the Button Element
EDIT 2:
I tried the answer from XIII using the LinkButton asp control and that worked, rendering the button as I wanted and activating the C# when clicked
<asp:LinkButton ID="LoginBtn" CssClass="button positive"
OnClick="LoginButton_Click" runat="server">
<img src="/icons/tick.png" alt=""/>
Login
</asp:LinkButton>
Javascript is inserted in to the page (as mentioned by Curt) which was not a problem for me but may be for other people; but since the asp:loginview and other controls associated with forms authentication already need javascript I'm not sure this is a problem with the solution.
I decided to accept jwiscarson's answer as this is a cleaner implementation and, despite what I thought, <button> can be a drop-in replacement for <asp:button>
The answer to your question:
if the asp:button can be replaced and still call the LoginButton_Click C# code behind?
is yes. If you have a button like:
<button type="submit" id="submit" class="positive" runat="server">Submit</button>
The attribute you need to set is not onclick, but onserverclick. You could also do something like:
protected override OnInit(EventArgs e)
{
submit.ServerClick += new EventHandler(submit_ServerClick);
}
If you need to do styling on that button, I think the best way to tackle that is via CSS classes like you have in your example.
An alternative approach would be to make use the LinkButton control and style that completely with CSS. We used to do so for a certain project in the past. Worked out pretty great for our customer.
The property of interest if CssClass
You may set CSS class via cssClass property of <asp:Button/>. However you may set runat="server" and onserverclick="LoginButton_Click" attribute to <button/>.
You could use HTML button if you desire, and learn how to call the __doPostBack() method with the proper arguments. Asp.Net buttons and HTML buttons are pretty much the same when it comes to the way they are rendered in the client.
As had been posted here already you could style the HTML rendered by your asp:button or use another asp control. Your asp:button will be rendered as a <input type="submit"> with possibly more limited CSS options than a <button> tag.
From some googling I think it is possible to get a <button> tag rendered but it looks like a non trivial excercise see How can I use the button tag with ASP.NET?
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'm using ASP.NET and I have a save button on webform. When that save button is clicked (ONCE) and I'm using IE8 the event handler is executed twice. If I use compatibility mode it works just fine. In FF everything works just fine. I tested IE8 on both Vista and windows 7 and get the same behavior. IE7 works just fine. Just curious is anyone has had a similar issue.
P.S. I am using an advanced layout system which positions and styles the controls based on a layout definition, so it isn't just a standard throw controls on a page setup.
We are using onserverclick on a button tag instead of using an asp.net button. The solution was to set the type of the button to "button". Before no type was set and I think it was defaulting to submit.
Changed
<button id="button1" runat="server" onserverclick="button1_OnClick" />
To
<button id="button1" runat="server" type="button" onserverclick="button1_OnClick" />
Now I do not get the double post back in IE8.
I just fixed a bug with similar symptoms which was caused by two form.submit() calls being made in the client-side javascript event handler for the button.
It appears the second form.submit() was being ignored by other browers but executed in IE8.
I just found a solution to a similar problem I was having troubles with.
Since none of the previous solutions seemed to help me I thought I'd post my own solution.
The problem:
When using an asp button on a webform and using the OnClientClick to run a custom postback mechanism. The postback seems to happen twice (the second time without viewstate being applied)
e.g. :
function ok(){
docustompostbackthing();
}
<asp:Button runat="server" ID="btnOk" Text="Ok" OnClientClick="ok();" cssClass="btn"/>
The solution:
Add a "return false;" after the js function call in the button's OnClientClick.
Adding it in the function itself doesn't do the trick.
e.g. :
function ok(){
docustompostbackthing();
}
<asp:Button runat="server" ID="btnOk" Text="Ok" OnClientClick="ok();return false;" cssClass="btn"/>
Please look at the html as it is rendered on the page:
Every time it's present
<img src=""/>
double postback can happen, for some browser...
If this is the trouble, you can resolve it setting a default, blank, image for every button
<asp:ImageButton ImageUrl="~/Images/blank.gif"...
Just to add to the number of solutions.
It's not just OnClientClick that has issues, the OnClick event does a very similar thing in IE8 as well.
<asp:Button runat="server" ID="btnOk" Text="Ok" OnClick="ok();" cssClass="btn"/>
Can be updated to the following to avoid the second event being fired off.
<asp:Button runat="server" ID="btnOk" Text="Ok" OnClick="ok();return false;" cssClass="btn"/>
I was using jquery(formobj).trigger(submit) this was changed to
jquery(formobj)[0].submit()
Note I am calling submit directly on the form instead of the jquery method
hope this helps someone
I had this same issue happening in IE 11 and managed to fix it by adding type="button" to the button control.
Good Day,
We have migrated our web application to ASP.NET 2.0 from ASP.NET 1.1.
We have a page that contains a couple of textboxes with their respective Validators.
On .NET 1.1, when a textbox contains an INVALID value, clicking on the "submit" button, will not produce a postback (E.G. Nothing will happen).
However, when we migrated to .NET 2.0, even if there is an INVALID value, the postback will still happen. (E.G. Pressing the "submit" button will perform a postback).
Is there an issue with validation when migrating from 1.1 to 2.0?
Additional Infos:
The "submit" button is an input button:
<input type="button">
Using an <asp:button> in place of the <input> button will work and will fix the problem. However, the <input type="button"> has the capability to call a javascript that will produce a "Wait... Loading" label overlay on the page. Using the asp:button, the "Wait... Loading" overlay javascript will NOT be invoked.
EDIT: Real problem and solution.
Anyway, the real problem is that the on-click validation javascript was broken during migration.
The original and working script is:
<input language="javascript" onclick="{if (typeof(Page_ClientValidate) != 'function' || Page_ClientValidate()) __doPostBack('m_bt_Save','')} " name="m_bt_Save" id="m_bt_Save" type="button" value="Save" width="80px" height="24px" />
But ASP.NET 2.0 changed it to:
<input onclick="if (typeof(Page_ClientValidate) == 'function') Page_ClientValidate(''); __doPostBack('m_bt_Save','')" name="m_bt_Save" type="button" id="m_bt_Save" value="Save" width="80px" height="24px" />
So the my solution was, change the INPUT button to an ASP:button, then add the attribute doing page load with the correct ASP.NET 1.1 javascript validation like so:
m_bt_Save.Attributes.Add("OnClick", "if (typeof(Page_ClientValidate) != 'function' || Page_ClientValidate()) __doPostBack('m_bt_Save','')");
One thing you can do, is you can just add your JS that you need to the button.
Button1.Attributes.Add("OnClick", "do my js stuff here");
That will allow you to have the exact same functionality as the input, and it makes it work.
Otherwise, my guess is that you will need to modify the way the input button submits to call the validate page method before it does the from submit.
You can use page validators from the javascript.
See this link:
http://www.aspdotnetfaq.com/Faq/How-to-control-ASP-NET-Validator-Controls-Client-Side-validation-from-JavaScript.aspx
http://www.codedigest.com/Articles/ASPNET/166_Restrict_AspNet_Validator_controls_to_Fire_on_Page_Submit.aspx
This happened in our upgrade as well. I think we narrowed it down to a problem with the WebUIValidation.js file. I think re-installing it was the final fix for us.