Category Archives: UpdateProgress

UpdateProgress

[RESOLVED]Javascript file handling?

Is it possible to have a fake file uploader in the sense that when the user "uploads" the file, instead of sending it to the server, some client-side Javascript will read the file, parse it into HTML, and then modify the DOM to display the parsed HTML on
a webpage, all without the server doing anything?

There is the new FileReader, part of the HTML 5 family but it’s support varies.
https://developer.mozilla.org/en-US/docs/Web/API/FileReader

Support for the FileReader and File can be seen at:

http://caniuse.com/#feat=filereader

http://caniuse.com/#feat=fileapi

Hi,

Check my blog post, it might be what u are after:

http://rajudasa.blogspot.in/2010/10/firefox-parsing-client-side-xml-file.html

Hi Faize,

Thanks for your post.

As for your problem, you could  refer to the following link which describes about  “read local file and display contents using javascript”.

Besides, I have tested the below sample code on my side, and I could read local text file and display contents in IE11. You could try it on you side.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta http-equiv='Content-type' content='text/html;charset=UTF-8'/>
    <script>
        function startRead() {
            // obtain input element through DOM 

            var file = document.getElementById('file').files[0];
            if (file) {
                getAsText(file);
            }
        }

        function getAsText(readFile) {
            var reader;
            try {
                reader = new FileReader();
            } catch (e) {
                document.getElementById('output').innerHTML =
                    "Error: seems File API is not supported on your browser";
                return;
            }

            // Read file into memory as UTF-8      
            reader.readAsText(readFile, "UTF-8");

            // Handle progress, success, and errors
            reader.onprogress = updateProgress;
            reader.onload = loaded;
            reader.onerror = errorHandler;
        }

        function updateProgress(evt) {
            if (evt.lengthComputable) {
                // evt.loaded and evt.total are ProgressEvent properties
                var loaded = (evt.loaded / evt.total);
                if (loaded < 1) {
                    // Increase the prog bar length
                    // style.width = (loaded * 200) + "px";
                    document.getElementById("bar").style.width = (loaded * 100) + "%";
                }
            }
        }

        function loaded(evt) {
            // Obtain the read file data    
            var fileString = evt.target.result;
            document.getElementById('output').innerHTML = fileString;
            document.getElementById("bar").style.width = 100 + "%";
        }

        function errorHandler(evt) {
            if (evt.target.error.code == evt.target.error.NOT_READABLE_ERR) {
                // The file could not be read
                document.getElementById('output').innerHTML = "Error reading file..."
            }
        }
    </script>
</head>
<body>
    <form>
        <input id="file" type="file" onchange="startRead()" />
        <h3>Progress:</h3>
        <div style="width: 100%; height: 20px; border: 1px solid black;">
            <div id="bar" style="background-color: #45F; width: 0px; height: 20px;"></div>
        </div>
        <h3>File contents:</h3>
        <pre>
			<code id="output">
			</code>
		</pre>
    </form>
</body>
</html> 

Hope it will be helpful to you.

Best Regards,

Fei Han

Displaying message while postback

Hi,

How can I display a message to the user while data control (e.g. Grigview, Formview) is populating from server ?

Thanks,

You’ll need to populate your gridview using ajax, updatepanel etc so the work can happen after the actual page has loaded, this lets you show a message until the ajax work has finished.  Or you can show a "please wait" page that redirects to your actual
page so the browser shows the waiting page until the actual page has returned from the server.

Hi shtrudel,

Thanks for your post.

The UpdateProgress control could provide status information about partial-page updates in UpdatePanel controls, and you can customize the default content and the layout of the UpdateProgress control. So you could use UpdateProgress control  to show that
an asynchronus method is working.

For more information about UpdateProgress Control, you could refer to the following link.

Besides, you could refer to this sample.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        #UpdatePanel1, #UpdateProgress1 {
            border-right: gray 1px solid;
            border-top: gray 1px solid;
            border-left: gray 1px solid;
            border-bottom: gray 1px solid;
        }

        #UpdatePanel1 {
            width: 200px;
            height: 200px;
            position: relative;
            float: left;
            margin-left: 10px;
            margin-top: 10px;
        }

        #UpdateProgress1 {
            width: 400px;
            background-color: #FFC080;
            bottom: 0%;
            left: 0px;
            position: absolute;
        }
    </style>


    <script runat="server">
        protected void Button_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(3000);
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div>
            <asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
                <ContentTemplate>
                    <%=DateTime.Now.ToString() %>
                    <br />
                    <asp:Button ID="Button1" runat="server" Text="Refresh Panel" OnClick="Button_Click" />
                </ContentTemplate>
            </asp:UpdatePanel>

            <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                <ProgressTemplate>
                    Update in progress...
                </ProgressTemplate>
            </asp:UpdateProgress>

        </div>
    </form>
