Develop Reference

Panel not displayed in UpdatePanel

<form runat="server" id="from1">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<script src='https://www.google.com/recaptcha/api.js'></script>
<asp:Panel runat="server" ID="pnlSiteQuestions">
>>>>> CONTROLS removed for brevity <<<<<
<asp:Button ID="btnContinue" runat="server" Text="Continue" OnClick="btnContinue_Click" ValidationGroup="Questions" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Panel ID="pnlNotRequired" runat="server" Visible="false">
Sorry you do not qualify.
</asp:Panel>
<asp:Panel runat="server" ID="pnlAdditionalDetails" Visible="false">
<asp:ValidationSummary runat="server" ID="ValidationSummary1" />
Name
<asp:RequiredFieldValidator runat="server" ID="ValidatorName" ControlToValidate="ContactFormNameTextBox" ErrorMessage="Name is required" CssClass="ErrorClass">Required</asp:RequiredFieldValidator>
<asp:TextBox runat="server" ID="txtName" />
<div class="g-recaptcha" data-sitekey="ABC123"></div>
<asp:Button runat="server" ID="button1" Text="Confirm" OnClick="button1_Click" />
</asp:Panel>
</form>
I have the above form and decided to add an update panel. When a user clicks Continue, it goes to a database and determines if the user qualifies. If not pnlNotRequired message is displayed otherwise pnlAdditionalDetails is displayed.
Everything is/was working until i added the update panel. So removing the UP has everything working.
I tried adding a trigger but i didnt fully understand how it should be configured as i dont completely understand why this is occurring?
No Javascript errors listed either. Anyway to overcome this issue?

Update panel should cover all panels. Add property to update panel "UpdateMode='Conditional'" than add trigger block

Ajax Tab Container loads the first tab always when fire an event

I have an AJAX tab container that contains two tab panels.
The problem when I fire an event on the second tab it reloads the first tab.
Any help? Suggestions? below is a sample of the aspx code
<AJAX:TabContainer runat="server" ID="tcMain" ActiveTabIndex="0">
<AJAX:TabPanel runat="server" ID="tpTab1" TabIndex="1">
<HeaderTemplate>
Tab1
</HeaderTemplate>
<ContentTemplate>
<div runat="server" id="div1">
<asp:UpdatePanel ID="upTab1" runat="server">
<ContentTemplate>
//entry and events
</ContentTemplate>
</asp:UpdatePanel>
</div>
</ContentTemplate>
</AJAX:TabPanel>
<AJAX:TabPanel runat="server" ID="tpTab2" TabIndex="2">
<HeaderTemplate>
Tab2
</HeaderTemplate>
<ContentTemplate>
<div runat="server" id="div2">
<asp:UpdatePanel ID="upTab2" runat="server">
<ContentTemplate>
// entry and events
</ContentTemplate>
</asp:UpdatePanel>
</div>
</ContentTemplate>
</AJAX:TabPanel>
</AJAX:TabContainer>

Most likely this is because of page post-back happening.you can manage the data using ViewState property this link may solve your issue HElP
.

UpdatePanel AsyncPostBackTrigger does Postback

