I have an autocompleteextender that displays the list of countries. In the same textbox, when I type something and click on "Search" button, a pop-up should be opened and should display the matching countries. I am using modalpopupextender for the popup.
aspx code:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<contenttemplate>
<asp:TextBox id="TextBox1" runat="server" Width="250px"></asp:TextBox>
<asp:ImageButton id="ImageButton1" onclick="imgBtnSearch_Click" runat="server" ImageUrl="~/Images/Lab/search.jpg"></asp:ImageButton>
<cc1:AutoCompleteExtender id="TextBox1_AutoCompleteExtender" runat="server" EnableCaching="true" CompletionSetCount="10" MinimumPrefixLength="1" ServicePath="AutoComplete.asmx" UseContextKey="True" TargetControlID="TextBox1" ServiceMethod="GetCountryInfo">
</cc1:AutoCompleteExtender>
<cc1:ModalPopupExtender id="ModalPopupExtender1" runat="server" TargetControlID="ImageButton1" BackgroundCssClass="ModalPopupBG" Drag="true" PopupDragHandleControlID="PopupHeader" PopupControlID="updatePanel2" CancelControlID="btnCancel" ></cc1:ModalPopupExtender>
</contenttemplate>
</asp:UpdatePanel>
<asp:UpdatePanel id="updatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:RadioButtonList id="RadioButtonList1" runat="server" Width="400" Height="400" RepeatColumns="5" RepeatLayout="Table" RepeatDirection="Vertical" AutoPostBack="True"></asp:RadioButtonList>
<DIV class="Controls">
<INPUT id="btnOk" type="button" value="OK" />
<INPUT id="btnCancel" type="button" value="Cancel" />
</DIV>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ImageButton1" EventName="Click"></asp:AsyncPostBackTrigger>
</Triggers>
</asp:UpdatePanel>
And in my codebehind:
protected void imgBtnSearch_Click(object sender, ImageClickEventArgs e)
{
LoadCountryPopUp();
ModalPopupExtender1.Show();
}
I am not getting any countries in my popup, although I get results via my autocompleteextender. On clicking the imagebutton, I get the popup without any content. Pls help!
Place your popup contents inside panel like this:
<asp:UpdatePanel id="updatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel id="pnlPopup" runat="server">
<asp:RadioButtonList id="RadioButtonList1" runat="server" Width="400" Height="400" RepeatColumns="5" RepeatLayout="Table" RepeatDirection="Vertical" AutoPostBack="True"></asp:RadioButtonList>
<DIV class="Controls">
<INPUT id="btnOk" type="button" value="OK" />
<INPUT id="btnCancel" type="button" value="Cancel" />
</DIV>
</Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ImageButton1" EventName="Click"></asp:AsyncPostBackTrigger>
</Triggers>
</asp:UpdatePanel>
and replace UpdatePanel's controls Id with this Panel's id:
<cc1:ModalPopupExtender id="ModalPopupExtender1" runat="server" TargetControlID="ImageButton1" BackgroundCssClass="ModalPopupBG" Drag="true" PopupDragHandleControlID="PopupHeader" PopupControlID="pnlPopup" CancelControlID="btnCancel" ></cc1:ModalPopupExtender>
and check if it works?
Try putting the extenders outside of the update panel, it should not be a child of what it is extending
Related
I want to use a update panel to update my repeater when I click om my btnUpload.
When I put my ascynFileUpload in the updatePanel is stop working, though the codebehind is ok.
But when I set my btnUpload as trigger and only put my repeater in the updatepanel, it doesn't refresh (which is good) but my codebehind stops working.
<div id="addEntry" class="row centered" runat="server">
<asp:Label ID="lblFeedback" runat="server"></asp:Label>
<abbr title="Max 20MB">
<asp:AsyncFileUpload ID="uploadEntry" runat="server" CompleteBackColor="White" />
</abbr>
<div id="uploading">
</div>
<asp:TextBox ID="txtEntryDescription" runat="server" TextMode="MultiLine" placeholder="Description upload (optional)"
Width="100%" Height="60px"></asp:TextBox><br />
<asp:Button ID="btnAddEntry" runat="server" Text="Upload" CssClass="btn btn-round"
OnClick="btnAddEntry_Click" />
<hr />
</div>
<div id="competitionRounds" class="row">
<asp:UpdatePanel ID="updatepnl" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Repeater ID="rptEntries" runat="server" DataSourceID="dsEntries">
<ItemTemplate>
<%# "<div class=\"imgThumb" + Eval("entryWinner") + " draggable\" style=\"background-image:url('uploads/"
+ Eval("entryImagename") + "');\" data-id=\""
+ Eval("pk_entryId") + "\"></div>"
%>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnAddEntry" EventName="click" />
</Triggers>
</asp:UpdatePanel>
</div>
I have an update panel that contains a label, a dropDownList and two buttons:
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="dropDownList" style="position:relative;" runat="server">
<label>
Select New File: </label>
<div id="ddl" runat="server">
<asp:DropDownList runat="server" ID="ddlCaseFiles" DataSourceID="dsMyCaseFiles" DataTextField="Display"
DataValueField="FileID" OnPreRender="ddl_PreRender" Width="524px" OnSelectedIndexChanged="ddlCaseFiles_SelectedIndexChanged" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="ddlCaseFiles"
ToolTip="Casefile Required" InitialValue="-1" Text="*" Display="Dynamic" />
<ajaxToolkit:ListSearchExtender ID="ddlExtCaseFiles" runat="server" PromptCssClass="ListSearchExtenderPrompt"
TargetControlID="ddlCaseFiles" BehaviorID="ddlExtCaseFiles" Enabled="True" />
</div>
<br />
<asp:Button ID="btnMoveCaseFile" runat="server" Text=""
style="float:left;" onclick="btnMoveCaseFile_Click"/>
<asp:Button ID="btnCancel" runat="server" Text="Cancel"
style="float:right" onclick="btnCancel_Click"/>
<br />
</div>
<asp:Label runat="server" ID="lblStatus"></asp:Label>
</ContentTemplate>
I am trying to get my buttons to line up like this:(button at the beginning of the DropDownList and a button at the End)
I've tried float-absolute etc.
I figured it out. Seems as though you have to add in px after the number.....
<asp:Button ID="btnMoveCaseFile" runat="server" Text=""
style="position:absolute; float:left; margin-left:104px;" onclick="btnMoveCaseFile_Click"/>
<asp:Button ID="btnCancel" runat="server" Text="Cancel"
style="position:relative; float:right; margin-right:63px;"
since I had margin-right:63; instead of margin-right:63px;
I am not understanding why this doesn't fire. It will not even call the event. Any thoughts? Really what I want to do, is prevent a full post-back. The page is large and each time it does a post back it jumps to the top.
<asp:UpdatePanel runat="server" id="UpdatePanel" updatemode="Conditional">
<ContentTemplate>
<p>
<asp:Label runat="server" ID="lblSnippet" AssociatedControlID="cmbSnippet">
From snippet:
</asp:Label>
<asp:DropDownList runat="server" ID="cmbSnippet" CssClass="dropdown" AutoPostBack="true">
<asp:ListItem>
None
</asp:ListItem>
<asp:ListItem>
Read Part
</asp:ListItem>
<asp:ListItem>
Read Feed
</asp:ListItem>
</asp:DropDownList>
</p>
<!--Code-->
<p>
<asp:Label runat="server" ID="lblCode" AssociatedControlID="txtCode">
From code:
</asp:Label>
<asp:TextBox runat="server" ID="txtCode" TextMode="MultiLine" CssClass="editor" MaxLength="100" Height="200" Wrap="false" />
</p>
</ContentTemplate>
<Triggers>
<asp:Asyncpostbacktrigger controlid="cmbSnippet" eventname="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
you have not declared the event
something like this:
<asp:DropDownList runat="server" ID="cmbSnippet" CssClass="dropdown" AutoPostBack="true" OnSelectedIndexChanged="cmbSnippet_SelectedIndexChanged">
and his relative handler in codebehind...
I'm trying to use a modal popup extender on my page so when I click a button, it must show a panel. Here is what I have:
<asp:UpdatePanel runat="server" ID="updPanel">
<ContentTemplate>
<ajaxToolkit:ModalPopupExtender ID="mpeEmailComplete" runat="server" TargetControlID="btnTesting"
PopupControlID="pnl" OkControlID="btnOk"
BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pnl" runat="server" style="display:none;">
<asp:UpdatePanel ID="udp" runat="server">
<ContentTemplate>
<asp:Panel runat="server" ID="pnlEmailComplete" Visible="false">
<asp:Label runat="server" ID="lblTest" Text="Testing testing testing"></asp:Label>
<asp:Button runat="server" ID="btnOk" Text="OK" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<asp:Button runat="server" ID="btnTesting" Text="Testing"/>
</ContentTemplate>
</asp:UpdatePanel>
but i can't get the panel to popup when the button is clicked. Anybody know why?
Your innermost panel has Visible=false.
<asp:Panel runat="server" ID="pnlEmailComplete" Visible="false"> *(change here)*
So, when you press the TESTING button, the ModalPopupExtender correctly causes the outer panel to display, but it's displaying an invisible inner panel, hence you see nothing on screen.
<asp:Panel ID="pnl" runat="server" style="display:none;"> *(this is ok)*
To fix, just yank the Visible=false from the outer panel (pnlEmailComplete)
Hope that helps!
Do you have any JavaScript errors and is pnl.Visible=False; set on the server-side anywhere?
Make sure you have the AjaxControlToolkit referenced properly, NuGet is the easiest way to add the reference.
http://nuget.org/packages/ajaxcontroltoolkit
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Btnshow" runat="server" Text="Show" OnClick="Btnshow_Click" />
<asp:Button ID="BtnTarget" runat="server" Text="Target" Style="display: none" />
<asp:TextBox ID="TextBox1" runat="server">
</asp:TextBox>
<input type="button" value="Get" onclick="abc()" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="BtnTarget"
PopupControlID="Panel1">
</asp:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" BackColor="Black" Width="300px" Height="300px">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="BtnHide" runat="server" Text="Hide Button" OnClick="BtnHide_Click" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="BtnHide" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Btnshow" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
I have a page with an updatepanel which contains a small login form - it runs fine when the user clicks on the submit button, but if the user presses the return key after entering their password, it does not run.
Here's the code...
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="loginButton" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:TextBox ID="username" MaxLength="11" runat="server" />
<asp:TextBox ID="password" MaxLength="64" runat="server" TextMode="Password" />
<asp:LinkButton ID="loginButton" OnClick="Submit_login" runat="server" Text="<img src='login.png' alt='Login' />" />
</ContentTemplate>
</asp:UpdatePanel>
If you add a panel in the Content template and assign the DefaultButton, it should submit the button when a user hits Enter.
<ContentTemplate>
<asp:panel id="p" runat="server" defaultbutton="loginButton">
//Form here with loginButton
</asp:panel>
</ContentTemplate>
Put your the controls that are inside <ContentTemplate> inside an Panel and set it's default button to be loginButton.
Like this:
<asp:Panel id="defaultPanel" runat="server" DefaultButton="loginButton">
<asp:TextBox ID="username" MaxLength="11" runat="server" />
<asp:TextBox ID="password" MaxLength="64" runat="server" TextMode="Password" />
<asp:LinkButton ID="loginButton" OnClick="Submit_login" runat="server" Text="<img src='login.png' alt='Login' />" />
</asp:Panel>