</body>
</html>

Hope it will be helpful to you.

Best Regards,

Fei Han

Thank you for your answers,

I prefer not to use the ajax controls… maybe because I do not really understand what’s behind the scene’s

shtrudel

I prefer not to use the ajax controls

You are going to have to use some kind of AJAX-enabled approach to do what you want. If you prefer not to use the AJAX controls, you can use jQuery. 

[RESOLVED]New to Ajax – my first Test Form not behaving as expected

Hello - 

I’m new to AJAX and going through an example in a book. It’s a very simple exercise which I was hoping to evolve into something real-world. 

Problem is my panel know as pnlConfirmation is not being displayed once the timer runs out.  When I click the button and fire the event, the UpdateProgress panel does show as expected but once it’s done, pnlConfirmation is not displayed.
 I was hoping for a second set of eyes to point of the obvious error.  Thanks!!

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Panel ID="pnlForm" runat="server"> <br /><br /> <asp:Button ID="Button1" runat="server" Text="Do something awesome" OnClick="Button1_Click" /> </asp:Panel> </ContentTemplate> </asp:UpdatePanel> <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"> <ProgressTemplate> <asp:Panel ID="pnlProgress" runat="server"> <br /><br /> Doing something awesome now..... <br /><br /> </asp:Panel> </ProgressTemplate> </asp:UpdateProgress> <asp:Panel ID="pnlConfirmation" runat="server" Visible="False"> <br /><br /> Something awesome was done. <br /><br /> </asp:Panel>

…and…the button’s click event (C#):

    protected void Button1_Click(object sender, EventArgs e)
    {
        
        pnlConfirmation.Visible = true;
        pnlForm.Visible = false;
        System.Threading.Thread.Sleep(5000);

    }


What am I doing wrong?

The panel needs to be inside the updatepanel contenttemplate. 

Thanks but that didn’t seem to make a difference.  Like this?

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Panel ID="pnlForm" runat="server">
            <br /><br />
            <asp:Button ID="Button1" runat="server" Text="Do something awesome" OnClick="Button1_Click" />
            </asp:Panel>

             <asp:Panel ID="Panel1" runat="server" Visible="False">
                <br /><br />
                 Something awesome was done.
                <br /><br />
             </asp:Panel>

        </ContentTemplate>
    </asp:UpdatePanel>


    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
        <ProgressTemplate>
            <asp:Panel ID="pnlProgress" runat="server">
            <br /><br />
            Doing something awesome now.....
            <br /><br />
            </asp:Panel>
        </ProgressTemplate>
    </asp:UpdateProgress>

You now have Panel1; this was pnlConfirmation.

<facepalm />

Thanks!

UpdateProgress and the combination of a ListView with Modalpopupextender and Confirmbuttonextender

The UpdateProgress does not show when I’m using the combination of a ListView with Modalpopupextender and Confirmbuttonextender.

I want the UpdateProgress to show when I’m clicking the OKcontrolid button. And this is working fine:

<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:modalpopupextender id="Modalpopupextender1" runat="server" cancelcontrolid="ButtonDeleteCancel" okcontrolid="ButtonDeleleOkay" targetcontrolid="Button1" popupcontrolid="DivDeleteConfirmation" backgroundcssclass="ModalPopupBG" />
<asp:confirmbuttonextender id="Confirmbuttonextender1" runat="server" targetcontrolid="Button1" enabled="True" displaymodalpopupid="Modalpopupextender1" />

The page does it’s ClientSide magic with showing the PopUp, and when I click the OK button, the UpdateProgress starts fine.

As soon as I put it in a ListView ItemTemplate it does not work. The PopUp shows, but when I click on the OK button, the UpdateProgress does not show.

<asp:ListView runat="server" id="gwUnitInfo" GroupItemCount="1" DataSourceID="sqlUserRoles">
     <LayoutTemplate>
          <table class="gridview_TemplateComputer">
          <tr ID="groupPlaceholder" runat="server"></tr>
          </table> 
    </LayoutTemplate>
    <GroupTemplate>
         <tr id="productRow">
         <td ID="itemPlaceholder" runat="server"></td>
         </tr>
    </GroupTemplate>
    <itemtemplate>  
    <td class="cssItemLabel">
       <asp:Button ID="Button1" runat="server" Text="Button" />
       <asp:modalpopupextender id="Modalpopupextender1" runat="server" cancelcontrolid="ButtonDeleteCancel" okcontrolid="ButtonDeleleOkay" targetcontrolid="Button1" popupcontrolid="DivDeleteConfirmation" backgroundcssclass="ModalPopupBG" />
       <asp:confirmbuttonextender id="Confirmbuttonextender1" runat="server" targetcontrolid="Button1" enabled="True" displaymodalpopupid="Modalpopupextender1" />                            
    </td>                           
    </itemtemplate>
</asp:ListView>

Is there anyone who has seen the same thing? Is it a bug? and most important is there a whay I can solve this?

Thx for any reply :)

