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.
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>
My AjaxFileUpload control has randomly stopped working in the last few weeks.
I am getting this chrome console error - "Uncaught TypeError: Cannot read property 'cannotDeserializeInvalidJson' of undefined" - whenever I click the control's upload button. I'm not sure if this error is to do with the control not working, but the control's OnUploadCompled method is not being called.
Am totally pulling my hair out over this, cannot figure out what is going wrong as I have not made any significant changes between it working and not.
Any help would obviously be greatly appreciated!
Relevant code:
<asp:UpdatePanel runat="server" style="display: inline-block; padding-right: 20px;">
<ContentTemplate>
<asp:Label ID="lblMessage" runat="server" Text="" Font-Names = "Arial"></asp:Label>
<asp:Image ID="imgAsset" runat="server" />
<asp:HiddenField ID="hdnURl" runat="server" />
<asp:Button ID="btnShowimages" text="Show Images" CssClass="gallery-link" OnClientClick="showGallery(); return false;" runat="server" Style="position: center; bottom: 5px;" />
<cc1:AjaxFileUpload ID="ajaxUpload" runat="server" OnClientUploadStart="clientUpload()" OnUploadComplete="ajaxUpload_UploadComplete" Width="280px" style="min-width:200px; visibility:hidden; display:none;" MaximumNumberOfFiles="5" />
<asp:Button ID="btnShowUpload" OnClientClick="showUploader();return false;" runat="server" Text="Add images" CssClass="btn btn-success" Style="position: center; bottom: 5px;" />
<asp:Button ID="btnSave" OnClick="saveMaintenanceForm" runat="server" Text="Save" CssClass="btn btn-success" Style="position: center; bottom: 5px;" />
<label></label>
<asp:Button ID="btnCancelFault" OnClick="btnCancel_Click1" runat="server" Text="Cancel" CssClass="btn btn-danger" Style="position: center; bottom: 5px;" CausesValidation="false" />
</ContentTemplate>
</asp:UpdatePanel>
how can i make this modal popup fill 80% of the screen in the x and y direction. i.e a margin of 10% on each side
Markup
<!-- Add Files Modal Form -->
<asp:HiddenField ID="AddFilesForModal" runat="server" />
<ajaxToolkit:ModalPopupExtender runat="server" ID="AddFilesModal" BehaviorID="modalPopupExtenderAddFiles"
TargetControlID="dummyButtonAddToPendingList" PopupDragHandleControlID="PanelAddFilesOuter" PopupControlID="PanelAddFilesOuter"
OkControlID="dummyButtonAddToPendingList" BackgroundCssClass="ModalTreeviewBackgroundz" DropShadow="false"
Drag="true">
</ajaxToolkit:ModalPopupExtender>
<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender4" runat="server" TargetControlID="PanelAddFilesInner">
</ajaxToolkit:RoundedCornersExtender>
<asp:Panel ID="PanelAddFilesOuter" runat="server" BackColor="Transparent" Style="display: none;">
<asp:Panel ID="PanelAddFilesInner" runat="server" BackColor="White" >
<ContentTemplate>
<div id="AddFilesContainer">
<br />
<div style="max-height:800px;overflow:auto;">
<asp:TreeView ID="TreeViewAddItems" runat="server" BorderStyle="Solid" ShowCheckBoxes="Leaf"
Width="99%" ImageSet="XPFileExplorer" NodeIndent="15" PathSeparator="\" ShowExpandCollapse="true"
EnableClientScript="true" OnTreeNodeCheckChanged="OnTreeNodeCheckChanged" OnAdaptedTreeNodeCheckChanged="OnTreeNodeCheckChanged" ShowLines="True">
<HoverNodeStyle Font-Underline="True" ForeColor="#6666AA" />
<NodeStyle Font-Names="Tahoma" Font-Size="8pt" ForeColor="Black" HorizontalPadding="2px"
NodeSpacing="0px" VerticalPadding="2px" />
<ParentNodeStyle Font-Bold="False" />
<SelectedNodeStyle BackColor="#B5B5B5" Font-Underline="False" HorizontalPadding="0px"
VerticalPadding="0px" />
</asp:TreeView>
</div>
<br />
<div class="base">
<asp:LinkButton ID="lnkAddToPendingList" runat="server" OnClick="BtnAddToPendingList_Click" BorderStyle="Solid" BackColor="#CCCCCC">Add selected items to list</asp:LinkButton>
<asp:Button CssClass="Button" ID="dummyButtonAddToPendingList" runat="server" Style="display: none;" />
<asp:Button CssClass="Button" ID="CancelAddFiles" runat="server" Text="Cancel" OnClientClick="$find('modalPopupExtenderAddFiles').hide(); return false;" />
</div>
</div>
</ContentTemplate>
</asp:Panel>
</asp:Panel>
<!-- End Add Files Modal Form -->
Look at the resulting HTML, and style it with CSS. The CSS likely will look something like this:
.modal {
display: block;
width: 90%;
height: 90%;
margin: auto;
}
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 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.