I have two dropdowns categories and subcategories on my page. Also I have an htmleditor on the same page. Below is my aspx
<div class="clearfx">
</div>
<div>
<label>
Description :
</label>
<div style="padding-left: 10px; margin-left: 146px;">
<cc:HtmlEditor ID="Editor" runat="server" Height="600px" Width="850px" EnableViewState="true" />
</div>
</div>
<div class="clearfx">
</div>
<div>
<asp:UpdatePanel runat="server" ID="up" UpdateMode="Always" ChildrenAsTriggers="true">
<ContentTemplate>
<label>Category : </label>
<asp:DropDownList runat="server" ID="Categories" Width="200px" AutoPostBack="True"
OnSelectedIndexChanged="CategoriesSelectedIndexChanged">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="rfvCountry" runat="server" ErrorMessage="Choose a category."
ControlToValidate="Categories" Display="None" EnableTheming="False" EnableViewState="False"
InitialValue="-1" SetFocusOnError="True" ValidationGroup="grpReg"></asp:RequiredFieldValidator>
<asp:ValidatorCalloutExtender ID="rfvCountry_ValidatorCalloutExtender" runat="server"
Enabled="True" TargetControlID="rfvCountry">
</asp:ValidatorCalloutExtender>
<asp:ImageButton runat="server" ID="Refresh" ImageAlign="AbsMiddle"
ImageUrl="~/cdn/images/refresh.png" onclick="RefreshClick"/>
<span class="helptext">(click on refresh image, incase subcategories do not load.)</span>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="clearfx">
</div>
<div>
<label>
Sub Category :
</label>
<asp:DropDownList runat="server" ID="SubCategories" Width="200px">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Choose a sub category."
ControlToValidate="SubCategories" Display="None" EnableTheming="False" EnableViewState="False"
InitialValue="-1" SetFocusOnError="True" ValidationGroup="grpReg"></asp:RequiredFieldValidator>
<asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender2" runat="server" Enabled="True"
TargetControlID="RequiredFieldValidator2">
</asp:ValidatorCalloutExtender>
</div>
What I am doing is that, On the selected index change of the categories dropdown i am populating subcategories. to suppress post back i am using an Update Panel, But my problem is that,the selected index change is fired but the dropdown subcategories does not gets binded. When I remove the update panel, then its works fine, but my html editor looses its value, even having its own and Page enableviewstate = true. Please help me.
My Codebehind methods are:
Dropdown Selected Index Change Event:
protected void CategoriesSelectedIndexChanged(object sender, EventArgs e)
{
if (Categories.SelectedIndex > 0)
{
BindSubCategory(Common.ParseInt(Categories.SelectedItem.Value));
}
else
{
SubCategories.SelectedIndex = 0;
SubCategories.Items.Clear();
}
}
Page Load Event:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGrid();
BindCategories();
}
}
private void BindCategories()
{
List<Category> cat = _categoryRepository.GetAll().ToList();
Common.BindDropdown(cat, Categories); // static method
}
public static class Common
{
/// <summary>
///
/// </summary>
/// <param name="list"></param>
/// <param name="ddl"></param>
public static void BindDropdown(IList list, DropDownList ddl)
{
if (list.Count>0)
{
ddl.DataSource = list;
ddl.DataTextField = "Name";
ddl.DataValueField = "Id";
ddl.DataBind();
ddl.Items.Insert(0, new ListItem("---Select---", "-1"));
}
}
}
You need to put the Subcategories in another UpdatePanel and add the proper triggers (set the second panel to trigger on the Categories dropdowns selectedindexchanged event).
<Triggers>
<asp:AsyncPostBackTrigger ControlId="Categories"
EventName="SelectedIndexChanged" />
</Triggers>
sample here
Try this:
<div class="clearfx">
</div>
<div>
<label> Description : </label>
<div style="padding-left: 10px; margin-left: 146px;">
<cc:HtmlEditor ID="Editor" runat="server" Height="600px" Width="850px" EnableViewState="true" />
</div>
</div>
<div class="clearfx">
</div>
<asp:UpdatePanel runat="server" ID="up" UpdateMode="Always" ChildrenAsTriggers="true">
<ContentTemplate>
<div>
<label>Category : </label>
<asp:DropDownList runat="server" ID="Categories" Width="200px" AutoPostBack="True"
OnSelectedIndexChanged="CategoriesSelectedIndexChanged">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="rfvCountry" runat="server" ErrorMessage="Choose a category."
ControlToValidate="Categories" Display="None" EnableTheming="False" EnableViewState="False"
InitialValue="-1" SetFocusOnError="True" ValidationGroup="grpReg"></asp:RequiredFieldValidator>
<asp:ValidatorCalloutExtender ID="rfvCountry_ValidatorCalloutExtender" runat="server"
Enabled="True" TargetControlID="rfvCountry">
</asp:ValidatorCalloutExtender>
<asp:ImageButton runat="server" ID="Refresh" ImageAlign="AbsMiddle"
ImageUrl="~/cdn/images/refresh.png" onclick="RefreshClick"/>
<span class="helptext">(click on refresh image, incase subcategories do not load.)</span>
<div class="clearfx">
</div>
<div>
<label> Sub Category : </label>
<asp:DropDownList runat="server" ID="SubCategories" Width="200px">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Choose a sub category."
ControlToValidate="SubCategories" Display="None" EnableTheming="False" EnableViewState="False"
InitialValue="-1" SetFocusOnError="True" ValidationGroup="grpReg"></asp:RequiredFieldValidator>
<asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender2" runat="server" Enabled="True"
TargetControlID="RequiredFieldValidator2">
</asp:ValidatorCalloutExtender>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Related
I am trying to trigger an SelectedIndexChanged from the ddlMake dropdownlist but the event is not firing, if I shift the ddlMake outside of my CreateUserWizard, it will work. Am I doing anything wrong:
<asp:CreateUserWizard runat="server" ID="RegisterUser" ViewStateMode="Disabled" OnCreatingUser="RegisterUser_CreatingUser" OnCreatedUser="RegisterUser_CreatedUser" >
<LayoutTemplate>
<asp:PlaceHolder runat="server" ID="wizardStepPlaceholder" />
<asp:PlaceHolder runat="server" ID="navigationPlaceholder" />
</LayoutTemplate>
<WizardSteps>
<asp:CreateUserWizardStep runat="server" ID="CreateUserWizardStep1">
<ContentTemplate>
<p class="message-info">
Passwords are required to be a minimum of <%: Membership.MinRequiredPasswordLength %> characters in length.
</p>
<p class="validation-summary-errors">
<asp:Literal runat="server" ID="ErrorMessage" />
</p>
<div class="row-fluid MT35">
<div class="span3">User ID:</div>
<div class="span8">
<asp:TextBox runat="server" ID="UserName" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="UserName"
CssClass="field-validation-error"
ErrorMessage="The user name field is required." Display="Dynamic" />
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" Text="Username length must be between 5 to 12 characters without spacing."
ControlToValidate="UserName" SetFocusOnError="true"
ValidationExpression="^[a-zA-Z0-9'#&#_]{5,12}$" Display="Dynamic" />
</div>
<div class="row-fluid ">
<div class="span3">Password:</div>
<div class="span8">
<asp:TextBox runat="server" ID="Password" TextMode="Password" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="Password"
CssClass="field-validation-error" ErrorMessage="The password field is required." />
</div>
<div class="row-fluid ">
<div class="span3">Confirm Password:</div>
<div class="span8">
<asp:TextBox runat="server" ID="ConfirmPassword" TextMode="Password" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="ConfirmPassword"
CssClass="field-validation-error" Display="Dynamic" ErrorMessage="The confirm password field is required." />
<asp:CompareValidator ID="CompareValidator1" runat="server" ControlToCompare="Password" ControlToValidate="ConfirmPassword"
CssClass="field-validation-error" Display="Dynamic" ErrorMessage="The password and confirmation password do not match." />
</div>
</div>
<div class="row-fluid MT35">
<div class="span3">Your Car:</div>
<div class="span8 YourCarInformation">
<asp:DropDownList ID="ddlCarMake" OnSelectedIndexChanged="ddlMake_SelectedIndexChanged" AutoPostBack="True" runat="server" CssClass="span12"></asp:DropDownList>
<asp:DropDownList ID="ddlCarModel" runat="server" CssClass="span12"></asp:DropDownList>
<asp:TextBox ID="txtRegistration" CssClass="pull-left" runat="server" placeholder="registration date dd/mm/yyyy"></asp:TextBox>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span3">Recieve Newsletter:</div>
<div class="span8 RadioBtn">
<label class="radio">
<asp:RadioButtonList ID="rbNewsLetter" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Text="Yes" Value="true" Selected="True" />
<asp:ListItem Text="No" Value="false" />
</asp:RadioButtonList>
</label>
</div>
</div>
</div>
</div>
</ContentTemplate>
<CustomNavigationTemplate />
</asp:CreateUserWizardStep>
</WizardSteps>
</asp:CreateUserWizard>
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
RegisterUser.ContinueDestinationPageUrl = Request.QueryString["ReturnUrl"];
DropDownList ddlCarMake =
(DropDownList)CreateUserWizardStep1.ContentTemplateContainer.FindControl("ddlCarMake");
DropDownList ddlCarModel =
(DropDownList)CreateUserWizardStep1.ContentTemplateContainer.FindControl("ddlCarModel");
ddlCarMake.DataSource = ds.Tables[0];
ddlCarMake.DataTextField = "CarMake";
ddlCarMake.DataValueField = "CarMake";
ddlCarMake.DataBind();
ddlCarMake.Items.Insert(0, new ListItem("Any", ""));
ddlCarMake.Items.Insert(ds.Tables[0].Rows.Count + 1, new ListItem("Others", "Others"));
ddlCarModel.Items.Insert(0, new ListItem("Any", ""));
}
}
protected void ddlMake_SelectedIndexChanged(object sender, EventArgs e)
{
VehicleBLL vehicleBll = new VehicleBLL();
DropDownList ddlCarMake = (DropDownList)CreateUserWizardStep1.ContentTemplateContainer.FindControl("ddlCarMake");
DropDownList ddlCarModel = (DropDownList)CreateUserWizardStep1.ContentTemplateContainer.FindControl("ddlCarModel");
DataSet ds = null;
if (ddlCarMake.SelectedIndex != 0)
{
ds = vehicleBll.GetCarModel(ddlCarMake.SelectedValue);
ddlCarModel.DataSource = ds.Tables[0];
ddlCarModel.DataTextField = "CarModel";
ddlCarModel.DataValueField = "CarModel";
ddlCarModel.DataBind();
ddlCarModel.Items.Insert(0, new ListItem("Any", ""));
}
}
Ok, found the answer after half a day went by, remove the ViewStateMode="Disabled" in the CreateUserWizard control and everything works fine.
i think you have to do this
first put the dropdownlist in update panel
then put the autopostback in dropdownlist property to true
that's will solve the problem
I am using an UpdatePanel to show some controls that are normally hidden.
This is the code that I am using:
<asp:LinkButton runat="server" class="btn blue h27" CausesValidation="false" ID="lnkSuggestArticle"
OnClick="lnkSuggestArticle_Click"><%=Supplier.GetResource("Answers_lnkSuggestArticle")%> <i class="icon icon_next_02 fr"></i></asp:LinkButton>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<div class="infoRequest" id="divSuggestion" runat="server" visible="false">
<br class="clearfix" />
<h3>
Please provide the information you want to see on our support site:</h3>
<br class="clearfix" />
<asp:TextBox runat="server" ID="txtSuggestArticle" Rows="10" ValidationGroup="s" Width="100%"
TextMode="MultiLine"></asp:TextBox>
<div id="divEmailAddress" runat="server" visible="false">
<br />
<h3>
Please enter your email address</h3>
<asp:TextBox runat="server" ID="txtEmailAddress" Rows="1" ValidationGroup="s" CssClass="suggestionEmail"
TextMode="SingleLine"></asp:TextBox>
<br />
</div>
<br />
<asp:Label runat="server" ID="lblSugestedArticleError" ForeColor="Red" Visible="false"></asp:Label>
<asp:Label runat="server" ID="lblMessage" ForeColor="Red"></asp:Label>
<br />
<asp:LinkButton ID="btnSaveSuggestion" ValidationGroup="s" runat="server" OnClick="btnSaveSuggestion_Click"
CssClass="btn blue fr"><%=Supplier.GetResource("createticket_btnSuggest")%> <i class="icon icon_next_02 fr"></i></asp:LinkButton>
<%--<input type="submit" value="Suggest" class="btnSuggest" />--%>
<br />
<br />
<p id="notice" runat="server">
<asp:Label runat="server" ID="lblSuggestionNote" /></p>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="lnkSuggestArticle" />
</Triggers>
</asp:UpdatePanel>
When the user clicks the lnkSuggestArticle button I execute the following code:
protected void lnkSuggestArticle_Click(object sender, EventArgs e)
{
divSuggestion.Visible = true;
if ((WFSS.DataAccess.Entities.Customer)Session["__currentCustomer"] == null)
{
divEmailAddress.Visible = true;
}
}
But it doesn't update the page. The div still stays hidden when the user clicks the suggest button.
protected void lnkSuggestArticle_Click(object sender, EventArgs e)
{
divSuggestion.Visible = true;
if (Session["__currentCustomer"] == null)
{
divEmailAddress.Visible = true;
}
}
It turns out that there was a bug in Visual Studio. I had commented a piece of code in the aspx file. Turns out even though it appeared to be commented the code still executed which caused another update panel to be added which gave me an error in javascript.
When i click on a Button i must show a modal popup
ASPX code:
<section>
<asp:Button ID="btnShowPopup" runat="server" Text="EditContextMenu" Visible="true" OnClick="btnShowPopup_Click" />
<ajax:ModalPopupExtender ID="ModalPopupContextInfo" runat="server" TargetControlID="btnShowPopup" PopupControlID="pnlpopupContextInfo"
CancelControlID="imgClose" BackgroundCssClass="modalBackground">
</ajax:ModalPopupExtender>
<asp:Panel ID="pnlpopupContextInfo" runat="server" BackColor="White" Height="560px" Width="400px" Style="display: none" >
<div class="contextMenu_edit" >
<div class="context_menu">
<p>Port</p>
<asp:TextBox ID="txtCMEditPort" runat="server" MaxLength="10" Width="131px" TabIndex="1"></asp:TextBox>
<div class="clear"></div>
<p>ProformaETA</p>
<asp:TextBox ID="txtCMEditProformaETA" runat="server" MaxLength="10" Width="131px" TabIndex="1"></asp:TextBox>
<asp:ImageButton ID="imgbtnCMEditProformaETA" runat="server" ImageUrl="~/image_repository/calendarIcon.jpg" />
<ajax:CalendarExtender ID="ajaxcalProfrmaETA" runat="server" TargetControlID="txtCMEditProformaETA" PopupButtonID="imgbtnCMEditProformaETA" Format="dd-MMM-yyyy"></ajax:CalendarExtender>
<div class="clear"></div>
<p>ProformaETD</p>
<asp:TextBox ID="txtCMEditProformaETD" runat="server" MaxLength="10" Width="131px" TabIndex="1"></asp:TextBox>
<asp:ImageButton ID="imgbtnCMEditProformaETD" runat="server" ImageUrl="~/image_repository/calendarIcon.jpg" />
<ajax:CalendarExtender ID="ajaxcalProfrmaETD" runat="server" TargetControlID="txtCMEditProformaETD" PopupButtonID="imgbtnCMEditProformaETD" Format="dd-MMM-yyyy"></ajax:CalendarExtender>
</div>
</div>
</asp:Panel>
</section>
Code Behind :
protected void btnShowPopup_Click(object sender, EventArgs e)
{
ModalPopupContextInfo.Show();
}
This is Not working.
You've forgotten to define imgClose control, which you use as CancelControlID in ModalPopupExtender.
<ajax:ModalPopupExtender ID="ModalPopupContextInfo" runat="server" TargetControlID="btnShowPopup" PopupControlID="pnlpopupContextInfo"
CancelControlID="imgClose" BackgroundCssClass="modalBackground">
That's why your extender does not work.
Also you need to set active index for Model Popup Extender. Mostly it
ASPX Page :
"asp:button id="Button1" runat="server" text="DOWNTIME" cssclass="FormButton" width="20%"
"ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" BackgroundCssClass="ModalPopupBG"
runat="server" TargetControlID="Button1" CancelControlID="btnCancel1" PopupControlID="Panel1" Drag="true" PopupDragHandleControlID="PopupHeader"
Then
"asp:multiview id="MultiViewExpanse" runat="server""
asp:View ID="ViewInput" runat="server"
/asp:View
/asp:multiview
C#
protected void Page_Load(object sender, EventArgs e)
{
try
{
if (!IsPostBack)
{
ModalPopupContextInfo.ActiveViewIndex = 0;
}
}
}
It works...fine...If still want some..help.... Ping me...
I am working on a webform which has two UpdatePanels; one inside UserControl and other inside the main page. When the pager user-control (< 1 2 3 >) of Main page is invoked it shows the corresponding UpdateProgress of 'Latest News' Section but also shows the Progress Bar of 'Subscribe' User-control.
I tried to change the properties but it keeps on coming; if I keep UpdateMode="Conditional" for user control then progress bar goes in loop and show continuously.
How can I make changes to this code to show only corresponding progress bar. I have looked over 50 example but nun seems to be matching. I would appreciate if someone can help me to get this fixed.
<!-- LatestNewArea -->
<div class="LatestNewArea">
<asp:UpdatePanel ID="updLatestNews" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Repeater ID="rptLatestNews" runat="server" EnableViewState="False" onitemdatabound="rptLatestNews_ItemDataBound">
<ItemTemplate>
<asp:HyperLink ID="hylLatestNews" CssClass="chylLatestNews" runat="server" NavigateUrl=''>
<div class="LatestNewsWrapper">
<div class="LatestNewsDateBox">
<div class="LNYYYY">
<asp:Label ID="lblYYYY" runat="server" Text="2012"></asp:Label>
</div>
<div class="LNDDMM">
<asp:Label ID="lblDDMM" runat="server" Text="12/08"></asp:Label>
</div>
</div>
<div class="LatestNewsTitle">
<asp:Label ID="lblLatestNewsTitle" runat="server" Text="First News for the Website"></asp:Label>
</div>
<div class="LatestNewsHDate">
<asp:Label ID="Label1" runat="server" Text="Hijri: 15 Rajab 1433"></asp:Label>
</div>
<div class="LatestNewsDesc">
<asp:Label ID="Label2" runat="server" Text=""></asp:Label>
</div>
</div>
<div class="LNHLine"> </div>
</asp:HyperLink>
</ItemTemplate>
</asp:Repeater>
<!-- Pager -->
<div class="LatestNewsPagerWrapper">
<div class="LatestNewsPagerInnerWrapper">
<asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="50" AssociatedUpdatePanelID="updLatestNews" >
<ProgressTemplate>
<div id="imgLoadingArticleList" class="imgLoadingArticleList">
<asp:Image ID="imgLoading" runat="server" ImageUrl="~/images/ajax-loader-bar2.gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<uc1:PagerControl ID="PagerControl1" runat="server" CssClass="gold-pager" PageMode="LinkButton" />
</div>
</div>
<!-- Pager -->
</ContentTemplate>
</asp:UpdatePanel>
</div>
<!-- LatestNewArea -->
User Control Page Code
<script type="text/javascript">
function onUpdating() {
// get the divImage
var panelProg = $get('divImage');
// set it to visible
panelProg.style.display = '';
// hide label if visible
var lbl = $get('<%= this.pnlSubscribe.ClientID %>');
lbl.innerHTML = '';
}
function onUpdated() {
// get the divImage
var panelProg = $get('divImage');
// set it to invisible
panelProg.style.display = 'none';
}
</script>
<table cellpadding="0" cellspacing="0" class="SubscribeContainer">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" class="SubscribeWrapper" border="0">
<tr>
<td valign="top">
<asp:UpdatePanel ID="updSubscribe" runat="server" >
<ContentTemplate>
<asp:Panel ID="pnlSubscribe" runat="server" Height="10px">
<div class="SubHeading"><asp:Label ID="lblTitle" runat="server" Text="JOIN US"></asp:Label></div>
<div class="dSubName">
<asp:TextBox ID="txtName" CssClass="txtSubscribe" runat="server" Text="NAME" onfocus="if(this.value=='NAME')this.value='';" onblur="if(this.value=='')this.value='NAME';"></asp:TextBox>
</div>
<div class="dSubEmail">
<asp:TextBox ID="txtEmail" CssClass="txtSubscribe" runat="server" Text="YOUR EMAIL" onfocus="if(this.value=='YOUR EMAIL')this.value='';" onblur="if(this.value=='')this.value='YOUR EMAIL';"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvEmailSub" runat="server" ErrorMessage="*"
ControlToValidate="txtEmail" ValidationGroup="SubEmail" ></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="revEmailSub" runat="server"
ErrorMessage="*" ControlToValidate="txtEmail" ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*"
ValidationGroup="SubEmail" ></asp:RegularExpressionValidator>
</div>
<div class="dSubSubmit">
<asp:Button ID="btnSubscribe" CssClass="btnSubscribe" runat="server" ValidationGroup="SubEmail" Text="Subscribe" onclick="btnSubscribe_Click" />
</div>
</asp:Panel>
<div class="dSubMSG">
<asp:Label ID="lblMSG" runat="server" Text=""></asp:Label>
</div>
<div id="divImage" style="display:none" class="dSubAni">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/loader-sub.png" Visible="true"/>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" TargetControlID="updSubscribe" runat="server">
<Animations>
<OnUpdating>
<Parallel duration="0">
<ScriptAction Script="onUpdating();" />
<EnableAction AnimationTarget="btnSubscribe" Enabled="false" />
</Parallel>
</OnUpdating>
<OnUpdated>
<Parallel duration="0">
<ScriptAction Script="onUpdated();" />
<EnableAction AnimationTarget="btnSubscribe" Enabled="true" />
</Parallel>
</OnUpdated>
</Animations>
</asp:UpdatePanelAnimationExtender>
</td>
</tr>
</table>
</td>
</tr>
</table>
I tried many solution but non of them worked in a proper way. Finally i decided to replace UpdatePanelAnimationExtender of user control with UpdateProgress as I was able to trap the initiating UpdatePanel for AsyPostback
For some reason i was not able to trap AsyPostback when i used UpdatePanelAnimationExtender
BELOW IS A WORKING CODE
// Function to hide control on update
function onUpdateOfSubscribe() {
var panelProg = $get('divImage');
// set it to visible
panelProg.style.display = '';
// hide label if visible
var lbl = $get('<%= this.pnlSubscribe.ClientID %>');
lbl.innerHTML = '';
}
//Code to track the initiating event so to associate updateprogress
var currentPostBackElement;
function pageLoad() {
var manager = Sys.WebForms.PageRequestManager.getInstance();
manager.add_initializeRequest(OnInitializeRequest);
}
//On OnInitializeRequest
function OnInitializeRequest(sender, args) {
var manager = Sys.WebForms.PageRequestManager.getInstance();
currentPostBackElement = args.get_postBackElement().parentElement;
var cmdAuthoriseButton = '<%= btnSubscribe.ClientID %>';
if (cmdAuthoriseButton == args._postBackElement.id) {
// Show UpdateProgress for subscribe
onUpdateOfSubscribe();
}
}
</script>
<table cellpadding="0" cellspacing="0" class="SubscribeContainer">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" class="SubscribeWrapper" border="0" >
<tr>
<td valign="top">
<asp:UpdatePanel ID="updSubscribe" runat="server" UpdateMode="Conditional" >
<ContentTemplate>
<asp:Panel ID="pnlSubscribe" runat="server" Height="10px">
<div class="SubHeading"><asp:Label ID="lblTitle" runat="server" Text="JOIN US"></asp:Label></div>
<div class="dSubName">
<asp:TextBox ID="txtName" CssClass="txtSubscribe" runat="server" Text="NAME" onfocus="if(this.value=='NAME')this.value='';" onblur="if(this.value=='')this.value='NAME';"></asp:TextBox>
</div>
<div class="dSubEmail">
<asp:TextBox ID="txtEmail" CssClass="txtSubscribe" runat="server" Text="YOUR EMAIL" onfocus="if(this.value=='YOUR EMAIL')this.value='';" onblur="if(this.value=='')this.value='YOUR EMAIL';"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvEmailSub" runat="server" ErrorMessage="*"
ControlToValidate="txtEmail" ValidationGroup="SubEmail" ></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="revEmailSub" runat="server"
ErrorMessage="*" ControlToValidate="txtEmail" ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*"
ValidationGroup="SubEmail" ></asp:RegularExpressionValidator>
</div>
<div class="dSubSubmit">
<asp:Button ID="btnSubscribe" CssClass="btnSubscribe" runat="server" ValidationGroup="SubEmail" Text="Subscribe" onclick="btnSubscribe_Click" />
</div>
</asp:Panel>
<div class="dSubMSG">
<asp:Label ID="lblMSG" runat="server" Text=""></asp:Label>
</div>
<div id="divImage" style="display:none" class="dSubAni">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/loader-sub.png" Visible="true"/>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSubscribe" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="updSubscribe" >
<ProgressTemplate>
</ProgressTemplate>
</asp:UpdateProgress>
</td>
</tr>
</table>
</td>
</tr>
</table>
On my MasterPage I have 2 update panels which are surrounded with Panels. Two of them contain 'Details View' controls and some buttons.
On the other hand, I have one UpdatePanel which contains image buttons and link buttons.
The idea is that I'm fetching from the database the messages ( 2 kinds), showing them on the Page. When the user clicks on a button (LinkButton or ImageButton), he or she sees a 'Popup Control'. On the popup control, he or she can see the message details and if needed, cancel them or approve.
Here is where I am stuck. If I remove the ImageButtons from the UpdatePanels, I won't be able to refresh them without a full postback.
Should I have 'popup extensions' in the UpdatePanel with the ImageButtons, but then when I click on the button from 'popup panel' - it disappears ( there is no full postback, it just disappears) - it should just change the DetailsView page.
How do I make it work?
Thanks in advance !
(I need this solution because I want to use a timer to refresh LinkButtons )
here is my code behind :
protected void Page_Load(object sender, EventArgs e)
{
try
{
//here im pulling data from database and binding it with 'details view' controls, its not big deal so i think i don't have to show it?
wyswietl_powiadomienia_o_wydarzeniach();
wyswietl_ilosc_zaproszen_do_przyjaciol();
wyswietl_ilosc_nieodczytanych_wiadomosci();
}
catch (Exception)
{
}
}
protected void ButtonWczesniej_Click(object sender, EventArgs e)
{
DetailsViewEventsRequests.PageIndex = DetailsViewEventsRequests.PageIndex - 1;
ButtonDalej.Enabled = true;
wyswietl_powiadomienia_o_wydarzeniach();
}
protected void ButtonDalej_Click(object sender, EventArgs e)
{
//
DetailsViewEventsRequests.PageIndex = DetailsViewEventsRequests.PageIndex + 1;
ButtonWczesniej.Enabled = true;
wyswietl_powiadomienia_o_wydarzeniach();
}
protected void ButtonInvLeft_Click(object sender, EventArgs e)
{
DetailsViewIfFriends.PageIndex = DetailsViewIfFriends.PageIndex - 1;
}
protected void ButtonInvRight_Click(object sender, EventArgs e)
{
DetailsViewIfFriends.PageIndex = DetailsViewIfFriends.PageIndex + 1;
}
And my aspx: (only one updatepanel with detail's view because 2nd one is very simillar)
<div id="NotifyAreaWhite">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="NotifyAreaDiv">
<div id="NotifyDivMail">
<div id="NotifyLeftMSG"><asp:ImageButton ID="ImageButtonNotifyMsg" runat="server"
ImageUrl="~/images/msg.png" PostBackUrl="~/wiadomosci.aspx"
ToolTip="Wyslij wiadomosc" /></div>
<div class="NotifyRight"> <asp:LinkButton ID="LabelNotifyMsgNo" runat="server" Text="0" Font-Size="Large" PostBackUrl="~/wiadomosci.aspx"/></div>
</div>
<div class="NotifyDiv">
<div id="NotifyLeftFrend" class="NotifyLeft"> <asp:ImageButton ID="ImageButtonNotifyFrends" runat="server"
ImageUrl="~/images/friends.png"
ToolTip="Zaproszenia od znajomych." /></div>
<div id="NotifyRightFrend" class="NotifyRight"><asp:LinkButton ID="LabelNotifyFrendsNo" runat="server" Text="0" Font-Size="Large"/></div>
</div>
<div class="NotifyDiv">
<div id="NotifyLeftWyd" class="NotifyLeft"> <asp:ImageButton ID="ImageButtonWydarzenia" runat="server" ImageUrl="~/images/event.png" ToolTip="Zaproszenia do wydarzen." /></div>
<div id="NotifyRightWyd" class="NotifyRight"> <asp:LinkButton ID="LabelNotifyEventsNo" runat="server" Text="0" Font-Size="Large"/></div>
</div>
</div>
<asp:ModalPopupExtender ID="PanelZaproszeniaEventy_ModalPopupExtender"
runat="server" Enabled="true" OkControlID="ButtonZamknijOkno" CancelControlID="ButtonZamknijOkno"
TargetControlID="ImageButtonWydarzenia" PopupControlID="PanelZaproszeniaEventy"
BackgroundCssClass="NotifyPageTloClass"/> //extender showing Panel
<asp:ModalPopupExtender ID="PanelZaproszeniaEventy_ModalPopupExtenderCyfra"
runat="server" Enabled="true" OkControlID="ButtonZamknijOkno" CancelControlID="ButtonZamknijOkno"
TargetControlID="LabelNotifyEventsNo" PopupControlID="PanelZaproszeniaEventy"
BackgroundCssClass="NotifyPageTloClass"/>
<asp:ModalPopupExtender ID="PanelProsbyOznajomosc_ModalPopupExtender"
runat="server" Enabled="true" OkControlID="ButtonFrendCloseNotifier" CancelControlID="ButtonFrendCloseNotifier"
TargetControlID="ImageButtonNotifyFrends" PopupControlID="PanelProsbyOznajomosc"
BackgroundCssClass="NotifyPageTloClass"/>
<asp:ModalPopupExtender ID="PanelProsbyOznajomosc_ModalPopupExtenderCyfra"
runat="server" Enabled="true" OkControlID="ButtonFrendCloseNotifier" CancelControlID="ButtonFrendCloseNotifier"
TargetControlID="LabelNotifyFrendsNo" PopupControlID="PanelProsbyOznajomosc"
BackgroundCssClass="NotifyPageTloClass"/>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:Panel ID="PanelZaproszeniaEventy" runat="server" Width="318px" CssClass="NotifyWydTlo" >
<asp:UpdatePanel ID="UpdatePanelZaproszeniaEventy" runat="server" RenderMode="Block">
<ContentTemplate>
<asp:DetailsView ID="DetailsViewEventsRequests" runat="server" DataKeyNames="Charakterystyka" AutoGenerateRows="False" Height="17px" Width="313px" HorizontalAlign="Center" onitemcreated="DetailsViewEventsRequests_ItemCreated">
<Fields>
<asp:BoundField DataField="UserName" HeaderText="Zalozyciel" SortExpression="Nazwisko" />
<asp:BoundField DataField="Miasto" HeaderText="Gdzie?" SortExpression="Miasto" />
<asp:BoundField DataField="Data_ZalozeniaWydarzenia" HeaderText="Data wyslania" SortExpression="Miasto" />
</Fields>
<FooterTemplate>
</FooterTemplate>
<HeaderTemplate>
<div>
<div style="float:left;">
<asp:Label ID="LabelNazwaWydarzenia" runat="server"
Text='<%# Eval("Nazwa_Wydarzenia") %>'></asp:Label>
</div>
<div style="float:right; margin-left:5px;">
<asp:Button ID="ButtonZobacz" runat="server" CssClass="myButton" Text="Zobacz Wydarzenie" Font-Size="X-Small" Width="150px" ClientIDMode="AutoID" OnClick="ButtonZobacz_click" UseSubmitBehavior="True"/>
</div>
</div>
</HeaderTemplate>
<EmptyDataTemplate>
<table id="Table1" runat="server" style="border-collapse: collapse;border-color: #999999;border-style:none;border-width:1px; color:#FF5041; margin-left:auto; margin-right:auto;">
<tr>
<td>Nie masz zadnych zaproszen.</td>
</tr>
</table>
</EmptyDataTemplate>
</asp:DetailsView>
<table style="margin-left:auto; margin-right:auto;">
<tr>
<td>
<asp:Button ID="ButtonWczesniej" Width="69px" Height="41px" runat="server" Text="<<" OnClick="ButtonWczesniej_Click" CssClass="myButton" /></td> //button previous msg
<td>
<asp:Button ID="ButtonDalej" Width="69px" Height="41px" runat="server" Text=">>" ///button next msg
OnClick="ButtonDalej_Click" CssClass="myButton"/></td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
<div style="margin-left:auto; margin-right:auto; width: 112px;">
<asp:Button CssClass="myButton" ID="ButtonZamknijOkno" Width="100%" //button closing popup
Height="41px" runat="server" Text="ZAMKNIJ"/>
</div>
</asp:Panel>
I hope i described it well. Sorry For my weak english and some Polish words in code :)
As i should do at the begining i made this example on empty page and try something else.. mode="Conditional" did the trick.
I should give that code before, not that long one :)
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:HyperLink ID="HyperLinkPanelOn" runat="server">click here to show popup</asp:HyperLink>
<asp:ModalPopupExtender ID="PanelZaproszeniaEventy_ModalPopupExtenderCyfra"
runat="server" Enabled="true" OkControlID="ButtonClose" CancelControlID="ButtonClose"
TargetControlID="HyperLinkPanelOn" PopupControlID="Panel1" BackgroundCssClass="NotifyPageTloClass" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Panel ID="Panel1" runat="server">
<asp:UpdatePanel ID="UpdatePanelPopUp" runat="server">
<ContentTemplate>
<asp:Button runat="server" Text="postback" />
<asp:Button runat="server" Text="postback" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="ButtonClose" runat="server" Text="Zamknij" />
</asp:Panel>
So simple.. I thought it's something bigger :/