Lars

 

Hi,

This is an old post but I’m having a similar problem, so if you or anybody can provide some explanation or help I would appreciate.

I’m using a ListView and UpdateProgress works fine but if I define QueryStringField property in DataPager the updateProgress stops showing?! I wonder if it is a bug or if it get’s disabled for any reason.

Thanks.

You can refer this to show ModalPopup as an AJAX Progress Indicator

http://mattberseth.com/blog/2007/07/modalpopup_as_an_ajax_progress.html

[RESOLVED]Help on UpdateProgrss

Hi,

I have an update panel on my page..and an associated UpdateProgess also…

I want to show the update progress on Click of a button that is not there in the update panel….

can any one please help me with this…….

Simply add the button as an asyncpostbacktrigger in the updatepanel triggers.

Setting the AssociatedUpdatePanelID means the UpdateProgress control will only display if an async postback is caused by a controlinsidethe UpdatePanel.  That means triggers outside of the UpdatePanel itself won’t cause the UpdateProgress to display.

try deleting this AssociatedUpdatePanelID="UpdatePanel1"

That will work only if UpdatePanel1 does a postback. but in your case there is no postback from the UpdatePanel1.

try deleting that property and see if it works

http://vincexu.blogspot.in/2009/08/updateprogress-is-not-working-with.html

[RESOLVED]UpdateProgress spinner won't stop!!

hi

I have an UpdateProgress AJAX spinner which works ok when any updates occur within my UpdatePanel.

However I have an export button which carries out into excel. when the prompt save or cancel appear then i choose save the spinner doesnt stop at all.. can anyone help me.. how to stop the spinner of my progress stop if the excel is finished to export.

take a look here, it’s been solved.

http://forums.asp.net/t/1266920.aspx

[RESOLVED]AJAX Update Progress AND Animation (Maybe CSS question)

This is more likely a CSS question, but I am trying to get an update progress to display in the middle of the page when you update a form.

I am using animation to fade in and out when you update the panel, the panel fades to near white, but I would like to display the update progress animation gif I have, currently it displays at the top of the form, but I have created a div with the image
in it, and need to know:

1. If it is possible to display a dynamic div in the updateprogress

2. how to display it always in the middle of the viewport.

Thanks

Figured it out

Here is my code for those who want to do the same thing

<asp:UpdateProgress ID="MyUpdateProgress" runat="server" AssociatedUpdatePanelID="MyUpdatePanel" DisplayAfter="1">
        <ProgressTemplate>
            
            <div class="update_progress2">
            <h4>Updating</h4>
                <asp:Image ID="Image1" runat="server" ImageUrl="~/ui/images/animated/updating.gif" />
                <h4>Please Wait...</h4>
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>
<ajx:UpdatePanelAnimationExtender ID="MyUpdatePanelAnimationExtender" runat="server" TargetControlID="MyUpdatePanel">
		<Animations>
        <OnUpdating>
		<Sequence>
		<EnableAction AnimationTarget="BtnCreateAccount" Enabled="false" />
			<Parallel duration=".30" Fps="30">
				<FadeOut AnimationTarget="MyUpdatePanel" minimumOpacity=".1" />
			</Parallel>
		</Sequence>
	   </OnUpdating>
        <OnUpdated>
	   <Sequence>
			<EnableAction AnimationTarget="BtnCreateAccount" Enabled="true" />
			<Parallel duration=".30" Fps="30">
				<FadeIn AnimationTarget="MyUpdatePanel" minimumOpacity=".1" />
			</Parallel>
		</Sequence>
		</OnUpdated>
		</Animations>
	</ajx:UpdatePanelAnimationExtender>

CSS