I've below design code containing updatepanel to the gridview and buttons as shown below -
<asp:ScriptManager ID="scrptmanager" runat="server"></asp:ScriptManager>
<div>
<asp:HiddenField ID="hdnSortValue" runat="server" />
</div>
<div class="current-btns" style="float: left !important;">
<div id="divFitnessSortBy" runat="server" class="fit-sort">
<table>
<tr>
<td>
<b>Sort by :</b>
</td>
<td>
<asp:Button ID="btnMostRecent" Text="Most Recent" class="button action sortcomments"
runat="server" OnCommand="btnMostRecent_Click" CommandArgument="date" />
</td>
<td>
<asp:Button ID="btnMostViewed" Text="Most Viewed" class="Comments" runat="server"
OnCommand="btnMostViewed_Click" CommandArgument="views" />
</td>
</tr>
</table>
</div>
<div class="clear">
</div>
</div>
<div class="hr">
</div>
<div class="BlogsPostHolderDiv" id="divPagination">
<asp:UpdatePanel ID="updtpanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="gvBlogsPost" runat="server" DataKeyNames="PostID" AutoGenerateColumns="False"
AllowPaging="false" Width="100%" OnRowDataBound="gvBlogsPost_Bound" GridLines="None">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<div class="current-articles">
<div class="current-thumb">
<a id="lnkThumbnail" runat="server" rel="nofollow">
<asp:Image ID="imgThumbnail" runat="server" Height="135px" Width="186px" />
</a>
</div>
<div class="current-list">
<h2>
<a id="lnkArticle" runat="server">
<%# DataBinder.Eval(Container.DataItem, "Subject")%></a>
</h2>
<div class="views-comments">
<h5>
<asp:Label runat="server" ID="lblNewsletterDate" ForeColor="#808080"><%# DataBinder.Eval(Container.DataItem, "PostDate")%></asp:Label>
<span class="gray">|</span> <span id="spnViews" runat="server"><span>
<%#Convert.ToInt64(DataBinder.Eval(Container.DataItem, "TotalViews")).ToString("#,#")%>
Views </span></span>
</h5>
</div>
<asp:Label ID="lblShortDescription" runat="server"><%#DataBinder.Eval (Container.DataItem, "Body")%> </asp:Label>
</div>
<div class="clear">
</div>
</div>
<div class="hr">
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnMostRecent" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="btnMostViewed" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<input type="hidden" id="hdnLastArticle" value="10" />
When i click on btnMostRecent or btnMostViewed the page does postback which should not be the case...am i missing something here?
Expected - When i click on any of the given button only gvBlogsPost gridview should be updated without the whole page postback
Help and thanks in advance...!

It looks the only thing you have to do is make sure the triggers are in the same naming container.
According to MSDN:
The control that the AsyncPostBackTrigger control references must be
in the same naming container as the update panel for which it is a
trigger. Triggers that are based on controls in other naming
containers are not supported.

Add two DropDownList to page on "Select" value in asp.net

I'm trying to create a booking page in asp like the one most hotels have. I can't seem to code/find the correct solution for this problem.
My problem is that a user can book from one to four rooms. If the user select, lets say 2 rooms, I have to make two more asp:DropDownList for adults / Children for the selected room.
Right now my booking.aspx page contains:
CheckIn (Asp:TextBox)
CheckOut (Asp:TextBox)
Rooms (Selected tag - Default value = 1)
Adults (Asp:DropDownList)
Children (Asp:DropDownList)
The default value in Rooms is 1, and if a user select 2 in the dropdownlist
two more Asp:DropDownList should come under.
I have tried to implement the DropDownLists and set the Type="Hidden", but on page load, you can actually see the field before it gets hidden.
Have also tried with some JQuery the Hide(); method, but this did also not work, because you can also see it for a split second before it gets hidden.
Code:
<div class="contentbooking">
<div class="form-group">
<asp:Label ID="CheckinLabel" runat="server" Text="Check-in Date"></asp:Label>
<asp:TextBox ID="datetimepicker1" ClientIDMode="Static" runat="server" CssClass="form-control"></asp:TextBox>
</div>
<div class="form-group">
<asp:Label ID="CheckoutLabel" runat="server" Text="Check-out Date"></asp:Label>
<asp:TextBox ID="datetimepicker2" ClientIDMode="Static" runat="server" CssClass="form-control"></asp:TextBox>
</div>
<div class="form-group">
<asp:Label ID="RoomsLabel" runat="server" Text="Rooms:"></asp:Label>
<select class="form-control" id="rooms">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-6">
<asp:Label ID="Label2" runat="server" Text="#1:"></asp:Label>
<br />
<asp:Label ID="Label1" runat="server" Text="Adult:"></asp:Label>
<asp:DropDownList ID="adults" CssClass="form-control" runat="server">
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
</asp:DropDownList>
</div>
<div class="col-sm-6">
<br />
<asp:Label ID="Label3" runat="server" Text="Children:"></asp:Label>
<asp:DropDownList ID="childrens" CssClass="form-control" runat="server">
<asp:ListItem>0</asp:ListItem>
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
</asp:DropDownList>
</div>
</div>
<!-- From group for two rooms -->
<div class="form-group">
<div class="col-sm-6">
<asp:Label ID="Label4" type="hidden" runat="server" Text="#2:"></asp:Label>
<br />
<asp:DropDownList ID="adults2" type="hidden" ClientIDMode="static" CssClass="form-control" runat="server">
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
</asp:DropDownList>
</div>
<div class="col-sm-6">
<br />
<asp:DropDownList ID="childrens2" type="hidden" ClientIDMode="static" CssClass="form-control" runat="server">
<asp:ListItem>0</asp:ListItem>
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
</asp:DropDownList>
</div>
</div>
</div>
<div class="form-group">
<br />
<asp:Button ID="Button7" runat="server" OnClick="checkForResevation" Text="Check Availability" CssClass="my-btn" />
</div>
</div>
Is there a way to make it hidden before page is loading so you can't see it, because then what i am doing could work..
Hope someone can take a look.

