Multiple ASP modal popups on one page - asp.net

We have a working modal popup on an asp.net page, and need to add another one. A linkbutton opens the first one.
But if we try adding code for another linkbutton to open a second popup, which will use another mp extender control, neither one of them work. If we then remove the second popup and extender code, it works again.
I posted this question before but got an answer about using them in a gridview, which is not what is going on. This issue is not that complicated, just the fact that we can't get two separate popups working on a page. Are there any bugs or anything that would be preventing this from working?
The code below is for the working popup. It seems logical that if we add code that works to a page and give the controls new names, it should work as well, right? Anyway, a little help?
<!--modal popup extender-->
<ajax:ModalPopupExtender ID="mpe1" runat="server"
DropShadow="false"
TargetControlID="btn1"
PopupControlID="mp1"
BehaviorID="ModalPopBehavior"
CancelControlID="btnCancel">
</ajax:ModalPopupExtender>
<!--modal panel-->
<asp:Panel ID="mp1" runat="server" EnableViewState="true" Visible="False" Width="290px" height="140px"
BorderWidth="4px" BorderStyle="Ridge" BorderColor="Control" style="display:none;" >
<asp:Table ID="Table1" runat="server" BorderStyle="None" Width="290px" Height="140px" BackColor="#ffffee">
<asp:TableRow ID="TableRow1" runat="server">
<asp:TableCell ID="TableCell1" runat="server">
<asp:Label ID="lbl1" runat="server" CssClass="PanelLabel"
Style="left: 60px; position: absolute; top: 4px" Text="label1"
ForeColor="#0000C0" />
<asp:Label ID="lbl2" runat="server" CssClass="StdLabel"
Style="left: 6px; position: absolute; top: 30px" Text="label2" />
<asp:TextBox ID="txt1" runat="server" CssClass="StdTextbox"
Style="left: 6px; position: absolute; top: 44px" Width="120px" />
<asp:Label ID="lbl3" runat="server" CssClass="StdLabel"
Style="left: 160px; position: absolute; top: 30px"
Text="label3" />
<asp:TextBox ID="txt2" runat="server" CssClass="StdTextbox"
Style="left: 160px; position: absolute; top: 44px" Width="120px" />
<asp:Button ID="btnOK" runat="server"
Style="font-family: Tahoma; font-size: 11px; color: Navy; left: 60px;
position: absolute; top: 86px" Text="OK" Width="90px" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" Width="50px"
style="font-family: Tahoma; font-size: 11px; color: Navy; top: 86px; left: 170px;
position:absolute;"/>
</asp:TableCell>
</asp:TableRow>
</asp:Table></asp:Panel>
In the page there is also the hidden button for the popup. it looks like this:
<!--hidden button for modal popup -->
<asp:Button ID="btn1" visible="true" runat="server" Style="display: none" Enabled="false" />

ok so the problem was that the behaviorID property for each extender had to be unique. Once I set the behaviorID to the same name as the ID in each extender, they all work. Of course all other controls on all popup objects themselves must also be unique.

Related

ASP NET LinkButton - Inner Controls Removed

We have the follow repeater construct on our home page:
<asp:Repeater runat="server" ID="repShortcuts" OnItemDataBound="repShortcuts_ItemDataBound">
<ItemTemplate>
<asp:LinkButton runat="server" ID="lnkShortcut" PostBackUrl='<%# Eval("LinkWithTab") %>' Text="" ViewStateMode="Enabled" Style="text-decoration: none;">
<div style="margin-left: 2px; margin-right: 2px; height: 90px; display: inline-block; white-space: normal; text-align: center; vertical-align: top;">
<asp:Image
runat="server"
ID="imgShortcut"
ImageUrl='<%# String.Format("./Icons/{0}{1}",Session["DetailsBoxTextColour"].ToString().ToLower() == "black" ? "d" : "", Eval("ParentIcon")) %>'
CssClass="MenuImage"
Style="margin-bottom: 0px;"
/>
<asp:Label
runat="server"
ID="lblShortcut"
Text='<%# Eval("DisplayName") %>'
CssClass="MenuText"
Style="font-size: small; overflow: hidden; width: 110px; white-space: pre-line; text-wrap: normal; display: inline-block;"
></asp:Label>
</div>
</asp:LinkButton>
</ItemTemplate>
<FooterTemplate>
<asp:Label ID="lblEmptyData" runat="server" CssClass="DetailsBoxSettingLabel MarginTop5" Text="You currently have no shortcuts." Visible="false" />
</FooterTemplate>
</asp:Repeater>
When viewing the page (GET):
On server A (live) the inner controls are rendered as expected (this is an image and some text). Also works on all our dev machines.
On server B (uat) and some user machines which have the application installed, the inner controls are removed and we are just left with the anchor tag for the linkbutton.
This seems to be related to Microsoft Connect issue 718810 which is nowhere to be found now. Completely lost as to what's going on here. Same code, same server setup essentially.

