How I can change label(lblSaved), when UpdateProgress is running?My label update after UpdateProgress. I need, when UpdateProgress is starting run to do label(lblSaved) visible false.
<asp:UpdateProgress ID="uprogAutoSave" AssociatedUpdatePanelID="upnlAutoSave" runat="server">
<ProgressTemplate>
<asp:Literal runat="server" Text="<%$ Resources:AutoSave %>" /></ProgressTemplate>
</asp:UpdateProgress>
...
<asp:UpdatePanel ID="UpdatePanel1" RenderMode="Inline" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="TimerAutoSave" />
</Triggers>
<ContentTemplate>
<asp:Label ID="lblSaved" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
You have to handel Ajax event from client-side using JavaScript or jQuery.
You have to handle two Ajax event at client side.
OnRequestStart
OnResponseEnd
The first method call at same time your Ajax request start and the second one called when your ajax request become in complete state.
In this methods you have to handle your label, and this all is JavaScript/jQuery so I assume that you will not get any problem to manage the label.
Related
I have following code:
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Button ID="btnSave" runat="server" Text="Submit"/>
<asp:Panel ID="pnlMyView" runat="server">
<asp:GridView Control here...
</Panel>
<asp:Panel ID="pnlInfo" runat="server" Visible="False">
<div>
Some information...
</div>
</Panel>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Update in progress...
</ProgressTemplate>
</asp:UpdateProgress>
<script language="javascript" type="text/javascript">
$(window).load(function() {
$("input:submit[id$='btnSave']").click(function() {
//jQuery code to validate gridview enteries...
})
});
</script>
Steps:
1.Refresh the page Or load page first time and clicked on Submit button to validate the entries in GridView
2.Validation done properly and save changes to database.
3.Made some changes in gridview entries and clicked on Submit button
4.Validation didn't take place and save the entries(i.e. wrong entries) in database.
5.Refresh the page i.e. pressing F5 Now everything working fine.
How to resolve issue at step 4.
-----------------PS----------------
Actually I have two panel pnlMyView and pnlInfo.So on page load I only make visible to pnlMyView and other is invisible.
Once if i move to pnlInfo and come to back on pnlMyView and submit Nothing validation take place.
Thanks
The problem is that your HTML gets reloaded and thus the event handler on the button gets lost.
You could try the following code which assures you that the handler stays in place:
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div id="root">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Button ID="btnSave" runat="server" Text="Submit"/>
<asp:Panel ID="pnlMyView" runat="server">
<asp:GridView Control here...
</Panel>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Update in progress...
</ProgressTemplate>
</asp:UpdateProgress>
</div>
<script language="javascript" type="text/javascript">
$(window).load(function() {
$("input:submit[id$='btnSave']").on("click", ".root", function() {
//jQuery code to validate gridview enteries...
})
});
</script>
What this does is register the handler differently. You need to wrap the UpdatePanel inside a div with class root. Then you register the handler like this:
$("input:submit[id$='btnSave']").on("click", ".root", function() {});
This tells jQuery to registere a handler on an element called root, but only execute it when the input:submit... is executed.
Since the div is not removed, it will still detect the handler even after you have replaced the HTML.
These types of events are called delegated events. You can read a more thorough explanation in the jQuery documentation: http://api.jquery.com/on/
Better use OnClientClick property of Button control:
<asp:Button ID="btnSave" runat="server" Text="Submit" OnClientClick="return validate()" />
function validate(){
//jQuery code to validate gridview enteries...
//if validation isn't succeeded return false, otherwise return true
}
Hey friends I got the solution.I used live event and now everything is working fine.
$("input:submit[id$='btnSave']").live("click", function(event) {
Thanks a all for your response
I have a GridView that is bound to a SQL Data source. I have put this inside an Update panel and want the contents to update at a specified interval. The problem is that if i change the data in the database, the GridView does not update itself, i have to manually refresh the page to view the new data.
What else do I need to do to get a GridView to refresh itself?
<asp:Timer ID="RefreshTimer" runat="server" Interval="10000"
ontick="RefreshTimer_Tick">
</asp:Timer>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="quad1"><uc1:MyWidget ID="MyWidget1" runat="server" /></div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="RefreshTimer" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
You have to call gridView.DataBind() on tick event
Use a Timer like this:
<asp:Timer ID="Timer1" OnTick="Timer1_Tick" runat="server" Interval="30000">
Follow this Auto-refresh update panel sample and should have no problem. Let me know if you do.
I'm trying to use some AJAX and ASP.Net together to enable me to run functions without having to refresh the whole page but i've stumbled across a problem in doing this
Here's my code
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="ddl1" runat="server" OnSelectedIndexChanged="update1" />
<asp:TextBox runat="server" ID="txt1" />
</ContentTemplate>
</asp:UpdatePanel>
And here's my code behind
Sub update1(ByVal sender As Object, ByVal e As EventArgs)
txt1.Text = Now.ToString
End Sub
The event doesn't fire because I don't have AutoPostBack="True" on my ddl but adding that to the ddl will postback the whole page.
Is there a way to avoid using AutoPostBack="True" so that it only updates the panel?
I know I can use an asp:Button to get around this but i'd really like to be able to use a ddl with OnSelectedIndexChanged
Thanks
If you want to avoid to send the whole viewstate to the server, you should look at callbacks.
Instead, if you want to avoid a refresh of the entire page, but with postback, this should work:
<asp:DropDownList ID="ddl1" runat="server" OnSelectedIndexChanged="update1" AutoPostBack="True" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostbackTrigger ControlID="ddl1" EventName="SelectedIndexChanged" />
</Triggers>
<ContentTemplate>
<asp:TextBox runat="server" ID="txt1" />
</ContentTemplate>
</asp:UpdatePanel>
Try creating a new page with same codes and different page name. Worked for me
<asp:ScriptManager ID="ScriptManager1" runat="server"/>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="chkStaySignedIn" EventName="Checked" />
</Triggers>
<ContentTemplate>
<asp:Label ID="lblPassword" runat="server" Text="Password" AssociatedControlID="txtPassword"/>
</ContentTemplate>
</asp:UpdatePanel>
EventName="Checked"
Can anyone provide me a link to complete list of event names while using ajax.
The checkbox's event name is CheckedChanged
It isn't a definitive list by any means, but this MSDN page lists the default event names for common controls that post back.
I have a page with some UpdatePanels, each one with its own button to update it. Since the update routines can take some time, I thought making them Asynchronous would help loading the page step by step.
But doing so, when I fire programatically the update routine of each panel, I get only the last UpdatePanel updated.
Here is an example of the code, with two UpdatePanels. There is the requirement that the update routine have to be fired on clientside pageLoad function.
Is it a bug or am I missing something in the code?
Thanks =)
<asp:UpdatePanel ID="Panel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox ID="Text1" runat="server" />
<asp:Button ID="Button1" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdatePanel ID="Panel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:TextBox ID="Text2" runat="server" />
<asp:Button ID="Button2" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
And the client-side code:
function pageLoad()
{
$('#Button1').click();
$('#Button2').click();
}
Here is why:
By default, when a page makes multiple
asynchronous postbacks at the same
time, the postback made most recently
takes precedence.
http://www.asp.net/ajax/documentation/live/tutorials/ExclusiveAsyncPostback.aspx
Here is a solution:
Handling Multiple Asynchronous Postbacks