Im not sure how to exactly achieve this, but why dont you try it using the razer sytax #if statements.
details can be found here:
http://haacked.com/archive/2011/01/06/razor-syntax-quick-reference.aspx/

You can try to use css with initial property set as display:none for 2 dropdown lists and then at the time you require the dropdown to be visible, update display:block.

protected void Page_Load(object sender, EventArgs e)
{
adults2.Visible = false;
childrens2.Visible = false;
}
have you try?

I found what i was looking for, and wanted to show the answer.
Added this code in the scripting for JavaScript/Jquery:
$(function () {
$('#<%=rooms.ClientID%>').on('change', function () {
$("#<%=adults2.ClientID%>,#<%=childrens2.ClientID%>,# <%=HiddenLabel2.ClientID%> ")[this.value == "2" ? "show" : "hide"]();
});
});
To get it to work.. i needed to add the display:none in my css file for the Asp:DropDownLists.

linkbutton error inside nested update panel

I have a page displaying post with comments and subcomments , each comment have a reply linkbutton when clicked it shows a textbox and a button to add subcomments, the problem is the linkbutton only works the 1st and 2nd time .... the third time nothing happnes i tried debugging it and i get nothing at all it didn't go to the server here is the code
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="addComment_btn" />
</Triggers>
<ContentTemplate>
<asp:Repeater ID="Repeater1" runat="server"
onitemdatabound="Repeater1_ItemDataBound"
onitemcommand="Repeater1_ItemCommand">
<ItemTemplate>
<ol class="cosmo-comment-list cosmo-comment-plain">
<li class="comment even thread-even depth-1" id="li-comment-2">
<div id="comment-2" class="comment-body">
<asp:HiddenField ID="commentID_hidden" runat="server"
Value='<%# Eval("comments_ID") %>' />
<div class="cosmo-comment-thumb"><img alt="" src="images/default_avatar.jpg" class="avatar avatar-60 photo" height="60" width="60"></div>
<div class="cosmo-comment-leftpointer"></div>
<div class="cosmo-comment-quote">
<div class="cosmo-comment-textinfo">
<span class="user"><%# Eval("commenter_name")%></span>
<span class="time"><%#Eval("comment_date")%> </span>
<span class="gray reply fr"><a class="comment-reply-link" href="#">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:LinkButton ID="reply_linkbtn" runat="server" Visible="false" CommandName="reply">Reply</asp:LinkButton>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="reply_linkbtn" />
</Triggers>
</asp:UpdatePanel>
</a></span>
</div>
<p> <%# Eval("text") %> </p>
</div>
</div>
</li>
</ol>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="reply_linkbtn" />
</Triggers>
<ContentTemplate>
<asp:TextBox ID="subcomment_textbox" runat="server" Visible="false"></asp:TextBox>
<asp:Button ID="add_subcomment_btn"
runat="server" Text="Button" Visible="false"/>
</ContentTemplate>
</asp:UpdatePanel>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
Edit: Problem fixed it was in the code behind I don't know the actual reason but in the page load I always called the repeater.Databind() method and that caused the problem... when i made a condition if (!IsPostBack) and then bind the data the problem was fixed