How to fix issue with required field validator

I inserted a required field validator in my inserttemplate of my listview. The validator is suppose to check if a value was selected in the listbox when a user clicks insert. It does what is suppose to do however, I have a search button outside the listview that displays the listview columns and when that is clicked the required field validator is triggered. I only want it to trigger when the insert button is clicked within the listview. Is this possible?
Search Button located in ContentTemplate
<div style="padding-top: 5em; text-align: center; margin-left: auto; margin-right: auto; left: 0; right: 0; width:100%">
<b style="padding-right: .5em">FormSection </b>
<asp:TextBox ID="SectionSearchBox" runat="server"></asp:TextBox>
<b style="padding-left: 1em; padding-right: .5em">SubSection</b>
<asp:TextBox ID="SubSectionSearchBox" runat="server"></asp:TextBox>
<b style="padding-left: 1em; padding-right: .5em">Section Item</b>
<asp:TextBox ID="SectionItemSearchBox" runat="server"></asp:TextBox>
<asp:Button ID="SearchButton" Height="30px" runat="server" Text="Search" OnClick="SearchButton_Click" />
</div>
Required Field Validator located in content template in the listview's insert template
<span style="color:red">
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Required Field!" ControlToValidate="formsection"></asp:RequiredFieldValidator>
</span>
<div style="height: auto; width: 250px; overflow: auto; border: solid; border-color: ActiveBorder" >
<asp:ListBox ID="formsection" runat="server" DataSourceID="FormSectionDataSource" DataTextField="FormSection" DataValueField="FormSectionID" AppendDataBoundItems="True" SelectedValue='<%# Bind("FormSectionID") %>' Height="150px">
<asp:ListItem Selected="True" Value=""><- please select -></asp:ListItem>
</asp:ListBox>
</div>
I figured it out, in the code behind I used.
SearchButton.CausesValidation = false;
When the button is clicked it does not trigger the validation.

How do I get asp:Label to take up space before having text assigned

I have 2 buttons that need to be on the right hand side of a form and have a label on the right. The problem I am running into is that once the action has been performed, the label will read "successfully ...." or "error couldn't..." and it screws up my layout. when the form first appears it screws up my button layouts because the label is empty, then when the action has been performed, my label gets populated with text and then pushes my buttons into the right place. Is there a way to to keep my buttons in place?
Here is my layout:
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="dropDownList" style="position: relative;" runat="server">
<label>
Select New File:
</label>
<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" />
<br />
/////////////////////////area of interest
<asp:Button ID="btnCancel" runat="server" Text="Cancel" Style="position: relative;
float: left; margin-left: 450px;" OnClientClick="parent.$.fancybox.close();" />
<asp:Button ID="btnMoveCaseFile" runat="server" Text="" Style="position: relative;
float: right; margin-right: 63px; margin-left: -45px; top: 0px; left: 0px; width: 98px;"
OnClick="btnMoveCaseFile_Click" />
<asp:Label runat="server" ID="lblStatus"></asp:Label>
<br />
///////////////////////////////////////////////
</div>
</ContentTemplate>
I'm trying to get the buttons to light up under the dropdownlist and have the Label show on the same line as the buttons but on the left. (this code has the label on a new line because I gave up)
You can set your controls in table cells , and fix the width of cells.
Nota : you can fix width with css class.
<table>
<tr>
<td>
<asp:Button ID="btnCancel" runat="server" Text="Cancel" Style="position: relative; float: left; margin-left: 450px;" OnClientClick="parent.$.fancybox.close();" />
</td>
<td>
<asp:Button ID="btnMoveCaseFile" runat="server" Text="" Style="position: relative; float: right; margin-right: 63px; margin-left: -45px; top: 0px; left: 0px; width: 98px;"
OnClick="btnMoveCaseFile_Click" />
</td>
<td>
<asp:Label runat="server" ID="lblStatus"></asp:Label>
</td>
</tr>
</table>

Run time issue in ASP.Net

