I have an UpdatePanel and inside the update panel I have a button. The updatepanel also has an updateprogress control tied to it in order to display a loading graphic when the updatepanel does a postback.
If I click the button in the update panel then the progress loader shows up just fine. However, if I select the button with jQuery and do .click() the loader doesn't show up. The panel does post back and load content correctly but the progress loader doesn't trigger.
Any ideas why this would be?
I just have tried your scenario. It works fine here.
Here is the html
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:UpdateProgress runat="server" ID="UpdateProgress1">
<ProgressTemplate>
<img src="Images/ajax-loader.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<input id="btnTest" title="JQuery Click" onclick="ClickButton1()" type="button" value="JQuery Click" />
<script type="text/javascript">
function ClickButton1() {
// alert('#<%=Button1.ClientID %>');
$('#<%=Button1.ClientID %>').click();
}
</script>
Here is the back end code to show loading image for 5 seconds
protected void Button1_Click(object sender, EventArgs e)
{
Thread.Sleep(5000);
}
I never did find the answer to this question but it doesn't matter. I learned that update panels only make one request at a time for a reason. The page life-cycle and viewstate cannot be broken, therefore asynchronous requests can only be made one at a time.
MVC for the win.
Related
I have an update panel and update progress with a PostBackTrigger Event. But update progress is not showing when i am clicking on the button. please find the below sample code
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="updatepanelDropDownTaskType" CssClass="Token-setup-popup" DynamicLayout="true">
<ProgressTemplate>
<div id="loading" class="loading">
<asp:Image runat="server" ID="imgBusyIndicator" ImageUrl="~/images/busy-indicator.gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="updatepanelDropDownTaskType" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:PostBackTrigger ControlID="btnExport" />
</Triggers>
<ContentTemplate>
<asp:Button ID="btnExport" runat="server" Text="Export To CSV" CssClass="button" CausesValidation="true" onclick="btnExport_Click" ClientIDMode="Static"/></asp:Button>
</ContentTemplate>
</asp:UpdatePanel>
My code behind
HttpResponse Response = System.Web.HttpContext.Current.Response;
Response.ClearHeaders();
Response.AppendHeader("Content-Disposition", "attachment; filename=" + FileName);
Response.ContentType = FileType;
Response.Write(content);
HttpContext.Current.ApplicationInstance.CompleteRequest();
Well Your code is Okay. Problem is with your Triggers which you are using in UpdatePanel.
Microsoft says
The UpdateProgress control renders a <div> element that is
displayed or hidden depending on whether an associated UpdatePanel
control has caused an asynchronous postback. For initial page
rendering and for synchronous postbacks, the UpdateProgress
control is not displayed.
See more details on MSDN
So you are using PostBackTrigger in your UpdatePanel which will cause a synchronous postback and UpdateProgress will not show up .
<Triggers>
<asp:PostBackTrigger ControlID="btnExport" />
// Incorrect
</Triggers>
Change it to
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnExport" />
// Correct
</Triggers>
And this will show up your UpdateProgress and will work as you are expecting.
As you have mentioned in your comments you are performing downloading as well on your Grid. Same way you could register your Button with ScriptManager. This will register your button and will aware of download button while asynchronous postbacks.
protected void GridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
Button btnExport = e.item.FindControl("btnExport") as Button;
if (btnExport != null)
{
((ScriptManager)this.Page.Master.FindControl("ID of your Script manager")).RegisterPostBackControl(downloadDocColumn);
// In Above line i assumed Script Manager is placed on Your master page.
}
}
}
Hope this helps...
I wrote an "Ajaxable Panel" (term explained in blog post) that may be helpful in your scenario.
http://leftyftw.wordpress.com/2011/10/01/an-ajaxable-panel/
It was geared towards SharePoint, but is perfectly applicable here.
Finally i acheived this task, with the help of iframe and endrequestHandler of sys.webforms. i explained clearly in my blog , please find the link http://bhuvanram.wordpress.com/. The Complete method has to be called in Iframe instead of calling in the same page
Try adding below to your web.config file under system.web
<xhtmlConformance mode="Transitional"/>
It may fix your problem if code is perfect.
Vote as answer if it fix your issue.
I have a div inside an UpdatePanel, this div is shown when a use click on an edit link. The submit buttons to save are inside this div. Now when the use click on the submit button everything is fine except that this div is automatically hidden! the visibility is changed client side using jQuery's show().
Why is the UpdatePanel hiding my div even though it was shown by me? I have tried to set the runat='server' and enableing viewstate but I am getting the same result.
How do I just tell the UpdatePanelto leave thediv` as it is prior to the submit?
Here is a mini project that shows the problem:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
edit
</div>
<div id="edit-div" style="display:none; border: 2px black solid;">
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
<script>
$(document).ready(function(){
$('#edit-link').on('click', function () {
$('#edit-div').show();
});
});
</script>
The code for the submit button:
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = DateTime.UtcNow.ToString();
}
The simplest solution to this problem would be: -
don't use jQuery to show edit-div
make edit-div a server control
convert your edit to an <asp:LinkButton> control, and in its server-side click event, show your edit div
The problem is that the UpdatePanel is restoring the original state as per the markup for the page; edit-div is not a server control and you are showing it via client script, the UpdatePanel is unaware of this and will always return you the original markup.
There are ways to get jQuery to play nice with UpdatePanels in these scenarios, but it is more involved than the simple solution above.
Hope that helps.
I have a gridview where I have button for each row. After clicking this button, the Modal PopUp Extender Panel is opened (with PanelName.Show()). The Panel contains a user control, which shows some labels, textboxes,etc. with an additional info binded form SqlDataSource. Until this point it works well. But, when I click another button, the panel is purely shown but the content is not refreshed (based on which button is clicked, some details info should be shown). Basically, the method SqlDataSource_Selecting is called only for the panel popup showing but not anymore.
How can I force panel to be refreshed (reloaded) after each PanelName.Show()??
Thanks in advance.
If I'm understanding your question correctly, I think the problem is that you just need to re-Bind your data bound controls after the user clicks the button to change the Selected item. You can use [ControlName].DataBind() to do that. Does that make sense?
It depends on whether the control(s) you want to refresh are DataBound() or not.
In other words, can you force the control to reload by using a DataBind() method call to force the control to reload itself, with either the same or new data?
Most GUI controls have the DataBind() method, but it's useless if the control is not actually using data to work!
This is why in your case your panel is not "refreshed" with new data because using a DataBind() on the panel does nothing. Using a databind() on the entire GridView is a different story and should work. Maybe place an UPDATEPANEL around the whole lot? If you do you have to be careful your normal edits and other Commands on the rows will continue to work.
However, What you can do is place the modalpopupextender inside your TemplateField, and using a "trick", you can keep your server post backs and still fire the popup panel.
ie
<asp:UpdatePanel ID="upADDMAIN" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="btnADD" runat="server" Text="NEW LOGIN" BackColor="Blue" Font-Bold="True" ForeColor="#FFFFCC" OnClick="btnADD_Click" />
<asp:Button ID="btnDUM" runat="server" style="display:none" />
<div style="height:20px">
</div>
<ajaxToolkit:ModalPopupExtender ID="mpeADD" runat="server"
targetcontrolid="btnDUM"
popupcontrolid="upADD"
backgroundcssclass="modelbackground">
</ajaxToolkit:ModalPopupExtender>
<asp:UpdatePanel ID="upAdd" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlADD" runat="server" Width="700px" HorizontalAlign="Center" CssClass="auto-style10" Height="200px">
..
..
<div id="puFTR" class="auto-style17" style="vertical-align: middle">
<asp:Button id="btnOK" runat="server" Text="OK" style="width: 80px" OnClick="btnOK_Click" />
<asp:Button id="btnCAN" runat="server" Text="CANCEL" style="width: 80px" OnClick="btnCAN_Click" CausesValidation="False" />
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</asp:UpdatePanel>
As you may see, the btnDUM control is a Dummy to get the MPE to work, but it's not actually used as it's hidden by the style="display:none" tag.
However, the btnADD does work because it calls a Click() method on the server side which does the refresh of data on your new row. You may have to use a little jScript to pass the ROWINDEX into the Click() method for it to work with a GridView.
Incidentally, the Click() method in my case "controls" the MPE manually...
protected void btnADD_Click(object sender, EventArgs e)
{
ClearADDform();
mpeADD.Show();
}
protected void ClearADDform()
{
txtLOGIN.Text = string.Empty;
cbISActive.Checked = true;
txtPWD.Text = string.Empty;
ddlAgent.SelectedIndex = -1;
}
In my case, the above code example is outside a GridView, so you'll need to adjust.
But the point is, you can still have Server Side calls using Ajax popups!
Good luck.
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 am having an issue when a page contains multiple ModalPopups each containing a ValidationSummary Control.
Here is the functionality I need:
A user clicks a button and a Modal Popup appears with dynamic content based on the button that was clicked. (This functionality is working. Buttons are wrapped in UpdatePanels and the partial page postback calls .Show() on the ModalPopup)
"Save" button in ModalPopup causes client side validation, then causes a full page postback so the entire ModalPopup disappears. (ModalPopup could disappear another way - the ModalPopup just needs to disappear after a successful save operation)
If errors occur in the codebehind during Save operation, messages are added to the ValidationSummary (contained within the ModalPopup) and the ModalPopup is displayed again.
When the ValidationSummary's are added to the PopupPanel's, the ModalPopups no longer display correctly after a full page postback caused by the "Save" button within the second PopupPanel. (the first panel continues to function correctly) Both PopupPanels are displayed, and neither is "Popped-Up", they are displayed in-line.
Any ideas on how to solve this?
EDIT: Functionality in each Popup is different - that is why there must be two different ModalPopups.
EDIT 2: Javascript error I was receiving:
function () {
Array.remove(Page_ValidationSummaries, document.getElementById(VALIDATION_SUMMARY_ID));
}
(function () {
var fn = function () {
AjaxControlToolkit.ModalPopupBehavior.invokeViaServer("MODAL_POPUP_ID", true);
Sys.Application.remove_load(fn);
};
Sys.Application.add_load(fn);
}) is not a function
Missing ";" in injected javascript. see answer below
Image of Error State (after "PostBack Popup2" button has been clicked)
ASPX markup
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<%--*********************************************************************
Popup1
*********************************************************************--%>
<asp:UpdatePanel ID="Popup1ShowButtonUpdatePanel" runat="server">
<ContentTemplate>
<%--This button will cause a partial page postback and pass a parameter to the Popup1ModalPopup in code behind
and call its .Show() method to make it visible--%>
<asp:Button ID="Popup1ShowButton" runat="server" Text="Show Popup1" OnClick="Popup1ShowButton_Click"
CommandArgument="1" />
</ContentTemplate>
</asp:UpdatePanel>
<%--Hidden Control is used as ModalPopup's TargetControlID .Usually this is the ID of control that causes the Popup,
but we want to control the modal popup from code behind --%>
<asp:HiddenField ID="Popup1ModalPopupTargetControl" runat="server" />
<ajax:ModalPopupExtender ID="Popup1ModalPopup" runat="server" TargetControlID="Popup1ModalPopupTargetControl"
PopupControlID="Popup1PopupControl" CancelControlID="Popup1CancelButton">
</ajax:ModalPopupExtender>
<asp:Panel ID="Popup1PopupControl" runat="server" CssClass="ModalPopup" Style="width: 600px;
background-color: #FFFFFF; border: solid 1px #000000;">
<%--This button causes validation and a full-page post back. Full page postback will causes the ModalPopup to be Hid.
If there are errors in code behind, the code behind will add a message to the ValidationSummary,
and make the ModalPopup visible again--%>
<asp:Button ID="Popup1PostBackButton" runat="server" Text="PostBack Popup1" OnClick="Popup1PostBackButton_Click" />
<asp:Button ID="Popup1CancelButton" runat="server" Text="Cancel Popup1" />
<asp:UpdatePanel ID="Popup1UpdatePanel" runat="server">
<ContentTemplate>
<%--*************ISSUE HERE***************
The two ValidationSummary's are causing an issue. When the second ModalPopup's PostBack button is clicked,
Both ModalPopup's become visible, but neither are "Popped-Up".
If ValidationSummary's are removed, both ModalPopups Function Correctly--%>
<asp:ValidationSummary ID="Popup1ValidationSummary" runat="server" />
<%--Will display dynamically passed paramter during partial page post-back--%>
Popup1 Parameter:<asp:Literal ID="Popup1Parameter" runat="server"></asp:Literal><br />
</ContentTemplate>
</asp:UpdatePanel>
<br />
<br />
<br />
</asp:Panel>
<br />
<br />
<br />
<%--*********************************************************************
Popup2
*********************************************************************--%>
<asp:UpdatePanel ID="Popup2ShowButtonUpdatePanel" runat="server">
<ContentTemplate>
<%--This button will cause a partial page postback and pass a parameter to the Popup2ModalPopup in code behind
and call its .Show() method to make it visible--%>
<asp:Button ID="Popup2ShowButton" runat="server" Text="Show Popup2" OnClick="Popup2ShowButton_Click"
CommandArgument="2" />
</ContentTemplate>
</asp:UpdatePanel>
<%--Hidden Control is used as ModalPopup's TargetControlID .Usually this is the ID of control that causes the Popup,
but we want to control the modal popup from code behind --%>
<asp:HiddenField ID="Popup2ModalPopupTargetControl" runat="server" />
<ajax:ModalPopupExtender ID="Popup2ModalPopup" runat="server" TargetControlID="Popup2ModalPopupTargetControl"
PopupControlID="Popup2PopupControl" CancelControlID="Popup2CancelButton">
</ajax:ModalPopupExtender>
<asp:Panel ID="Popup2PopupControl" runat="server" CssClass="ModalPopup" Style="width: 600px;
background-color: #FFFFFF; border: solid 1px #000000;">
<%--This button causes validation and a full-page post back. Full page postback will causes the ModalPopup to be Hid.
If there are errors in code behind, the code behind will add a message to the ValidationSummary,
and make the ModalPopup visible again--%>
<asp:Button ID="Popup2PostBackButton" runat="server" Text="PostBack Popup2" OnClick="Popup2PostBackButton_Click" />
<asp:Button ID="Popup2CancelButton" runat="server" Text="Cancel Popup2" />
<asp:UpdatePanel ID="Popup2UpdatePanel" runat="server">
<ContentTemplate>
<%--*************ISSUE HERE***************
The two ValidationSummary's are causing an issue. When the second ModalPopup's PostBack button is clicked,
Both ModalPopup's become visible, but neither are "Popped-Up".
If ValidationSummary's are removed, both ModalPopups Function Correctly--%>
<asp:ValidationSummary ID="Popup2ValidationSummary" runat="server" />
<%--Will display dynamically passed paramter during partial page post-back--%>
Popup2 Parameter:<asp:Literal ID="Popup2Parameter" runat="server"></asp:Literal><br />
</ContentTemplate>
</asp:UpdatePanel>
<br />
<br />
<br />
</asp:Panel>
Code Behind
protected void Popup1ShowButton_Click(object sender, EventArgs e)
{
Button btn = sender as Button;
//Dynamically pass parameter to ModalPopup during partial page postback
Popup1Parameter.Text = btn.CommandArgument;
Popup1ModalPopup.Show();
}
protected void Popup1PostBackButton_Click(object sender, EventArgs e)
{
//if there is an error, add a message to the validation summary and
//show the ModalPopup again
//TODO: add message to validation summary
//show ModalPopup after page refresh (request/response)
Popup1ModalPopup.Show();
}
protected void Popup2ShowButton_Click(object sender, EventArgs e)
{
Button btn = sender as Button;
//Dynamically pass parameter to ModalPopup during partial page postback
Popup2Parameter.Text = btn.CommandArgument;
Popup2ModalPopup.Show();
}
protected void Popup2PostBackButton_Click(object sender, EventArgs e)
{
//***********After This is when the issue appears**********************
//if there is an error, add a message to the validation summary and
//show the ModalPopup again
//TODO: add message to validation summary
//show ModalPopup after page refresh (request/response)
Popup2ModalPopup.Show();
}
This is an issue with using both ValidationSummary and ModalPopup.
see here: http://ajaxcontroltoolkit.codeplex.com/WorkItem/View.aspx?WorkItemId=12835
The problem is that there is a missing ";" between the two injected scripts.
Their solution is to create/use a custom server control that inherits from ValidationSummary, that injects a ";" into the page startup script to fix the bug:
[ToolboxData("")]
public class AjaxValidationSummary : ValidationSummary
{
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), this.ClientID, ";", true);
}
}
Put all the <asp:ValidationSummary controls at the end of the document.
Error will be resolved.
Did you seto a different "ValidationGroup" of each popup (ValidationSummary + validators) ?
it seems there is bug in modal pop extender with validation summary in panel. to avoid the scenario always put the validation summary modal popup extender and panel at the bottom of code.
add the respective code at bottom of page
<%--This button causes validation and a full-page post back. Full page postback will causes the ModalPopup to be Hid.
If there are errors in code behind, the code behind will add a message to the ValidationSummary,
and make the ModalPopup visible again--%>
<%--*************ISSUE HERE***************
The two ValidationSummary's are causing an issue. When the second ModalPopup's PostBack button is clicked,
Both ModalPopup's become visible, but neither are "Popped-Up".
If ValidationSummary's are removed, both ModalPopups Function Correctly--%>
<%--Will display dynamically passed paramter during partial page post-back--%>
Popup1 Parameter: