I use a ModalPopupExtender from the Ajax ControlToolkit in my Webapplication.I set it's Drag property is true,but when I drag the popup panel and drop it at the new position,it comes back the original position at once.I want to get the effect like the Sample, can drag/drop at different position. How in the example on the page ..
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/ModalPopup/ModalPopup.aspx
Here My Code:
<form id="form1" runat="server">
<asp:scriptmanager id="ScriptManager1" runat="server">
</asp:scriptmanager>
<asp:button id="btnAddNew" runat="server" text="New Expanse" />
<asp:modalpopupextender id="ModalPopupExtender1"
runat="server" cancelcontrolid="btnCancel"
okcontrolid="btnOkay" targetcontrolid="btnAddNew"
popupcontrolid="Panel1" popupdraghandlecontrolid="PopupHeader"
drag="true" backgroundcssclass="ModalPopupBG">
</asp:modalpopupextender>
<div class="popupConfirmation" id="Panel1" style="display: none">
<iframe id="frameeditexpanse" src="Benutzer.aspx" frameborder="1" height="500px" width="520px">
</iframe>
<div class="popup_Buttons" style="display: none">
<input id="btnOkay" type="button" value="Speichern" />
<input id="btnCancel" type="button" value="Abbrechen" />
</div>
</div>
PS: And I want input in the TextBoxes in the Background if the Dialog is open.
update:
...
<asp:modalpopupextender id="ModalPopupExtender1"
runat="server" cancelcontrolid="btnCancel"
okcontrolid="btnOkay" targetcontrolid="btnAddNew"
popupcontrolid="Panel1" popupdraghandlecontrolid="PopupHeader"
drag="true" backgroundcssclass="ModalPopupBG">
</asp:modalpopupextender>
<div id="PopupHeader" style="display: none; background-color:Blue">
Benutzerinformationen
</div>
<div class="popupConfirmation" id="Panel1" style="display: none">
<iframe id="frameeditexpanse" src="ZweiteSeite.aspx" frameborder="1">
</iframe>
<div class="popup_Buttons" style="display: none">
<input id="btnOkay" type="button" value="Speichern" />
<input id="btnCancel" type="button" value="Abbrechen" />
</div>
...
Try this
<style type="text/css">
.modalPopup
{
background-color: #ffffdd;
border-width: 3px;
border-style: solid;
border-color: Gray;
padding: 3px;
width: 100%;
}
</style>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Button ID="btnAddNew" runat="server" Text="New Expanse" />
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" CancelControlID="btnCancel"
OkControlID="btnOkay" TargetControlID="btnAddNew" PopupControlID="Panel1" PopupDragHandleControlID="PopupHeader"
Drag="true" BackgroundCssClass="ModalPopupBG">
</cc1:ModalPopupExtender>
<div class="popupConfirmation" id="Panel1" style="display: none">
<asp:Panel runat="server" ID="PopupHeader" CssClass="modalPopup">
**************** Drag me ****************
</asp:Panel>
<iframe id="frameeditexpanse" src="http://www.bing.com" frameborder="1" height="500px"
width="520px"></iframe>
<div class="popup_Buttons" style="display: none">
<input id="btnOkay" type="button" value="Speichern" />
<input id="btnCancel" type="button" value="Abbrechen" />
</div>
</div>
The answer posted by #yogi works perfectly. If there are issues, try browsing the same page in a different browser, as it works smoothly in Edge and Chrome, but Internet Explorer has issues with moving the popup around and drag/drop.
Related
Hi I was trying to create a scrollbar for the chat page for the site I'm building, and ever since I added the scrollbar in (overflow), after about 5 seconds (about when the AJAX is triggered), the textbox and button that are right under the field used for displaying messages disappear, namely the MessageTextBox and SendButton.
Here is the code for my html page:
<form id="form1" runat="server">
<div class="row">
<div class="well center" style="width:50%">
<a>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Timer ID="Timer1" runat="server">
</asp:Timer>
</a>
<asp:UpdatePanel runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="tim" EventName="Tick" />
</Triggers>
<ContentTemplate>
<asp:Timer ID="tim" Interval="5000" Enabled="true" OnTick="UpdateChat" runat="server"></asp:Timer>
<div style="overflow: auto; height: 220px; width: 100%;">
<center>
<asp:Textbox ID="ChatLabel" textmode="MultiLine" style="overflow:auto;width:80%;height:200px" ReadOnly="true" runat="server"></asp:Textbox>
</center>
</ContentTemplate>
</asp:UpdatePanel>
<asp:TextBox ID="MessageTextBox" runat="server" Width="438px"></asp:TextBox>
<asp:Button ID="SendButton" runat="server" Text="Send"/>
</div>
</div>
</form>
I have a functionality where I am uploading an excel file and downloading its format to again Upload the data.
So for that I am using Update Progress for loading in between
My Update progress is working fine for Download Format button, but it is not working for Button Upload
Below is my aspx code:-
<asp:UpdatePanel ID="uptc" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:TabContainer ID="TbTabValue" runat="server" ActiveTabIndex="0" AutoPostBack="true" OnActiveTabChanged="tc_ActiveTabChanged">
<asp:TabPanel ID="tpEnterprise"
HeaderText="Enterprise"
runat="server"
ActiveTabIndex="1"
OnDemand="true"
AutoPostBack="false"
TabStripPlacement="Top"
CssClass="ajax__tab_xp"
ScrollBars="None"
UseVerticalStripPlacement="true"
VerticalStripWidth="120px"
TabIndex="1">
<ContentTemplate>
<asp:UpdateProgress ID="UpdateProgress" runat="server" DynamicLayout="False" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="0">
<ProgressTemplate>
<div class="loadingModal">
<div class="center">
<img alt="" src="../Images/loading.gif" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="row">
<div class="col-sm-4">
<label>Select Category</label>
<asp:DropDownList ID="ddlEnterpriseCategory" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlEnterpriseCategory_SelectedIndexChanged"></asp:DropDownList>
<asp:Button runat="server" ID="btnDownloadEnterpriceExcel" Text="Download Format" Class="btn btn-default" OnClick="downloadEnterpriceExcel_Click" />
</div>
<div class="col-sm-8">
<label>Upload File</label>
<asp:FileUpload ID="EnterpriseFileuploader" runat="server" />
<br />
<asp:Button ID="btnUpload" runat="server" Text="Upload"
OnClick="btnUpload_Click" Class="btn btn-default" />
</div>
</div>
<br />
<div class="row">
<div class="col-sm-12">
<asp:Panel runat="server" ID="gvInputDataPanel">
<asp:GridView ID="gvInputData" runat="server" CssClass="table table-bordered" AllowPaging="True" OnPageIndexChanging="gvInputData_PageIndexChanging" EmptyDataText="No data found."
ShowHeaderWhenEmpty="True">
</asp:GridView>
</asp:Panel>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnDownloadEnterpriceExcel" />
<asp:PostBackTrigger ControlID="btnUpload" />
</Triggers>
</asp:UpdatePanel>
</ContentTemplate>
</asp:TabPanel>
<asp:TabPanel ID="tpUBR" ClientIDMode="Static" HeaderText="UBR" runat="server" TabIndex="2">
<ContentTemplate>
2
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
</ContentTemplate>
</asp:UpdatePanel>
I have a problem with Javascript not load in asp.net when an updatepanel postback to the server and the problem is that javascript code is not in the same page where the updatepanel is so I can put it in pageLoad() function it is like this:
<script src="js/keyboard.js" type="text/javascript"></script>
and i use ASP.Net 4 and c# and this is my code code:
<link href="css/keyboard.css" rel="stylesheet" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div style="text-align: left; padding-right: 140px">
<dx:aspxcombobox id="comboBoxLangauge" clientinstancename="comboboxLang"
cssclass="combo" runat="server" width="140px" clientidmode="Static">
<Items>
<dx:ListEditItem Text="English to Kurdish" Value="1" Selected="true" />
<dx:ListEditItem Text="Kurdish to English" Value="2" />
</Items>
<ClientSideEvents SelectedIndexChanged="IndexChanged" />
</dx:aspxcombobox>
</div>
<br />
<br />
<asp:Button ID="btnTranslate" runat="server" Text="Search" ClientIDMode="Static"
CssClass="Search" OnClick="btnTranslate_Click" />
<asp:TextBox ID="txtBoxWord" runat="server" ClientIDMode="Static"
class="keyboardInput Search" Style="width: 260px; direction: ltr"></asp:TextBox>
<asp:AutoCompleteExtender ID="autocom" ClientIDMode="Static" runat="server" CompletionSetCount="10"
EnableCaching="true" MinimumPrefixLength="1" TargetControlID="txtBoxWord" ServicePath="~/translator/AutoComplete.asmx" ServiceMethod="GetCompletionList">
</asp:AutoCompleteExtender>
<asp:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="OutPanel"
Corners="All" Radius="5" BorderColor="Silver">
</asp:RoundedCornersExtender>
<br />
<br />
<div id="OutPanel" runat="server" clientidmode="Static" style="width: 440px; height: 200px; overflow: auto; margin-left: auto; margin-right: auto; padding-top: 10px;" visible="false">
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div id="OutPanel" runat="server" clientidmode="Static" style="width:440px;height:200px;overflow:auto;margin-left:auto;margin-right:auto;padding-top:10px;" visible="false">
</div>
</ContentTemplate>
</asp:UpdatePanel>
"The problem is that javascript code is not in the same page where the updatepanel is"
Whereas make sure your JavaScript is available on the page with UpdatePanel to load it properly.
I have a aspx page, with a modalpopup extender, and it's work perfect.
But I place an Iframe on the end of the page, and the modelpopup work only when I click the button twice. I can't find the answer for this problem.
<asp:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate>
<div class="szamlabal14">
Csatlakozási pont:
<input type="hidden" id="hdnCsatlakozasiPontKod" runat="server" value="0" />
<asp:TextBox ID="txtCsatlakozasiPont" runat="server" Width="480" onkeydown="return false;"></asp:TextBox>
<asp:Button ID="btnCsatlakozasiPont" runat="server" Text="..." />
<cc1:ModalPopupExtender ID="mpeCsatlakozasiPont" runat="server" CancelControlID="btnCancel"
TargetControlID="btnCsatlakozasiPont" OkControlID="btnOk" PopupControlID="pnPopup"
PopupDragHandleControlID="PopupHeader" Drag="true" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnPopup" Style="display: none" runat="server">
<div class="modalPopup">
<div style="position: relative; left: 670; margin: 3px;">
<asp:Button ID="btnCancel" runat="server" Text="x" CausesValidation="false" OnClientClick="return false;" />
<asp:Button ID="btnOk" runat="server" Text="Ok" Style="display: none" CausesValidation="false"
OnClientClick="return false;" />
</div>
<iframe id="ifrCsatlakozasiPont" height="350px" width="700px" src="CsatlakozasiPont.aspx"
frameborder="1"></iframe>
</div>
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel>
When I delete the following part, the modalpopup work well again.
<div style="margin-top: 10px; z-index: 10; border: 1px solid black; position: absolute;
top: 130px;">
<iframe src="http://ismts38105/viewer/ImageViewer.xbap?<%=Image%> width="1440"
height="400" />
</div>
You need to set the permissions on your Internet Explorer. XBAP requires you add the domain/IP to the trusted sites, or else you will be unable to do anything with them.
I have a form which I load within a modal window in that from I have used a updatepanel and a textbox named txtAccountInfo. I have set textchange event on that textbox first time change text event fired but in the second time textchange shows this message.
uncaught exception: [Exception... "'Sys.InvalidOperationException: Sys.InvalidOperationException: Could not find UpdatePanel with ID 'uppMain'. If it is being updated dynamically then it must be inside another UpdatePanel.' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001c (NS_ERROR_XPC_JS_THREW_JS_OBJECT)" location: "JS frame :: chrome://firebug/content/spy.js :: callPageHandler :: line 744" data: no]
my ASP.Net Code
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="mAddOrder.aspx.cs" Inherits="iSBBranch.ModalWindow.mAddOrder" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div style="width: 850px;">
<form id="form1" class="form" action="ModalWindow/mAddOrder.aspx" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="uppMain" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:HiddenField ID="txtOrderType" Value="p" runat="server" />
<asp:HiddenField ID="txtOrderStatus" Value="n" runat="server" />
<asp:HiddenField ID="txtOrderRef" runat="server" />
<fieldset id="AccountId" style="width: 783px; position:relative;">
<legend>Account Information</legend>
<p>
<label>
*Account Number </label>
<span class="relative">
<asp:TextBox ID="txtInvestorRef" CssClass="TextBox" runat="server"
OnTextChanged="txtInvestorRef_TextChanged" AutoPostBack="True"></asp:TextBox>
<span class="<%=iSBBranch.ModalWindow.mAddOrder.AccountStatus%>"></span></span>
<div style="position:absolute; right:100px; top:10px;">
<asp:UpdateProgress ID="pbContactAddress" runat="server" AssociatedUpdatePanelID="uppMain"
DisplayAfter="100" DynamicLayout="true">
<ProgressTemplate>
Loading
<img alt="Loading..." src="images/info-loader.gif" />
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</fieldset>
<div class="columns">
<!-- Left column -->
<div class="colx2-left">
<fieldset>
<legend>Post Order</legend>
<p class="inline-medium-label" style="text-align: right;">
<label for="field1">
Company</label>
<asp:DropDownList CssClass="Combobox" ID="ddlCompany" runat="server" OnSelectedIndexChanged="ddlCompany_SelectedIndexChanged"
AutoPostBack="True">
</asp:DropDownList>
</p>
<br class="clear" />
<p class="inline-medium-label" style="text-align: right;">
<label for="field1">
Total Quantiy</label>
<asp:TextBox ID="txtTotalQuantity" runat="server" CssClass="NumberField" ReadOnly="true">0</asp:TextBox>
</p>
<br class="clear" />
<p class="inline-medium-label" style="text-align: right;">
<label for="field1">
Matured Balance</label>
<asp:TextBox ID="txtMaturedBalance" runat="server" CssClass="NumberField" ReadOnly="true">0</asp:TextBox>
</p>
<br class="clear" />
<p class="inline-medium-label" style="text-align: right;">
<label for="field1">
Share Quantity</label>
<asp:TextBox ID="txtShareQuantity" CssClass="NumberField" runat="server" Text="0"
OnTextChanged="txtShareQuantity_TextChanged" AutoPostBack="True"></asp:TextBox>
</p>
<br class="clear" />
<p class="inline-medium-label" style="text-align: right;">
<label for="field1">
Rate</label>
<asp:TextBox ID="txtRate" CssClass="NumberField" runat="server" OnTextChanged="txtRate_TextChanged"
AutoPostBack="True">0</asp:TextBox>
</p>
<br class="clear" />
</fieldset>
</div>
<!-- Right column -->
<div class="colx2-left" style="margin-left: 10px;">
<fieldset>
<legend>Company’s Current</legend>
<p class="inline-medium-label" style="text-align: right;">
<label for="field1">
Market Type</label>
<asp:TextBox ID="TextBox1" ReadOnly="true" CssClass="TextBox" runat="server"></asp:TextBox>
</p>
<p class="inline-medium-label" style="text-align: right;">
<label for="field1">
Last Trade Price</label>
<asp:TextBox ID="TextBox2" runat="server" CssClass="NumberField" ReadOnly="true"></asp:TextBox>
</p>
<p class="inline-medium-label" style="text-align: right;">
<label for="field1">
Market Lot</label>
<asp:TextBox ID="TextBox3" runat="server" CssClass="NumberField" ReadOnly="true"></asp:TextBox>
</p>
<p class="inline-medium-label" style="text-align: right;">
<label for="field1">
Highest Price
</label>
<asp:TextBox ID="TextBox4" runat="server" CssClass="NumberField" Enabled="false"></asp:TextBox>
</p>
<p class="inline-medium-label" style="text-align: right;">
<label for="field1">
Lowest Price</label>
<asp:TextBox ID="TextBox5" Enabled="false" CssClass="NumberField" runat="server"></asp:TextBox>
</p>
</fieldset>
</div>
</div>
<br class="clear" />
<div class="">
<fieldset style="width: 783px;">
<div style="float: right;">
<p class="inline-medium-label" style="text-align: right;">
<label>
Total Trade Amount</label>
<asp:TextBox ID="txtTotalTradeAmount" runat="server" CssClass="NumberField" ReadOnly="true"></asp:TextBox>
</p>
</div>
</fieldset>
</div>
<br class="clear" />
<div style="margin-top: 10px;">
<asp:Button ID="btnSave" CssClass="big-button" runat="server" Text="Save"
onclick="btnSave_Click" />
<asp:Button ID="Button2" OnClientClick="return $.modal.current.closeModal();" CssClass="big-button"
runat="server" Text="Close" />
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />
<%-- <asp:AsyncPostBackTrigger ControlID="txtInvestorRef" EventName="TextChanged" />--%>
</Triggers>
</asp:UpdatePanel>
</form>
</div>
<script type="text/javascript">
CenterWindow();
</script>
</body>
</html>
If I close this from and again open the from then no error shows in any times on that session.
Please advise.
Without seeing any code, this is just a guess, but this error usually means that you are trying to force one UpdatePanel to refresh from within another UpdatePanel. Are you trying to set a trigger for one, that is located within another? This is not possible.
You are also using a modal window. What are you using to render this? Is it placing the modal div within the ASP.NET form? jQuery and simpleModal do not, by default, they append it to the end of the DOM. So trying to update an UpdatePanel from inside such a dialog would also give you this error.
Please post some code and people will be able to help you better.
Try using FireBug to see if the modal window messes somehow with your updatepanel code. I might have changed the ID.