How do I disable a button in an ascx page? I know how to do it on an aspx page with:
btnSave.Attributes.Add("onclick",
"this.disabled=true;this.value='Please Wait...';needToConfirm=false;" +
ClientScript.GetPostBackEventReference(btnSave, "").ToString());
But the ClientScript function is not present in the ascx page.
You don't need the ClientScript in code behind, you can also have it directly in the button tag as OnClientClick attribute:
<asp:Button id="btnSave" runat="server" OnClientClick="this.disabled=true; this.value='Please Wait...'; needToConfirm=false;" Text="Save" />
You can access the ClientScript property using Page.ClientScript from your user control (ascx).
you can access ClientScript through the Page property of your control
Page.ClientScript.GetPostBackEventReference(btnSave, "")
Did you try: Page.ClientScript.GetPostBackEventReference?
Here's how I fixed the problem. In every page, I have three divs:
<div align="center" id="divWait" style="display:none"><asp:Label ID="lblSaveorCancel" runat="server"></asp:Label></div>
<div style="display:block" id="divMain">
---- page actual content here ------
</divMain>
<div id="divBut" style="text-align:center;display:block">
<asp:button id="SaveBtn" runat="server" CssClass="button" Text="Save" OnClientClick="return Validate('save');"/>
<asp:button id="CancelBtn" runat="server" CssClass="button" Text="Cancel" OnClientClick="return ShowWaitDiv('cancel');"/>
</div>
And then I added scripts:
function Validate(saveorcancel) {
----- validation checks for data on the page ------
}
function ShowWaitDiv(saveorcancel) {
var div = document.getElementById(divWait.id);
div.style.display = "block";
var div1 = document.getElementById(divMain.id);
div1.style.display = "none";
var div2 = document.getElementById(divBut.id);
div2.style.display = "none";
if (saveorcancel == 'save') {
document.getElementById('<%= lblSaveorCancel.ClientID %>').innerHTML = 'Saving data, please wait...';
}
else {
document.getElementById('<%= lblSaveorCancel.ClientID %>').innerHTML = 'Redirecting, please wait...';
}
return true;
}
Simple, quick, and the user sees the result of clicking a button immediately and cannot click any buttons again.
Related
I have a search form consisting of the following...
<asp:Panel DefaultButton="btnSearch" ... >
[...search criteria fields...]
<asp:Button ID="btnReset" OnClick="btnReset_Click" ... />
<asp:Button ID="btnSearch" OnClick="btnSearch_Click" ... />
</asp:Panel>
The desired behaviour is that pressing the Enter key should invoke btnSearch_Click (which is working thanks to the DefaultButton attribute in the asp:panel)
The problem is that when btnReset has focus, pressing Enter should invoke btnReset_Click instead (which it doesn't - it's always btnSearch).
Is this easily achievable somehow, or am I going to have to hack up some bespoke JS to intercept .NET's defaultButton event handler?
Thanks in advance.
ETA: Here's a reusable solution I went with based on HenryChuang's accepted answer below.
Add a custom attribute preventDefaultButton to panels.
<asp:Panel DefaultButton="btnSearch" preventDefaultButton="btnReset" >
[...search criteria fields...]
<asp:Button ID="btnReset" OnClick="btnReset_Click" ... />
<asp:Button ID="btnSearch" OnClick="btnSearch_Click" ... />
</asp:Panel>
Run the following jQuery on pageload.
$("div[preventDefaultButton]").each(function () {
var div = $(this);
var keypressEvent = div.attr("onkeypress");
var btn = $("input[id$=" + div.attr("preventDefaultButton") + "]");
btn.on("focus", { div: div }, function (event) {
event.data.div.attr("onkeypress", "");
});
btn.on("blur", { div: div, keypressEvent: keypressEvent }, function (event) {
event.data.div.attr("onkeypress", event.data.keypressEvent);
});
});
see the panel generate html
<div id="yourPanelClientID" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'btnSearch')">
so, when btnReset onfocus we break onkeypress event of Panel, add below to btnReset,
remember when btnReset onblur, change Panel keypress to oringinal
onfocus="document.getElementById('yourPanelClientID').onkeypress = '';"
onblur="funA();"
function funA() {
document.getElementById('yourPanelClientID').onkeypress = function () { return WebForm_FireDefaultButton(event, "btnSearch") };
}
like this
<asp:Button ID="btnReset"
onfocus="document.getElementById('yourPanelClientID').onkeypress = '';"
onblur="funA();"
onclick="btnReset_Click" .../>
you need to change DefaultButton attribute of your panel but this will work for only one at a time, better way would be to have Javascript to capture enter event and process accordingly.
One way can be having multiple panels, have a look at http://www.jstawski.com/archive/2008/09/23/multiple-default-buttons.aspx
I have a page with a form containing an element. I have the click event being handled client side by a Jscript function, however, the page is still reloading whenever I click the LinkButton, can this be avoided?
aspx
<body>
<form>
<asp:LinkButton runat="server" ID="thing" OnClientClick="return SomeFunction()" Text="Some Operation" />
</form>
</body>
JScript
function SomeFunction() {
document.getElementById('someText').innerText = 'SomeMessage';
return false;
}
SomeButton.Attributes.Add("onclick", "javascript:SomeFunction(); return false;");
Update: since your updated code is assigned function in ASPX page, you can use this method -
<asp:LinkButton runat="server" ID="thing"
OnClientClick="javascript:SomeFunction(); return false;"
Text="Some Operation" />
OR
<asp:LinkButton runat="server" ID="thing"
OnClientClick="return SomeFunction()" Text="Some Operation" />
function SomeFunction() {
document.getElementById('someText').innerText = 'SomeMessage';
return false; /**** Required *****/
}
To have the return false; working, you will have to add return before the Method Name.
ex. <asp:LinkButtun ID="IDHere" runat="server" OnClientClick="return SomeFunction()" />
I am using this code.This pop up window pops up when I clicks a button on the main page.Now I want the pop up window to be closed if the password is successfully changed and reload the main page,but if the password is not changed then refresh the pop up window again.
I used javascript for form validationenter code here
Here is the code.....
<asp:Textbox id="curnt_paswrd" textmode="Password" runat="server" size="30" />
<asp:Textbox id="new_paswrd" textmode="Password" runat="server" size="30" />
<asp:button ID="btnChange" class="submit-button"
OnClientClick="return validate()" runat="server" Text="Change"
onclick="btnChange_Click" />
You can do simply like this: When you return true the main page automatically refreshes.
function validate() {
var strOutput = window.showModalDialog('ChangePassword.aspx', null, "dialogWidth:750px; dialogHeight:190px; dialogHide:false; edge:raised; center:yes; help:no; scroll:no; status:no;resizable:no;");
if (strOutput == undefined)
return false;
else if (strOutput == '')
return false;
else return true;
}
On your popup page, in javascript:
function IsSavePasswordSuccess()
{
window.returnValue = '<%=hdnSaveClickStatus.Value%>';
window.close();
}
The hidden field will be set as. It will be set in your C# method.
<asp:HiddenField runat="server" ID="hdnSaveClickStatus" />
When you reload the that popup you can do something like this in script if the change was successful:
window.opener.location.reload();
window.close();
So for example using RegisterStartupScript:
ClientScript.RegisterStartupScript(GetType(), "CloseScript",
"window.opener.location.reload(); window.close();", true);
I have a radioButtonList with 2 items in it. A radiobutton with a "Yes" value and a radionButton with a "No" value.
Below that I have a panel which I want made visible when "Yes" radioButton is selected and hidden when "No" is selected. I had originally implemented this using the AutoPostBack attribute but I want to do it in Javascript so that it doesn't cause a postback. Here's the code. Any help would be greatly appreciated.
<asp:RadioButtonList ID="rbl1" runat="server" onClick="changed(this);" >
<asp:ListItem Value="Yes">Yes</asp:ListItem>
<asp:ListItem Value="No">No</asp:ListItem>
<asp:Panel ID="panel1" runat="server">
<--other controls here -->
</asp:Panel>
function changed(rbl) {
//not sure what to put in here
}
Thanks in advance,
Zaps
Here is a quick example I made up:
<!-- Used grouped radio buttons instead of the RadioButtonList as it is harder to deal with -->
<asp:RadioButton ID="rbYes" runat="server" Text="Yes" GroupName="YourGroupName" Checked="true" />
<asp:RadioButton ID="rbNo" runat="server" Text="No" GroupName="YourGroupName" />
<br /><br />
<!-- Use a div instead of a panel. Panels are just glorified divs. -->
<div id="divTest">
This is a test
</div>
<script type="text/javascript">
$(document).ready(function()
{
$('#<%= rbYes.ClientID %>').click(function() { $('#divTest').show(); });
$('#<%= rbNo.ClientID %>').click(function() { $('#divTest').hide(); });
});
</script>
function OnclickPanelHide() {
if (this.value == "No") {
document.getElementByID('<%=panel1.ClientID%>').style.display = "none";
}
else {
document.getElementByID('<%=panel1.ClientID%>').style.display = "block";
}
}
</script>
Raja There is some bug in your code i just removed it
If you add a class or determine the real id of "panel1", you can use jQuery to hide it easily:
$('idOfPanel').hide();
Or you without using jQuery, using the id of the div/panel:
idOfPanel.style.display = "none";
To redisplay:
$('idOfPanel').show();
Or
idOfPanel.style.display = "block";
try this:
if (this.value == "No")
{
document.getElementByID('<%=panel1.ClientId%').style.display = "none";
}
else
{
document.getElementByID('<%=panel1.ClientId%').style.display = "block";
}
Hope it helps.
if you don't mind doing a partial postback, you can also throw your code into an UpdatePanel (assuming that you don't want to postback so that the entire page doesn't have to go through a page life-cycle).
I followed several web resources to understand how to show a popup from client side, and I made this code:
<asp:ImageButton runat="server" ID="btnOk" ImageUrl="imagens/btnAlterar.gif" OnClientClick="btnOkClick()" />
<asp:LinkButton runat="server" ID="dummyForPopup" Visible="false"/>
<ajaxToolKit:ModalPopupExtender runat="server" BehaviorID="btnOkPopupBehavior" ID="MPXtender" TargetControlID="dummyForPopup" PopupControlID="pnlUpdateUserModal" BackgroundCssClass="modalBackground" OkControlID="btnCloseRequestUserUpdate" OnOkScript="userUpdReq_onOk()" />
function btnOkClick()
{
if(validateAll())
{
var behavior = $find('btnOkPopupBehavior');
if (behavior)
{
behavior.show();
}
else
{
var lblOutput = $get('<%= lblOutput .ClientID %>');
lblOutput .innerText = 'Couldn't find popup';
}
}
}
previously I had the modal popup linked to the ok button, it was working pretty well. Now I need some validation before opening the popup, and this code is not working anylonger =/
1) Your dummy button has to be visible = true, otherwise the javascript doesn't work properly. So set visible = true but disaply none with css:
<asp:LinkButton runat="server"
ID="dummyForPopup" style
="display:none" Visible="true" />
2) lblOutput .innerText = 'Couldn't find popup'; is a javascript error. You need to change it to: "Couldn't find popup"; (or use ')
3) OnClientClick="btnOkClick()" should really say: OnClientClick="btnOkClick(); return false;"
4) Look for any other javascript errors on your page because those will stop the popup from workign properly.