We Keep Coding

iFrame loading twice in asp AjaxToolkit TabContainer

am using asp AjaxToolkit in my prjoect as below asp.net C# code.
<asp:UpdatePanel ID="UpdatePanelDemo" runat="server">
<ContentTemplate>
<ajax:TabContainer ID="tabMessage" runat="server" ActiveTabIndex="1" AutoPostBack="true"
OnActiveTabChanged="tabMessage_ActiveTabChanged" CssClass="ajax__tab_blueGrad-theme">
<ajax:TabPanel ID="TabMCompose" runat="server">
<HeaderTemplate>
<span style="padding-left: 5px; padding-right: 5px;">Compose </span>
</HeaderTemplate>
<ContentTemplate>
This Text not flickering or not loading twice // *****
<iframe id="IFrmCompose" runat="server" scrolling="no" frameborder="0" height="400px"
width="100%"></iframe>
</ContentTemplate>
</ajax:TabPanel>
<ajax:TabPanel ID="tabMInbox" runat="server">
<HeaderTemplate>
<span style="padding-left: 5px; padding-right: 5px;">Inbox (<span id="SpnIn" runat="server"></span>)</span>
</HeaderTemplate>
<ContentTemplate>
<iframe id="IFrmInbox" runat="server" scrolling="no" frameborder="0" height="400px"
width="100%"></iframe>
</ContentTemplate>
</ajax:TabPanel>
</ajax:TabContainer>
</ContentTemplate>
</asp:UpdatePanel>
Problem: When I use iFrame inside the ajax TabContainer and when the user moves from 1st Tab to 2nd Tab, it seems that the page load twice and iFrame load twice or it flickers but the text above the iFrame as shown above ('This Text not flickering or not loading twice') is not flickering.
It seems there is some problem with iFrame and Ajax TabContainer.
Please give me suggestion why this happens.
Thanks.

Not 100% sure because there is no codebehind attached, but it looks like a ViewState issue. Since you are not setting the IFrame SRC in the repeater template, the page init will first set the IFrame empty and then re-set the URL even if it not changed (causing it to flicker).
Suggestion: Persist the URL in ViewState or other when a tab is changed, and set it in the repeater template to the persisted value. Always set any empty frame SRC to "about:blank" to avoid unnecessary loading and to reliably detect changes.
Just a side note: in a way you are doing the same thing twice - with UpdatePanels/Ajax Controls you do not need IFrames, the contents of your tab should retrieved via an AJAX call thus making the IFrames obsolete.

Not 100% sure because there is no codebehind attached, but it looks like a ViewState issue.
Page reload maybe the reason of the behavior
if(!IsPostback)
BindIt();

AJAX Collapsible Panel Extender Code Behind

I am having some problem with AJAX Collapsible Panel Extender. Currently what I am trying to do is when certain panel is extended, then it will perform some sql statement. I have no idea on how to write the code other than just squeeze all of them in the Page Load method. Here is how I set up my collapsible panel extender:
<!-- FIRST COLLAPSIBLE PANEL EXTENDER -->
<asp:Panel ID="pHeader1" runat="server" CssClass="cpHeader">
<!-- First collapsible panel extender header -->
<div class="form-group" style="background-color:#ffb848; height: 30px; vertical-align: middle">
<div class="col-md-3">
<div style="float: left; color: White; padding: 5px 5px 0 0">
Collapsible Panel
</div>
</div>
<div class="col-md-9">
<div style="float: right; color: White; padding: 5px 5px 0 0">
<asp:Label ID="lblHeaderText1" runat="server" />
<asp:Image ID="imgArrows1" Text = "IMAGE" runat="server" />
</div>
</div>
<div style="clear: both"></div>
</div>
</asp:Panel>
<!-- First collapsible panel extender body -->
<asp:Panel ID="pBody1" runat="server" CssClass="cpBody">
<asp:Label ID="lblBodyText1" runat="server" />
Hey there
</asp:Panel>
<asp:CollapsiblePanelExtender ID="cpe1" runat="server" TargetControlID="pBody1" CollapseControlID="pHeader1"
ExpandControlID="pHeader1" Collapsed="true" ImageControlID="imgArrows1"
CollapsedImage="~/Images/downarrow.jpg"
ExpandedImage="~/Images/uparrow.jpg" TextLabelID="lblHeaderText1" CollapsedText="Show"
ExpandedText="Hide" CollapsedSize="0" ExpandedSize="200"
ScrollContents="true">
</asp:CollapsiblePanelExtender>
Any related research link would be appreciated. Thanks in advance.

