I am working on an ASP.NET webforms page that has the following asp markup (with additional controls stripped out):
<asp:UpdatePanel ID="updatePanel1" runat="server">
<ContentTemplate>
<asp:LinkButton ID="lnkbtnPreviousTop" OnClick="LinkButtonPrevious_Click"
Text="Previous" runat="server">
</asp:LinkButton>
</ContentTemplate>
</asp:UpdatePanel>
Right now, if you click this LinkButton multiple times, the LinkButtonPrevious_Click event handler on the server side will fire as many times as the link was clicked. How can I make it so that the lnkbtnPreviousTop LinkButton is disabled after the first click, but the event handler still fires once and the UpdatePanel is refreshed?
I have tried adding this.disabled = true; to the OnClick attribute, but then the event handler code never gets hit.
Just call the postback directly in the onclick, something like:
lnkbtnPreviousTop.Attributes.Add("onclick", "this.disabled=true;" + Page.ClientScript.GetPostBackEventReference(lnkbtnPreviousTop, "").ToString());
can you share answer for solution disabled asp:LinkButton after first click?
#Michael Hornfeck
I try with functions javascript but i havn't answers
<script type="text/javascript">
function disabledLinkBringDataFlow() {
document.getElementById('btnBringDataFlow').setAttribute("disabled", "");
//document.getElementById("btnBringDataFlow").disabled = true;
}
</script>
Related
I have RadioButtonList & Listvie in my page. I am using update panel to avoid postback Now my radioButtonList works as filter for listview. My Problem is in my radiobuttonList I have to use clientIDmode=static but if I do that then my updatepanel has no use since there is full postback when radiobuttonList gets changed. How to solve this problem without removing clientIdmode=static. I seen some solution for kind of same post but really didn't understand. Please help me.
My code has following structure.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:RadioButtonList ID="areasList" CssClass="mark" AutoPostBack="true" runat="server" ClientIDMode="static" RepeatLayout="Flow">
</asp:RadioButtonList>
ListviewHere
</ContentTemplate>
</asp:UpdatePanel>
There is an issue with your script.
You script is not being called after postback.
So use as below,
<script type="text/javascript">
// below will execute after ajax postback
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
//script
}
// executes after page load first time
//script
</script>
You can set the ClientIDMode of the RadioButtonList to AutoID (or not specify the attribute in the markup if that is the default value) and use a binding expression in client code to get the actual ID of the control:
$("#<%= areasList.ClientID %>")
or
document.getElementById('<%= areasList.ClientID %>')
I am doing a project in asp.net. i have a panel which contains some field like txtbox ,buttons etc..I want to use jquery event on a asp.net button click which will open this panel by using jquery show() function and also perform some tasks in server side. Please help me.
The code is :
protected void btninsertfordeo_Click(object sender, EventArgs e)
{
// GridViewforcontact.Enabled = false;
PanelForInsert.Visible = true;
colvisible = true;
txtfaxnoextra.Focus();
if (colvisible == true)
{
GridViewforcontact.Columns[9].Visible = false;
}
colvisible = false;
}
You can use the OnClientClick property of the button to call your client-side function and OnClick to call your server code
<asp:Button ID="btninsertfordeo" runat="server" OnClientClick="functionToShowPanel()" OnClick="hlkContinue_Click" Text="Click"></asp:Button>
<script>
functionToShowPanel(){
$('#pnlToShow').show()
}
</script>
or without using OnClientClient you can probably do:
$('#<%=btninsertfordeo.ClientID %>').click(function(){
$('#pnlToShow').show()
}
Another option would be to use an UpdatePanel instead of jquery to show/hide elements on the page. This way you can control the visibility of your div from your code-behind. Add all the dynamic elements within the UpdatePanel's ContentTemplate and add your button as an AsynPostbackTrigger for the UpdatePanel to enable dynamic updating of our page.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btninsertfordeo" EventName="click" />
</Triggers>
<ContentTemplate>
<asp:Panel ID="PanelForInsert" runat="server" Visible="false">
//Your textboxes, buttons etc goes here
</asp:Panel>
<asp:Button ID="btninsertfordeo" runat="server" Text="Click" OnClick="btninsertfordeo_Click"></asp:Button>
</ContentTemplate>
</asp:UpdatePanel>
Here are links to documentation that will help you in understanding and implementing an UpdatePanel:
Introduction to the UpdatePanel
UpdatePanel Control Overview
UpdatePanel Class
I am creating a ModalPopupExtender inside a Web User Control.
When i click on the OK Button in the panel, which is showing as model popup, the Event Handeler of the button is not executing.
This problen does not occure when i do not use the Web User Control.
Here is the user control (.ascx) file code.
<script type="text/javascript" language="javascript">
function OkClicked(sender, e) {
__doPostBack('Button1', e);
}
</script>
<asp:Button ID="Button2" runat="server" Text="Show" />
<asp:Panel ID="Panel1" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</asp:Panel>
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
DropShadow="True" OkControlID="Button1" PopupControlID="Panel1"
TargetControlID="Button2" onokscript="OkClicked()">
</asp:ModalPopupExtender>
<p>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</p>
And the Event Handeler for the click event of the 'Button1' is
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = TextBox1.Text;
}
In the javascript you shouldn't put 'Button1' as the name of the control. Instead, on the PreRender event of your control, fill that out with this.Button1.ClientID .
ClientID is the unique identifier across the entire generated page of your button control, allowing the server to pinpoint exactly what control triggered the postback.
If this wasn't like that, you wouldn't be able to place multiple instances of a same control on one page.
In code:
<script type="text/javascript" language="javascript">
function OkClicked(sender, e) {
__doPostBack('<%= this.Button1.ClientID %>', e);
}
Couple of suggestions:
Do you have any kind of validation on this page. If so, then it's possible that when you click the ok button, that validation is failing. When you click the button, likely the ModalPopup Extender will close, and if validation fails it may cancel the event happening. If this is the case, add an attribute: CausesValidation="false"
If that doesn't work, you may add an attribute to MAKE it post back, I believe there's an attribute -> AutoPostBack="true".
#Joachim is correct that you'll need to use the clientID, but at the same time, I don't think you'll need to call javascript to run the backend code.
Also, you may consider putting this into an UpdatePanel so that you do an AJAX postback without sending the entire page back and forth when the page is posted back.
I have a page that has several ListBoxes that have some cascading filtering based on the selected values using an AutoPostBack. The form takes all the selected values and generates an excel doc by cross-page posting to a different ASPX. The problem is, after clicking submit once, it will continually fire the cross-page postback every time a selection has changed.
<asp:ScriptManager runat="server" />
<asp:UpdatePanel UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:ListBox ID="ParentItems" runat="server" SelectionMode="Multiple" AutoPostBack="true"></asp:ListBox>
<asp:ListBox ID="ChildItems" runat="server" SelectionMode="Multiple" AutoPostBack="true"></asp:ListBox>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Submit" runat="server" PostBackUrl="~/AnotherPageThatGeneratesAnExcelDoc.aspx" />
How do I cancel the cross-page postback from the ListBoxes' SelectedIndexChanged events?
Here's the event in the codebehind:
Protected Sub ParentItems_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles ParentItems.SelectedIndexChanged
'' do some filtering of the ChildItems ListBox
'' tried these but they do not work
''Submit.Enabled = False
''Submit.PostBackUrl = String.Empty
'' I also tried wrapping the button in a PlaceHolder and hiding/removing it, neither worked
''Buttons.Visible = False
''Buttons.Controls.Remove(Submit)
End Sub
This is my current solution using javascript. It works, but seems like a hack:
// using jQuery, add a click event that resets the form action
$("select[multiple]").click(function () {
this.form.action = this.form._initialAction;
});
Edit: adding a click event in the codebehind:
ParentItems.Attributes("onclick") = "this.form.action = this.form._initialAction;"
The problem is that using the PostbackUrl property resets the form action to a new URL, and your Ajax calls (or any subsequent postbacks) use whatever the current action of the form is.
Your solution doesn't work because the submit button isn't part of your UpdatePanel, so it never gets modified.
The easiest solution might be to move your Excel file generating code out of the page it's in, and into the page you're looking at, in the click handler of the button.
You also could probably include an iframe on the page you're looking at, and on submit, rather than going to a new page, set the source of the iframe to the Excel-generating page.
Both of these would avoid the need for using the PostbackUrl.
Here is my setup:
I have an asp.net button on a page --
<asp:Button id="btnSelectEmp" runat="server" Text="Select Employee" />
I have a .js file with the following jQuery click event --
$("input[id$='_btnSelectEmp']").click(function ($e) {
$("div[id$='_divEmpSearch']").css("display", "inline");
$e.preventDefault();
});
As you can see, clicking upon the button will set a div visible. Nothing special; not rocket science.
The div is wrapped with an asp.net update panel, and it contains an asp.net user control (.ascx)
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="divEmpSearch" runat="server" style="display: none;">
<uc:EmpSearch ID="ucEmpSearch" runat="server" />
</div>
// And a bunch of other controls that are updated according to whatever the user selects in the user control above
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ucEmpSearch" />
</Triggers>
</asp:UpdatePanel>
The user control above is also wrapped in an asp.net update panel, because it has to communicate with the server. Among other controls like textboxes and such, the user control has two buttons upon it: 1) an asp.net button that does a postback and 2) an asp.net button that does an asynchronous postback.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="btnSearch" runat="server" Text="Search" OnClick="btnSearch_Click" /
<br />
asp:Button ID="btnContinue" runat="server" Text="Select" OnClick="btnContinue_Click" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSearch" EventName="Click" />
<asp:PostBackTrigger ControlID="btnContinue" />
</Triggers>
</asp:UpdatePanel>
The button in the user control that does a postback is working great. I click it, a postback occurs and my div control is re-hidden. I can then click on the Select Employee button (the one that I supplied the code for at the very first of the question) and the jQuery click event is handled and the div will be reshown.
However, the button in the user control that does an asynchronous postback works also, but after it hides the div, if I then click on the Select Employee button the jQuery click event will not be handled.
What this tells me is that for some reason during an asynchronous postback to the page, something happens to the Select Employee button so that the jQuery click event no longer happens. Why?
Your button is replaced with a new one when your update panel comes back with new content, so this:
$("input[id$='_btnSelectEmp']").click(function ($e) {
Binds to the elements it finds at that time, instead you'll want .delegate() or .live() here to listen for click events from current and future elements, like this:
$("input[id$='_btnSelectEmp']").live("click", function ($e) {
$("div[id$='_divEmpSearch']").css("display", "inline");
$e.preventDefault();
});
Or a bit cheaper using .delegate():
$("#container").delegate("input[id$='_btnSelectEmp']", "click", function ($e) {
$("div[id$='_divEmpSearch']").css("display", "inline");
$e.preventDefault();
});
In this case #container should be a parent of the update panel, one that doesn't get replaced in the postback.
Use the live() function. live() delegates the click event to a parent element, so the element (in this case btnSelectEmp) doesn't need to exist at the time the event is bound.
$("#<%=btnSelectEmp.ClientID%>").live("click" function ($e) {
$("#<%=divEmpSearch.ClientID%>").css("display", "inline");
$e.preventDefault();
});
What is happening is the btnSelectEmp button is getting replaced by the asynchronous call and the new element has not been bound to an event handler.
Also, I've modified the jquery selector here to use the exact client id of the element. This will improve speed, plus I seem to recall certain selectors don't work with event delegation in certain versions of Jquery.
try live('click', function(){...}) instead of click(function(){...})
Wild guess : "_btnSelectEmp" is used more than once?