GIF image as progressbar using AJAX modalpopupExtender
-
My GIF image doesn't stop rotating. It continues just like that. Also If there is some txtbox empty and is required still it shows up Progress and keeps on rotating. Here is my Code. Can anyone in here help me with this
<script language="javascript" type="text/javascript">
function StartProgressBar() {
var myExtender = $find('ProgressBarModalPopupExtender');
myExtender.show();
return true;
}
function StopProgressBar() {
var myExtender = $find('ProgressBarModalPopupExtender');
myExtender.hide();
return true;
}function Valid() { if (Page\_ClientValidate("Required") == true) { StartProgressBar() } else { alert("Please fill the Required fields"); } }
</script>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="Button" OnClientClick="Valid()" />
<div>
<cc1:ModalPopupExtender ID="ProgressBarModalPopupExtender" runat="server" BackgroundCssClass="ModalBackground" behaviorID="ProgressBarModalPopupExtender" TargetControlID="hiddenField" PopupControlID="Panel1" />
<asp:Panel ID="Panel1" runat="server" Style="display: none; background-color: #C0C0C0;"><asp:Image ID="Image3" ImageUrl="~/Images/712Blue.GIF" runat="server" AlternateText="" /> </asp:Panel> <asp:HiddenField ID="hiddenField" runat="server" />
</div>
Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSubmit.Click
If Page.IsValid Then
Thread.Sleep(300)
ProgressBarModalPopupExtender.Hide()
ClearAll()
End If
End SubYour help is much appreciated. Thanks Happy Coding!
-
My GIF image doesn't stop rotating. It continues just like that. Also If there is some txtbox empty and is required still it shows up Progress and keeps on rotating. Here is my Code. Can anyone in here help me with this
<script language="javascript" type="text/javascript">
function StartProgressBar() {
var myExtender = $find('ProgressBarModalPopupExtender');
myExtender.show();
return true;
}
function StopProgressBar() {
var myExtender = $find('ProgressBarModalPopupExtender');
myExtender.hide();
return true;
}function Valid() { if (Page\_ClientValidate("Required") == true) { StartProgressBar() } else { alert("Please fill the Required fields"); } }
</script>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="Button" OnClientClick="Valid()" />
<div>
<cc1:ModalPopupExtender ID="ProgressBarModalPopupExtender" runat="server" BackgroundCssClass="ModalBackground" behaviorID="ProgressBarModalPopupExtender" TargetControlID="hiddenField" PopupControlID="Panel1" />
<asp:Panel ID="Panel1" runat="server" Style="display: none; background-color: #C0C0C0;"><asp:Image ID="Image3" ImageUrl="~/Images/712Blue.GIF" runat="server" AlternateText="" /> </asp:Panel> <asp:HiddenField ID="hiddenField" runat="server" />
</div>
Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSubmit.Click
If Page.IsValid Then
Thread.Sleep(300)
ProgressBarModalPopupExtender.Hide()
ClearAll()
End If
End SubYour help is much appreciated. Thanks Happy Coding!
So you put a progress bar in a modal extender? Must people just use the updateProgress control. I do it in code, but it's been years since I built one on the webform, so I won't be much help on that. I don't know about the textbox issue. Create Modal Popup in Ajax UpdateProgress[^]
-
So you put a progress bar in a modal extender? Must people just use the updateProgress control. I do it in code, but it's been years since I built one on the webform, so I won't be much help on that. I don't know about the textbox issue. Create Modal Popup in Ajax UpdateProgress[^]
Of course Modal extender is in Update panel. It is an Ajax control. So it wont work if it is not in update panel. But issue here is I added a Validation group and checking in JavaScript. Even after checking Validation why is it still showing progress bar when validation failed. That is making progress bar to rotate continuously. But couldn't figure how to solve it.
Your help is much appreciated. Thanks Happy Coding!
-
Of course Modal extender is in Update panel. It is an Ajax control. So it wont work if it is not in update panel. But issue here is I added a Validation group and checking in JavaScript. Even after checking Validation why is it still showing progress bar when validation failed. That is making progress bar to rotate continuously. But couldn't figure how to solve it.
Your help is much appreciated. Thanks Happy Coding!
I said update progress, not update panel The update progress shows the progress content only during postback, and then it disappears. You attach it to the update panel. Animated gifs go round and round, that's what there suppose to do. Perhaps you mean that the image won't go away or hide, or the div element that contains the image won't hide or go
display: none
-
My GIF image doesn't stop rotating. It continues just like that. Also If there is some txtbox empty and is required still it shows up Progress and keeps on rotating. Here is my Code. Can anyone in here help me with this
<script language="javascript" type="text/javascript">
function StartProgressBar() {
var myExtender = $find('ProgressBarModalPopupExtender');
myExtender.show();
return true;
}
function StopProgressBar() {
var myExtender = $find('ProgressBarModalPopupExtender');
myExtender.hide();
return true;
}function Valid() { if (Page\_ClientValidate("Required") == true) { StartProgressBar() } else { alert("Please fill the Required fields"); } }
</script>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="Button" OnClientClick="Valid()" />
<div>
<cc1:ModalPopupExtender ID="ProgressBarModalPopupExtender" runat="server" BackgroundCssClass="ModalBackground" behaviorID="ProgressBarModalPopupExtender" TargetControlID="hiddenField" PopupControlID="Panel1" />
<asp:Panel ID="Panel1" runat="server" Style="display: none; background-color: #C0C0C0;"><asp:Image ID="Image3" ImageUrl="~/Images/712Blue.GIF" runat="server" AlternateText="" /> </asp:Panel> <asp:HiddenField ID="hiddenField" runat="server" />
</div>
Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnSubmit.Click
If Page.IsValid Then
Thread.Sleep(300)
ProgressBarModalPopupExtender.Hide()
ClearAll()
End If
End SubYour help is much appreciated. Thanks Happy Coding!
Just compare your code with mine, see how i did it here http://www.dotnetfunda.com/articles/show/733/how-to-use-updateprogress-control-aspnet-ajax[^]
Vuyiswa Maseko, Spoted in Daniweb-- Sorry to rant. I hate websites. They are just wierd. They don't behave like normal code. C#/VB.NET/ASP.NET/SQL7/2000/2005/2008 http://www.vuyiswamaseko.com vuyiswa[at]dotnetfunda.com http://www.Dotnetfunda.com