This is possible.
In gist you are supposed to work with the ajax client-side page life-cycle. Like there is a page load in your server-side aspx page; there is a page load in the client (i.e. the web page rendered in the browser) which happens after all the asp.net client ajax js libraries are all loaded.
In that you are supposed to do something like:
//this would be <%=myExtender.ClientID%> when using a master page
var extender = $find('myExtender_ClientId');
extender.add_collapsed( function() { alert('collapsed'); });
extender.add_expanded( function() { alert('expanded'); });
More details here: http://forums.asp.net/p/1112899/1717195.aspx
You'd want to execute some server side logic to populate stuff in the container that becomes visible. For this you need some AJAJ. This is nothing but some aspx pages written in such a way to render JSON responses back to your browser. But they will be invoked via an XMLHttpRequest object.
Alternatively you can rely on asmx web services, or even page methods to do the work for you. They've to run as script services to do the work for you.
Have a look at this thread for that: http://forums.asp.net/t/1729092.aspx?loading+data+in+the+target+control+panel+of+collapsible+extender+when+Collapse+Expand+control+panel+is+clicked+

How to load Iframe content so that it does not flicker

I have kept Iframe inside updtae panel but then also it flickers every time it reload. I think I can use javascript to load my content of Iframe in order to make it flicker free.Is this way correct? If yes, then How can I do it? And if not, then What should I do?
This is the code
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<div style="width:100%; height: 195px; margin-left: -7px;">
<asp:PlaceHolder ID="ContentPlaceHolderChatRequest" runat="server">
<iframe id="iframe1" frameborder="0" style=" width: 379px;
height:110%;" src="frmChatRequest.aspx"
scrolling="no" runat="server">
</iframe>
</asp:PlaceHolder>
<div></div>
</div>
</ContentTemplate>
</asp:UpdatePanel>

How to show result of an event in loading panel in asp.net

I am working on asp.net and ajax using c#. I am trying to create a new user registration where i am poping a updatepanel with loading image when an user clicks on submit button. and also i need to insert the data into database at the same time. I use the following code,
<asp:UpdatePanel ID="updatepanel1" runat="server">
<ContentTemplate>
<asp:TextBox runat="server" ID="txtMI" Width="80px" Height="20px" CssClass="s1"> </asp:TextBox>
<asp:TextBox runat="server" ID="txtMI" Width="80px" Height="20px" CssClass="s1"></asp:TextBox>
<asp:TextBox runat="server" ID="txtMI" Width="80px" Height="20px" CssClass="s1"></asp:TextBox>
<asp:Dropdownlist ID="drpCountries" runat="server" Font-Bold="True" ForeColor="#FF3300"></asp:Dropdownlist>
<br />
<asp:Button ID="btnLoad" runat="server" onclick="btnLoad_Click" Text="submit" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress id="updateProgress" runat="server">
<ProgressTemplate>
<div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
<asp:Image ID="imgUpdateProgress" runat="server" ImageUrl="~/avatarloading.gif" AlternateText="Loading ..." ToolTip="Loading ..." style="padding: 10px;position:fixed;top:25%;left:35%;" /><center><span style="color:White;font-weight:bolder;font-size:x-large;"><b>Loading...</b></span></center>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
and in my code behind file like,
protected void btnLoad_Click(object sender,EventArgs e)
{
//INsert the records into database
}
At first when user clicks on submit i am able to pop loading panel with loading gif image. after successful insertion i need to show some message like registration success in place of image on loading panel. please guide me.

You can bind endRequest event of asp.net ajax to get control after ajax request completed.
<script language="javascript" type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(endRequest);
function endRequest(sender, args) {
alert("After ajax request");
}
</script>

I'd create a panel which looks identical to the UpdateProgress markup (css classes) with a label in it. And on a successful operation you set the label text and switch the panels Visible property to true.

Making Update Progress Panel in the center

I have a query regarding update progress panel.
I want to fit update progress panel in the middle of my screen!
Can anyone suggest me, what is the idea of making it so??

You can do that by using css
<style type="text/css" media="screen">
/* commented backslash hack for ie5mac \*/
html, body{height:100%;}
/* end hack */
.CenterPB{
position: absolute;
left: 50%;
top: 50%;
margin-top: -30px; /* make this half your image/element height */
margin-left: -30px; /* make this half your image/element width */
}
</style>
and you have the progress bar in the div
<div class="CenterPB" style="height:60px;width:60px;" >Progress bar here</div>
reference:
http://www.sitepoint.com/forums/1243542-post9.html
http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/

If you use jQuery, you may also try (very lightweight) fixedcenter plugin.

The update progress panel displays something (some text an image some markup) while the system is processing..
So you need to work with the markup you add..
For example if you have a div that displays you could get it to be in the centre like this..
<div style="width:200px;margin:0 auto;">Processing...</div>
That will display the div in the centre of its container.
Full example:
<asp:UpdatePanel ID="updatepnl1" runat="server">
<ContentTemplate>
<asp:GridView id="gv1" runat="server">
</asp:GridView>
<asp:UpdateProgress id="UpdateProg" runat="server">
<ProgressTemplate>
<div style="width:200px;margin:0 auto;">Processing...</div>
</ProgressTemplate>
</asp:UpdateTemplate>
</asp:ContentTemplate>
</asp:UpdatePanel>
Of course you should put the css into a css file and apply it to a class.
Like:
///Start css
.posCentre{width:200px;margin:0 auto;}
///End css
and change your div to:
<div class="posCentre">Processing...</div>