in part of my web page, I have couple of asp:image Thumbnails, onclick I use ajax modal popup extender to show the imgae in full size which are working fine, what I need to add is to have a processing image or indicator both in thumbnail and modal popup extender,
I also have ajax autocomplete that is working fine, I need to add some indicator or processing image to it as soon as user start typing a word.
any idea?
Thanks in advance
You can use an update progress control to display a progress template within your update panel. It displays the contents of the ProgressTemplate tag whenever a postback occurs:
<asp:UpdateProgress runat="server" id="UpdateProgress" AssociatedUpdatePanelID="SomePanel" >
<ProgressTemplate>
<img src="processing.gif" alt="Processing" />
</ProgressTemplate>
</asp:UpdateProgress>
Also, I've found Preloaders useful as a source of animated GIFs for this purpose.
Look at http://www.ajaxload.info/. There are a ton of images there. Once the user types in some letters, however many you need, then display the ajax loader gif next to the textbox.
Assuming that you want the loader/indicator within control, so, one way could be to subclass the PopupExtender control, add asp:UpdateProgress, and put a loader.img in there.
Related
I have 2 aspx files in my project. The first.aspx page has some content on it and when I click on a button, it will launch a frame (second.aspx that only has code to show a calendar) on the same page.
Now once that calendar(second.aspx) loads on first.aspx, I want to click a link on the calendar that will .show() a hidden DIV on the first.aspx page.
How do I access code cross pages? In other words, how can I write some code in second.aspx that will affect first.aspx.
What you're asking for is not really possible. You're probably approaching it the wrong way. What you should do is turn your calendar page into a user control so that it can be used seamlessly in first.aspx.
Here is how to get started with user controls in asp.net:
After you turn it into a user control there are different approaches to getting access to the properties of the user control from your page. Here is one approach using the FindControl method.
Hope that helps.
The easiest solution would be to show and hide your div with jquery. Simple give your div a class like:
<div class="myCalendarDiv" style="display:none" />
And your Button should look like this:
<asp:Button id="myButton" OnClientClick="return ShowCalendar();" runat="server" />
<script type="text/javascript">
function ShowCalendar() {
$(".myCalendarDiv").show();
return false;
}
</script>
Another way would be instead of creating a seprate webpage for the calendar, as proposed you can use a jquery dialog, or make a usercontrol and embedd it on the same page.
(Posted on behalf of the OP).
So since I was dealing with an Iframe, I found out that you can target the parent window which would be first.aspx.
I used "window.parent.MYFUNCTION();" to call my JavaScript function on first.aspx and show the div.
I want to load HTML content in a panel when a button is clicked. The content is generated from the c# code by fetching the database.
Currently I have to load the content on page load in the panel and make panel visible on button click. But that makes the website speed very low. So please tell how can I load html content on demand in panel?
The code to be written in the panel on button click should be this:
<p><%=databaseFuncs.getName() %></p>
So as you can see I want to things to happen on Button Click: First the C# code should be executed than it should be encapsulated in paragraph tag and then written to the panel. One by one for all database rows this should be repeated. Please help.
Also note than I don't want to use custom asp.net controls.
Just make the
databaseFuncs
public and
databaseFuncs.getName()
public and your code should work...
If the code is inside runat="server" then just use '#' instead of '='
First of all hi too member
now my 1st talk i had one ajax control tool kit tht doesnt work on the vs 2008
so please help me for tht and
other problem I had make one modal pop code for the site but it nt working properly
mean when I click on the button it will only display Loader image but it did nt display tht page or div tag which cover the whole page with black color
so i need that back ground color div tag
Some please help me
I am badly stuck with this problem
in advance thank you
If I have deciphered your post correctly, you can show the ModalDialog but it doesn't "color" the rest of the page, therefore making the popup non-Modal?
If this is the case, then you need set the BackgroundCssClass attribute of the ModalPopupExtender to a valid CSS class.
I normally use this...
.ModalBackground
{
background-color:Gray;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="ModalBackground" [... the rest of the attributes....] />
What is the easiest way to hide the Contents of an Update Panel when the UpdateProgress is invoked?
Here is a nice example doing this using Ajax Control Toolki
<ajaxToolkit:UpdatePanelAnimationExtender ID="ae"
runat="server" TargetControlID="up">
<Animations>
<OnUpdating> ... </OnUpdating>
<OnUpdated> ... </OnUpdated>
</Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>
* TargetControlID - ID of the UpdatePanel whose updates are used to play the animations (this is also the default target of the animations)
* OnUpdating - Generic animation played as when any UpdatePanel begins updating
* OnUpdated - Generic animation played after the UpdatePanel has finished updating (but only if the UpdatePanel was changed)
Also you may watch this video
I'm not sure if this will work but you can put script tags inside the progresstemplate and hide a div inside the updatepanel. It most likely won't un-hide when it comes back though.
You could catch the postback when it returns with javascript like so:
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(){
alert('postback returned');
});
Another way you can do it is make your content invisible at first like this:
<div id="content" style="display: none;">
</div>
Then end every update by adding this to the end of the content template:
<script type="text/javascript">
document.getElementById("content").style.display = "block";
</script>
I haven't tried this myself but I believe it should work.
EDIT -- I just realized this probably won't work quite like you want it to. The content will be invisible as its loading, and it'll become visible after it's done. But the content won't disappear until it receives that first byte from the server. That may or may not be the effect you're looking for depending on what kind of load times you're seeing.
this should help
http://www.asp.net/Ajax/Documentation/Live/tutorials/ProgrammingUpdateProgress.aspx
Is this typical behavior of the UpdateProgress for an ASP.Net UpdatePanel? I have an update panel with the UpdateProgress control inside of a user control window on a page.
If I then make the page in the background do some loading and click a button in the user control update panel the UpdateProgress does not show up at all. It's like the UpdatePanels refresh request is not even registered until after the actual page is done doing it's business. It's worth noting that it will show up if nothing is happening in the background.
The functionality I want is what you would expect. I want to loader to show up if it has to wait for anything to get it's refresh done when after the button is clicked.
I know I can get this functionality if I just use jquery ajax with a static web method, but you can't have static web methods inside of a user control. I could have it in the page but it really doesn't belong there. A full-blown wcf wouldn't really be worth it in this case either. I'm trying to compromise with an UpdatePanel but these things always seem to cause me some kind of trouble.
Maybe this is just the way it works?
Edit:So I'll clarify a bit what I'm doing.
What's happening is I have a page and all it has on it are some tools on the side and a big map. When the page initially loads it takes some time to load the map. Now if while it's loading I open up the tool (a user control) that has the update panel in question in it and click the button on this user control that should refresh the update panel with new data and show the loading sign (in the updateprogress) then the UpdateProgress loading image does not show up. However, the code run by the button click does run after the page is done loading (as expected) and The UpdateProgress will show up if nothing on the page containing the user control is loading.
I just want the loader to show up while the page is loading.
I thought my problem was that perhaps the map loading is in an update panel and my UpdateProgress was only being associated with the update panel for the user control's update panel. Hence, I would get no loading icon when the map was loading. This is not the case though.
I'm not completely following exactly what you're doing here, but I'm assuming you've taken what's in your user control and verified that it works correctly if placed directly in the page?
As a side note, I'm personally ripping out UpdatePanels and replacing with jQuery replacements due to the significant performance savings in addition to the fact that it's way more time-effective to figuring out jQuery et al. quirks instead of ASP.NET AJAX quirks. To be honest, I wish I could claw back the time I did invest in UpdatePanels/ASP.NET AJAX.
I believe I understand your issue after reading your OP several times. I have run into this situation myself with difficulty getting an UpdateProgress to work on Page_Load. The solution? Don't fire the server-side event initially on Page_Load. Add an AJAX Timer that is inside an UpdatePanel like below:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Timer ID="ajxTmr1" runat="server" Interval="1000" OnTick="ajxTmr1_Tick" />
</ContentTemplate>
</asp:UpdatePanel>
The on the timer tick event, do your server code as required. If you have an Update Progress wired up to the UpdatePanel above, everything should work properly.
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0" AssociatedUpdatePanelID="UpdatePanel1" Visible="false">
<%--Panel or whatever goes here--%>
</asp:UpdateProgress>