I am new to web development in ASP.NET and I have just designed a small website. Though in design time I have my controls placed correctly, at run time the controls appear overlapped. I have seen the source view and the values for left and top were fine. Have a look into these screen shots:
At design time:
At run time in Chrome and IE:
In Mozilla:
My code in source view for the text boxes:
<asp:TextBox ID="TextBox1" runat="server"
style="z-index: 1; left: 102px; top: 339px; position: absolute"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"
style="z-index: 1; left: 247px; top: 327px; position: absolute"></asp:TextBox>
<asp:TextBox ID="TextBox3" runat="server"
style="z-index: 1; left: 248px; top: 360px; position: absolute"></asp:TextBox>
There might be a simple solution, but since I am new to this, please let me know what has to be done.
I would reorganize your markup a bit. You could try:
<div style="position: absolute; left: 102px; top: 327px;">
<div id="left_column" style="float:left">
<asp:TextBox ID="TextBox1" runat="server" />
</div>
<div id="right_column" style="float: left; margin-left: 15px;">
<asp:TextBox ID="TextBox2" runat="server" />
<asp:TextBox ID="TextBox3" runat="server" />
</div>
</div>
If you want more spacing between the elements add some margin og padding.

ms ajax hover extender error "An extender can't be in a different UpdatePanel than the control it extends"

It is obvious that the control and the extender are in the same update panel. Yet, a "An extender can't be in a different UpdatePanel than the control it extends" error occurs.
NOTE: The user control is declared within an UpdatePanel on the page using it. That makes the UpdatePanel in the user control "nested".
The following code is in the Asp.Net UserControl:
<asp:TemplateField HeaderStyle-Width="0px">
<ItemTemplate>
<asp:UpdatePanel ID="hoverMenuUpdatePanel" runat="server">
<ContentTemplate>
<ajaxtoolkit:HoverMenuExtender ID="extensionActionHoverMenuExtender" runat="server"
PopupControlID="extensionActionHoverMenu" PopupPosition="Left" HoverCssClass="popupHover"
TargetControlID="extensionActionHoverMenu" OffsetX="5" PopDelay="50" />
<asp:Panel ID="extensionActionHoverMenu" runat="server" CssClass="modalDialogPanel"
Style="display: none; height: 200px; width: 300px; padding: 5px;">
<div style="border-color: #3A362C; padding: 2px; border-right-style: solid; border-right-width: thin;
float: left;">
<div class="title">
Reserve Extension: &nbsp
<asp:Label ID="extensionToReserveLabel" runat="server" Text='<%# Eval("ConsolidatedPhoneExtensionPK") %>' />
</div>
<div id="userType" style="border-style: solid; border-width: 1px; padding: 5px; height: 80px;
width: 200px; background-color: #E2DDBA; margin-bottom: 8px;">
User Type:
<asp:RadioButtonList ID="reservedUserTypeRadioButtonList" runat="server">
<asp:ListItem Selected="true" Text="999/988" Value="Employee" />
<asp:ListItem Text="Other" Value="Other" />
</asp:RadioButtonList>
</div>
<div>
Employee No:<asp:TextBox ID="reserveEmployeeNo" runat="server" OnTextChanged="reserveEmployeeNo_TextChanged"
AutoPostBack="true" />
<asp:Label ID="employeeNameDisplayLabel" runat="server" />
<asp:Label ID="reserveUserMessageAreaLabel" runat="server" />
</div>
</div>
<div>
<div>
<asp:Button ID="selectButton" runat="server" Text="View" CommandName="Select" Width="75px" />
</div>
<div>
<asp:Button ID="reserveButton" runat="server" Text="Reserve" CommandName="Reserve"
CommandArgument='<%# Eval("ConsolidatedPhoneExtensionPK") %>' Width="75px" />
</div>
</div>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="reserveEmployeeNo" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
</ItemTemplate>
</asp:TemplateField>
Create a panel with an ID of "popup" (it can be anthing you like though). In this panel place any buttons or what ever you want, this will be your popup menu. Set your PopupControlID to "popup".
Your TargetControlID should be the ID of the panel you want the manu to popup in (extensionActionHoverMenu?).
PopupControlID and TargetControlID are the same. Your TargetControlID should be some other form element.
HoverMenu Sample:
TargetControlID - The control that the extender is targeting. When
the mouse cursor is over this control,
the hover menu popup will be
displayed.
PopupControlID - The ID of the control to display when mouse is over
the target control. In this case, it's
just a simple panel with two links:
Sometimes it's not about the updatepanel but about other items of the toolkit.
I got this message while using the FilteredTextBoxExtender. The control defined int the TargetControlID was in a different updatepanel.

Resources