I have a RadPanelBar as such...
<telerik:RadPanelBar
ID="ResourcesSubMenuRadPanelBar1"
Width="195px"
OnItemClick="RadPanelItemClick"
ExpandMode="MultipleExpandedItems"
OnClientItemClicked="RadPanelClientItemClicked"
OnClientLoad="RadPanelBarClientLoad"
runat="server"
AppendDataBoundItems="true"
EnableEmbeddedSkins="false"
OnClientItemCollapse="RadPanelClientItemClicked"
OnClientItemExpand="RadPanelClientItemClicked">
</telerik:RadPanelBar>
This all works as expected, except for one little thing. In the code behind, I explicitly set the NavigateUrl property to string.Empty but when an item is clicked, it adds a hash to the url. Obviously, this is because the href attribute has been set to "#" when the control renders the HTML.
I know that I can simply return false from the OnClientItemClicked event, but that will stop the ItemClick event from being fired on the server.
As I say, there is no real error with this code it's just bugging me (and, more importantly, the end users) that there is a # added to the URL.
Does anyone know how to stop this happening?
Try this in your OnClientItemClicking event:
eventArgs.set_cancel(true);
Ref: http://www.telerik.com/help/aspnet-ajax/panelbar-onclientitemclicking.html
And, if in case you want the post back to happen, I suppose there is a item.PostBack property (server-side). Set it to true. It should post you back - if the NavigateUrl is empty (or #).
Compatible in just about every browser, IE9 and up:
Javascript (no jQuery):
stripTelerikHashtag = function () {
[].forEach.call(
document.querySelectorAll(".rpLink"),
function (a) { a.removeAttribute("href") }
);
};
Javascript (with jQuery):
stripTelerikHashtag = function () { $(".rpLink").removeAttr("href"); };
In your ASP, set OnClientLoad on the RadPanelBar to stripTelerikHashtag.
Related
I have created an application in ASP.NET and using JavaScript to validate the fields either its empty or not; calling that validation function onClientClick event of ASP.NET Button Control and also using onClick event for server side processing.
Here I am enclosing the javascript: validation function
function validate() {
if (document.getElementById("<%=txt_msn.ClientID%>").value == "") {
alert("Membership number can not be blank; Fill all fields marked as *");
document.getElementById("<%=txt_msn.ClientID%>").focus();
return false;
}
return true;
}
Here I am calling that function under ASP.NET Control
<asp:Button ID="btn_save_pi" runat="server"
Text="Save" OnClientClick="return validate()" OnClick="btn_save_pi_click" />
Now what I have observed that as the validation function returns false it executes the server side method i.e onclick event but on the return of true it do nothing. But when I switch the return value, means on empty field return true and on non empty field return false, then it works fine.
I am confuse in this why it is acting like that. It suppose to act like I have written above i.e. do nothing on false return and on true return execute server side processing.
Please explain this, it will help me to develop the further applications too.
Your code works perfectly fine for me in IE as well as FF.
So if it still gives you problem you can go for a approach with less problems using asp.net validation controls.
But if you still want to go for javascript validations of your own, use this:
http://docs.jquery.com/Plugins/Validation
You can go fancy with validation and make validations the way you want.
to understand it better, please go through the example given at the end or refer this:
http://jquery.bassistance.de/validate/demo/
Hope this helps....
So perhaps there is an actual solution, but I just do this little workaround to avoid the OnClientClick property altogether.
Hide your button:
style="display:none;"
Next to your button, stick in another "fake" button:
<input type="button" value="Save"
onclick="if (validate()) {
document.getElementById('<%=btn_save_pi.ClientID%>').click(); }" />
I have a image button in a page which can be triggered on mouse click, by default it gets triggered on enter press also which i want to disable.
I know about "UseSubmitBehaviour" attribute in asp:Button, is there a way to do the same in asp:ImageButton?
I will assume you have some sort of input controls and you don't want an enter keypress to auto submit when a user accident hits the enter key. If so you can attach a javascript onkeypress event to each control that you want to disable this behavior for.
function disableEnterKey(e)
{
var key;
if (window.event) key = window.event.keyCode; // Internet Explorer
else key = e.which;
return (key != 13);
}
// In your aspx file Page_Load do the following foreach control you want to disable
// the enter key for:
txtYourTextBox.Attributes.Add("OnKeyPress", "return disableEnterKey(event);");
If you need to disable the Enter key submitting form completely. case use the OnKeyDown handler on <body> tag on your page.
The javascript code:
if (window.event.keyCode == 13)
{
event.returnValue = false;
event.cancel = true;
}
With JQuery this would be much cleaner, easier and the recommended method. You could make an extension with:
jQuery.fn.DisableEnterKey =
function()
{
return this.each(function()
{
$(this).keydown(function(e)
{
var key = e.charCode || e.keyCode || 0;
// return false for the enter key
return (key != 13);
})
})
};
// You can then wire it up by just adding this code for each control:
<script type="text/javascript" language="javascript">
$('#txtYourTextBox').DisableEnterKey();
</script>
If you put your content in a asp:Panel you can use the DefaultButton Property to set a different button as the default so your image button wont be clicked.
<asp:Panel runat="server" ID="pnl_Test" DefaultButton="btn_Test2">
<asp:ImageButton runat="server" ID="btn_Test1" />
<asp:Button runat="server" ID="btn_Test2" />
</asp:Panel>
In this example the btn_Test2 will be clicked when you hit enter where normally btn_Test1 would be clicked
Use Kelsey's Answer (This answer is wiki'ed)
...but please note a few things when you implement it.
I'd recommend the plain old javascript method if you're not already using jQuery. if you do that method, just return (keynum != 13) don't do something silly like if(true) return true; else return false;
You don't have to assign onkeydown from the code behind. That can be done in the markup and it's a lot cleaner when you do.
Don't disable the enter key in your entire form. You can do it in your inputs only, but if you do it in the entire form you won't be able to add a carriage return in a textarea.
If you do use jQuery, I'd recommend adding a CSS class called "disableEnterKey" and assigning it to your form elements you want to disable, then calling Kelsey's jQuery method on $(".disableEnterKey") in the document ready.
Don't answer too similar to anyone on SO, even if you don't fully agree with the answer. And even if the answer was simple and thousands of people probably have done the samething. It's "copying". Which is similar to being a "cutter" or a "tattle tale"... which is bad.
(this answer has been community wiki'ed as this question thread has gotten silly)
Use an asp:image instead. Then place some javascript code in the onclick "javascript:document.getElementById('imageClicked').setAttribute('value', 'true'); document.myform.submit();"
Set a hidden field's value (using javascript) to tell the server side code that the image was clicked.
document.getElementById('imageClicked').setAttribute('value', 'true');
Then, at the end of handling the postback on the server reset the hiddenField's value:
document.getElementById('imageClicked').setAttribute('value', 'true');
The form will execute the first button it finds on the page when you hit enter. If you can move the ImageButton further down the page so it's no longer the first button in the markup, and use CSS to position it properly, this should fix your issue. I fixed the same exact thing last week and this worked for me. I went with this solution because it didn't require JavaScript to work properly.
you want something like
<form ...>
<!-- some code here -->
<button style='display:none' onclick='return false'>here comes the magic</button>
<button>normal button </button>
</form>
See the following link.This can be solved for all default button submit problem.
http://weblog.kevinattard.com/2011/08/aspnet-disable-submit-form-on-enter-key.html
Please Use This Code
<script type="text/javascript" language="javascript">
$(document).ready(function {
$("#<%=imageClicked.ClientID%>").prop('disabled',true)
});
</script>
I've got a checkbox that's set up as below:
<asp:CheckBox ID="myCheckbox" runat="Server" OnClick="showLoadingScreen(this.checked);" AutoPostBack="true" Text="Check me for more data!" />
The function showLoadingScreen is as below:
function showLoadingScreen(isChecked) {
if (isChecked)
{
document.getElementById('form1').style.display='none';
document.getElementById('img_loading').style.display='block';
}
else { return false; }
}
I've added the else clause in hopes that I can get it to only post back when the checkbox is checked, but it's posting back in either case.
I've got a grid on the page (inside form1) that has a set of data loaded into it on page load, but in order to add some extra data to it I've added this checkbox (its a longer running process, so I only want to load it on demand, not upfront). When it's checked I want to show the loading gif, postback, grab the data, and return. If the box gets unchecked I don't want to do anything, since leaving more than enough data on the page is perfectly fine (that is to say, the data displayed upfront is a subset of the data displayed when the checkbox is checked).
Is there any way to make it so the checkbox auto posts back on checked, but not on unchecked?
Edit: Using Dark Falcon's suggestion, I've modified the checkbox to look like:
<asp:CheckBox ID="myCheckbox" runat="Server" OnClick="return showLoadingScreen(this.checked);" AutoPostBack="true" Text="Include HQ Values" />
And the javascript to be:
function showLoadingScreen(checked) {
alert(checked);
if (checked)
{
document.getElementById('form1').style.display='none';
document.getElementById('img_loading').style.display='block';
document.form1.submit(); //my own addition, to get it to post back
}
else { return false; }
}
Now, it posts back on checked, but the box is not able to be unchecked anymore. As you can see I've added an alert to show the value being passed in. It's passing in the correct value when you uncheck the box (false), but then it somehow gets checked again.
It's not a huge issue, since there's really no reason to ever uncheck the box (since as I stated before, the dataset when checked is a superset of the unchecked dataset), but I'd still like to know why it's doing that. Any ideas?
Do not set AutoPostBack in this case. "AutoPostBack" means post back to the server any time the value of this control changes... which is NOT what you want.
Instead, use GetPostBackEventReference(myCheckbox,"") to get the appropriate postback script and call this from your showLoadingScreen method if the checkbox is checked.
For your onclick handler, you need to do:
return showLoadingScreen(this.checked);
Try to avoid using _doPostback as it is a hack which you will have to know what control ID is posting back and other parameters for that Javascript function from Microsoft ASP.NET. To understand what's happening behind the scene, you have to know why there is a postback and how to prevent the postback from happening.
Here's what's happening with an ASP.NET checkbox (ASP:Checkbox) when auto-postback is set:
<ASP:Checkbox runat="server" id="chkCheckbox" AutoPostback="true" onclick="return isDoPostback(this.checked);" ClientIdMode="static" ... />
generated HTML code is:
<input type="checkbox" ... id="..." onclick="return isDoPostback(this.checked);_doPostback(...);" .../>
The custom onclick event is appended to the beginning of the onclick event of the checkbox. No matter what you do, that prepended function call will execute. Worst off, if you have a return value, the _doPostback will never get executed.
This is what you really want to do (I use a mix of jQuery and native Javascript here):
var checkbox = $("#chkCheckbox");
...
checkbox .on("change", function(e)
{ if(this.checked)
{
var isConfirmedToContinue = confirm("Continue with Postback?");
if(!isConfirmedToContinue)
{ this.checked = false; //Uncheck the checkbox since the user canceled out
var onClickDelegate = this.onclick;
if(onClickDelegate)
{ var me = this;
this.removeEventListener("click", onClickDelegate); //Remove the onclick event so that auto-postback no longer happens
setTimeout(function()
{ //Add back the onclick delegate after 250ms
me.addEventListener("click", onClickDelegate);
}, 250);
this.onclick = null; //Remove the current onclick event by nulling it out
}
}
}
});
Try using a JS routine for checking whether it is checked, and if it is set to true, try doing:
_doPostBack(checkElementReference.name, "");
_doPostBack is responsible for performing posts to the server for controls that don't normally postback. You have to pass the name of the element, which on the server happens to be the UniqueID property for the server-side checkbox control.
I have a button control. Once the user clicks on it, the click event should fire and then the button should get disabled. How can I do this? I have the option to use JQuery or JavaScript or both.
Here is my button declaration:
<asp:Button
ID="Button1"
runat="server"
Text="Click Me"
onclick="Button1_Click"
/>
On the button click code behind, I have added a Response.Write(). That should get executed and then the button should be disabled
For whatever reason, the HTML spec dictates that disabled elements should not be included in POST requests. So, if you use JavaScript to disable the HTML element in the client-side onclick event, the input element will be disabled when the browser assembles the POST request, the server won't be properly notified which element raised the postback, and it won't fire server-side click event handlers.
When you set the UseSubmitBehavior property to false, ASP.NET renders an input element of type button instead of the regular input of type submit that the ASP.NET Button control normally generates. This is important because clicking a button element does not trigger the browser's form submit event.
Instead of relying on a browser form submission, ASP.NET will render a client-side call to __doPostBack() within that button element's onclick handler. __doPostBack will raise the postback explicitly, regardless of what POST data comes through in the request.
With the postback being raised independent of the browser submit event, you're freed of the previously mentioned HTML quirk. Then, you can set an OnClientClick of "this.disabled = true;", which will render as "this.disabled = true; __doPostBack('Button1', '');", and things will work as intended.
add an OnClientClick="this.disabled = true;" to your button.
If you are using Asp.net Ajax you might want to look at using PostBack Ritalin.
Have you tried this?
Add an OnClientClick="MyFunction();" to your .NET button.
Then in the .aspx page script tags you add the following JS function:
<script type="text/javascript">
function MyFunction()
{
window.setTimeout(function ()
{
// get the button/control to disable using your favourite clientside ...
// ... control grabbing code snippet ...
// ... eg. JQUERY $('Button1'), getElementById, etc.)
document.getElementsByName('Button1').Button1.disabled = true;
// I've used "getElementsByName" because .NET will render a button with
// ... a "name" attribute, and not an "id" attribute, by default
}, 1);
}
</script>
This gives the browser a chance to post back, followed by a quick button disable.
You need to be careful that the postback occurs before you disable the button through client script. This is a common gotcha with ajax and input boxes. Disabling an input box prevents the data from being sent from the browser, even if you can see text within it while it is disabled. The answer is that you need to use jquery for this to ensure the server-side code runs first before it is disabled.
-Oisin
// to disable
this.setAttribute('disabled', true);
// to enable
this.removeAttribute('disabled');
this is a cross browser solution
There is really cool event for body tag "<"body onBeforeunload="buttonId.disabled = true;" ">"
This event triggers right before form submits, in other words your data will be submitted correctly.
When using the "this.disabled = true" method make sure you check if the page is valid before disabling the control if you have validators on the page. If validation fails you won't be able to re-enable the control without reloading the page.
if (Page_IsValid) this.disabled = true;
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
function BeginRequestHandler(sender, args) {
document.getElementById('<%= lblMessage.ClientID %>').innerText = "Processing...";
document.getElementById('<%= btnSubmit.ClientID %>').innerText = "Processing";
args.get_postBackElement().disabled = true;
}
</script>
Add Script Tag in source page . change Id of button in code . You can disable the button till the process completes execution .
you can disable it server side
Button1.Enabled = false;
ASP.NET 2.0, testing in FF3 and IE7.
When I hit the 'enter' button from a text box the corresponding "OnClick" event for the first ImageButton in the page is fired. If I remove that image button, it fires the next ImageButton OnClick event on the page.
From the FireBug console, if I use JavaScript to submit the Form, this does not happen. But for whatever reason hitting enter from the textbox triggers the unrelated ImageButton event.
I found this question which had a similar problem, however the proposed answer to that solution doesn't work since ImageButtons do not have a "UseSubmitBehavior" property on them.
I don't understand why this event is firing. If I look at Request.Form, I can see that __EVENTTARGET is empty, and it is in fact posting the entire form contents (all of my textboxes), but also includes imageButton.x and imageButton.y key/value pairs.
Why is this? I suppose I could detect "enter" key presses from these text boxes with javascript, but my experience in the past is this behavior is highly variable between browsers. Any suggestions?
here's a more elegant solution
<asp:TextBox ID="TextBox1" runat="server"
onkeydown = "return (event.keyCode!=13);" >
</asp:TextBox>
read the entire post here
You could try setting a default button in an asp panel or on your form. This will let you control what happens when a user hits the enter key.
I'm having the same issue on my project.
This issue is caused because ASP.NET always will assume that the first element that inherits from IButton interface (Button and ImageButton) is the default button from the page.
Hipoteticaly, if you use an LinkButton instead of Button or ImageButton, this issue is solved.
You can find more information here on MSDN.
You can disable the Enter key from being pressed, so the user will have to click on of your ImageButtons. Just paste this javascript block onto your page:
<script type="text/javascript">
function stopRKey(evt) {
var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if ((evt.keyCode == 13) && (node.type=="text")) {return false;}
}
document.onkeypress = stopRKey;
</script>
Recently, I've been doing more on the client with web services and fewer postbacks. By moving my controls outside of the form element (or eliminating it altogether), the problem goes away. It's inserted by default on aspx pages, but it didn't occur to me until recently that I don't need it for much of what I do.
Its the default behaviour for an enter button press in a non text area to post back a form. You would have to handle it in a javascript method to stop the postback.
You'd just need to check the window.event.keyCode property to see if its equal to 13. If it is, reset it to 0.
function KeyPress()
{
if (window.event.keyCode == 13)
{
window.event.keyCode = 0;
}
}
I suppose I could detect "enter" key presses from these text boxes with javascript
That's what I did to get around that behaviour and it works great in IE7 and FF3. It's just a little unnatural.
Here is a generic exemple:
function TextBox1_KeyDown(sender, e)
{
var key;
if(window.event)
key = window.event.keyCode; //IE
else
key = e.which; //firefox
if(key == 13 && $("#TextBox1").val() != "")
{
WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("TextBox1", "", true, "", "", false, true));
}
return (key != 13);
}
I used WebForm_DoPostBackWithOptions because I needed validators to trigger. Otherwise, you might want to use __DoPostBack.
Here are the "prototypes":
function __doPostBack(eventTarget, eventArgument)
function WebForm_PostBackOptions(eventTarget, eventArgument, validation, validationGroup, actionUrl, trackFocus, clientSubmit)
{
this.eventTarget = eventTarget;
this.eventArgument = eventArgument;
this.validation = validation;
this.validationGroup = validationGroup;
this.actionUrl = actionUrl;
this.trackFocus = trackFocus;
this.clientSubmit = clientSubmit;
}
function WebForm_DoPostBackWithOptions(options)
Hope it helps.
P.S.: I used JQuery here but $get would be the same.
Here's an elegant solution I have found, in case anybody else has this problem (in case all other solution don't work for you, as they didn't work for me):
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Panel runat="server" DefaultButton="doNothingButton">
<ul id="shopping-list-ul">
</ul>
<asp:Button CssClass="invisible" runat="server" ID="doNothingButton" OnClientClick="return false;" />
</asp:Panel>
</ContentTemplate>
The textbox iself was inside the ul (generated by javascript).
Pressing enter will trigger the "doNothingButton", which will return false on client side, causing no postback at all!