div.update_progress2									{display:table;border:1px solid silver; border-radius:5px; background:#FFFFFF; width:228px !important; height:75px !important; position:fixed; left:44%; top:45%; margin:0px auto; border:none !important}
div.update_progress2 img									{width:208px; height:13px; margin:0px 10px; position:relative !important}
div.update_progress2 h4									{text-align:center; position:relative !important; color:#6C8CC7}

[RESOLVED]Showing Loading Animation While Page Is Loading

Hey Friends, 

I am trying to place a Loading Animation onto my page but have never done that before and have no idea where to start. I have a MasterPage where I have a Top/Side/Body contents. I would like to have a wait animation to appear when someone clicks on
a Page Tab(Navigation) or side panel shortcuts. I don’t know if the animation needs to be placed inside a Master Page or does it have to be placed inside each individual page? Also, How do you make it load right away before everything else and hide when the
page is fully loaded? Please help as I am not much familiar with page loading animation. This is what I tried but it does not work, I have tried placing it both inside the master page and single pages but it does not do what I expected it to do… What happens
is that the code behind gets executed first and then the asp code and it doesnt even display the image at all… I have also places Thread.Sleep(4000) in my Page Load to see if the image will be displayed and it doesnt… There is nothing worng with the code
I just think I am doing this incorrectly… Thanks much all for your kind help. 

<%@ Page Title="" Language="C#" MasterPageFile="~/DefaultView.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="monitor.Dashboard.Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="cntSidebar" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cntBody" runat="server">
    <script src="../jquery-1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#loadingImage').hide();
        });
    </script>
    <div id="loading">
        <img id="loadingImage" alt="loadingImage" src="../App_Themes/Sugar2006/images/loading.gif"/>
    </div>
</asp:Content>

Hi

I did exactly this earlier this week.

After researching quite a bit, the following link was by far the best method I could find:

http://blogs.visoftinc.com/2008/03/13/Modal-UpdateProgress-for-UpdatePanel-Revisited/

 

this thread has several methods discussed.

http://forums.asp.net/t/1142988.aspx/1

UpdateProgress control seems to be a good option.

Here is the link

http://stackoverflow.com/questions/7235722/display-a-gif-while-asp-net-page-loads

Thank you the man :) 

Basquiat

Hi

I did exactly this earlier this week.

After researching quite a bit, the following link was by far the best method I could find:

http://blogs.visoftinc.com/2008/03/13/Modal-UpdateProgress-for-UpdatePanel-Revisited/

 

It works when I click something within a page but when I click on a button that redirects to another page it does not load the image… Does it need to have a <trigger> under the update panel? 

add a loading image

Hello,

i’m using a currency widget found here : http://kabo.nu/currency_widget/

and here is the jscript : http://kabo.nu/currency_widget/currency_widget/js/jquery.currency_widget.js

Can someone help me to add a loading image to be displayed from the moment of submit to result.

$.ajaxSetup ({
                cache: false
            });
           
            var ajax_load = "<img class='loading' src='img/load.gif' alt='loading...' />";
$("#result")
                   
.html(ajax_load)

Hi,

You can use blockui plugin for this-

http://delicious.com/anupdg/blockui

Hai,

See if this can solve.

Have a div in your page

<div id="busyIcon">
  <img src="images/loading.gif" alt="loading" />
</div>

Style for the div is

visibility: hidden;
position: absolute;
left: 0px;
top: 0px;

Have two javascript functions as

function showBusyIcon()
{
 document.getElementById('busyIcon').style.visibility = "visible";
 document.getElementById('busyIcon').style.display = "block";
}

function HideBusyIcon()
{
 document.getElementById('busyIcon').style.visibility = "hidden";
 document.getElementById('busyIcon').style.display = "none";
}

And call thefunctions in your code as

showBusyIcon();

$.ajax(............

..............

)

hideBusyIcon();

Thanks.

Thanks for your help,

i have to do it using the script here : http://kabo.nu/currency_widget/currency_widget/js/jquery.currency_widget.js

This script generates also the html form. And i’m using razor syntax. How can i add the loading message inside this script?

[RESOLVED]How do show load in progress for a radiobuttonlist selection change?

I am using a radiobuttonList, when change selection, it takes sometime. I want to show a load in progress image while the change is in progress, what’s the best way to do it? I tried to add a div and runat="server", then in the beginning of the indexchange
add style display:block, at the end put display:none.

Didn’t work. I used updatepanel and updateprogress, didn’t work either. Can some one tell me a good way to do it?

Thanks.