I have the following user-control:
<%# Control Language="C#" AutoEventWireup="true" CodeFile="FadingMessage.ascx.cs" Inherits="includes_FadingMessage" %>
<asp:PlaceHolder Visible="false" runat="server" ID="plhMain">
<span id="<%= this.ClientID+"_panel" %>" style="background-color:yellow; padding:10px;">
<b><%= Message %></b>
</span>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
alert("never gets here??");
jQuery('#<%= this.ClientID+"_panel" %>').fadeOut(1000);
});
</script>
</asp:PlaceHolder>
Which is used in an asp:UpdatePanel. My problem is that $(document).ready is never fired?
How can I detect when a partial rendering has finished?
Put a method in your head tags and then in your placeholder call it. The problem here is that your PlaceHolder Visible="false" so it's never rendered. If you show it dynamically via ajax the script won't run. You'd have to rebind it when you dynamically show the placeholder. I would suggest not using document(ready) ...
Related
I have an update panel on a page which contains nested Panels. It has a Panel with a small form (like a log-in form) and a button. When the button is clicked, a few conditions are checked, and if passed, the first Panel is hidden and the second Panel with a larger form is displayed.
Because the larger form can take some time to load (it pulls data from other sources), the small form panel contains an UpdateProgress control.
All of this works fine.
Then I added a nested Panel within the login form Panel, placed under the UpdateProgress that will display a meaningful error message, such as if the login code is incorrect. This displays as expected. However, if the user then corrects their information and clicks the button again, the UpdateProgress displays properly, but the error message remains visible, even though I try to set it to Visible = false in code-behind.
This page does not use a master page.
Debugging shows that the Visible property does get set to false, although it still displays in the browser.
ASPX code:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="custom_Default" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<!-- meta and link tags -->
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<!-- h1 and all that -->
<asp:ScriptManager ID="scriptManager" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="pnlUpdate" runat="server">
<ContentTemplate>
<asp:Panel ID="pnlLogin" runat="server">
<!-- label and text field -->
<asp:Button ID="btnBegin" runat="server" OnClick="btnBegin_Click" />
<asp:UpdateProgress ID="updProgress" runat="server" AssociatedUpdatePanelID="pnlUpdate">
<ProgressTemplate>
<p>Loading, please wait... </p>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:Panel ID="pnlMessage" runat="server" Visible="false">
<asp:Literal ID="ltlMessage" runat="server" />
</asp:Panel>
</asp:Panel>
<asp:Panel ID="pnlMainForm" runat="server" Visible="false">
</asp:Panel>
<asp:Panel ID="pnlConfirmation" runat="server" Visible="false">
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
<!-- javascript - jquery and bootstrap -->
</body>
</html>
Code Behind (I've tried setting visible to false in the Page_Load, in the pnlUpdate_Load event, and in the btnBegin_Click event - but that error message will not go away.
protected void btnBegin_Click(object sender, EventArgs e)
{
pnlMessage.Visible = false;
Page.Validate();
if (Page.IsValid)
{
// check some conditions. if fails:
ltlMessage.Text = "Reason for failure";
pnlMessage.Visible = true; // works
}
}
I have tried removing the Visible="false" from the pnlMessage on the ASPX page and placing it in the code behind in Page_Load but I still can't hide it after the message has already been displayed.
How can I hide the pnlMessage Panel after the btnBegin is clicked the second time?
I managed to find the solution to this. Apparently there isn't a way to do it in .NET - it has to be done in JavaScript.
Here is the code I used to accomplish this.
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(initializeRequest);
prm.add_endRequest(endRequest);
var _postBackElement;
function initializeRequest(sender, e) {
if (prm.get_isInAsyncPostBack()) {
e.set_cancel(true);
}
$get('pnlMessage').style.display = 'none';
}
function endRequest(sender, e) {
$get('pnlMessage').style.display = 'block';
}
</script>
I've got an issue with a messagebox user control. I wish for a control which can be given a message and the user can dismiss with a click of a button, which can be inserted into many places.
I have applied the javascript into the messagebox control in a hope i can keep everything to do with the messagebox centralized, however when browsing to a page with the messagebox control added i get this error:
CS1061: 'ASP.components_messagebox_ascx' does not contain a definition for 'HideBox' and no extension method 'HideBox' accepting a first argument of type 'ASP.components_messagebox_ascx' could be found
The control is as thus:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="Messagebox.ascx.cs" Inherits="FosterNetwork.Components.Messagebox" %>
<script type="text/Javascript">
function HideBox() {
document.getElementById("PNL_Messagebox").setAttribute("visible", false);
}
</script>
<asp:Panel ID="PNL_Messagebox" runat="server">
<asp:Label ID="LBL_Message" runat="server" />
<asp:Button ID="BTN_Ok" Text="Ok" OnClick="HideBox()" runat="server" /> <!--Error happens on this line-->
</asp:Panel>
I'm fairly certain i've done this right but obviously i've done something wrong if it's not working. Any light on the situation at all would be grand.
Addendum: If i comment out the Button control the page loads fine, and the script loads fine too (Viewed page source)
The control ID's you're referencing are not the client ID's, but server ID's. So retrieve the 'ClientID' from the control in the JavaScript function and second, use the 'OnClientClick' property to show the JavaScript message.
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="Messagebox.ascx.cs" Inherits="FosterNetwork.Components.Messagebox" %>
<script type="text/Javascript">
function HideBox() {
document.getElementById("<%= PNL_Messagebox.ClientID %>").setAttribute("visible", false);
}
</script>
<asp:Panel ID="PNL_Messagebox" runat="server">
<asp:Label ID="LBL_Message" runat="server" />
<asp:Button ID="BTN_Ok" Text="Ok" OnClientClick="HideBox()" runat="server" /> <!--Error happens on this line-->
</asp:Panel>
Onclick looks for a server side function, and not javascript. either, define your button as <input type='button' onclick='HideBox' or change the current code to:
<script type="text/Javascript">
function HideBox() {
document.getElementById("<%= PNL_Messagebox.ClientID %>").setAttribute("visible", false);
return false;
}
</script>
<asp:Button ID="BTN_Ok" Text="Ok" OnClientClick="return HideBox()" runat="server" />
returning false in OnClientClick, prevents the asp button from postback.
Edit: as Monty mentioned, your panel control's client id is not correctly set in your code.
I know this must sound really basic but I'm really stumped here. What I'm trying to do is to show a Hyperlink once a process has completed. And this process is the AsyncFileUpload. In the ASPX page, I want to create an but have it hidden on the initial page load. If I set the Style="display: none;" seems to work but after the file upload, nothing I do, will make the control visible again. When the file is uploaded, it calls a function called FileUploadComplete. It's in here that no matter what I do, the Hyperlink won't display.
Any help is greatly appreciated :)
Thank you,
dave
Here is the ASPX Code (with recently added javascript)
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="OptionsPlaceHolder" runat="server">
<script language="javascript" type="text/javascript">
function ShowLink() {
$("#openFile").show();
}
</script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolderBody" runat="server">
<asp:UpdatePanel ID="updImportFile" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div class="pageHeader">
<asp:Literal runat="server" ID="pageTitle" Text="<%$ Resources:Resources, ImportFile %>" />
</div>
<ajaxToolkit:AsyncFileUpload ID="FileUpload1" runat="server" Width="600px"
UploaderStyle="Traditional" OnUploadedComplete="FileUploadComplete" ThrobberID="throbber"
CompleteBackColor="#E9F2FD" OnClientUploadComplete="ShowLink" />
<asp:Image runat="server" ID="throbber" ImageUrl="images/loading.gif" />
<br />
<asp:Hyperlink runat="server" ID="openFile" NavigateUrl="~/OpenFile.aspx" Text="Open"
style="display:none;"/>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
And here is the code behind:
protected void FileUploadComplete(object sender, EventArgs e)
{
if (FileUpload1.HasFile)
{
string importName = Server.MapPath(#"Uploads\") + FileUpload1.FileName;
FileUpload1.SaveAs(importName);
// Import the JSA
JSA jsa = new JSA();
jsa.Import(importName);
// Show the Hyperlink
ShowLink();
}
}
private void ShowLink()
{
openFile.Attributes["Style"] = string.Empty;
}
I didn't include the master page code. It has the ToolkitScriptManager in it.
Are you trying to show on client-side or server-side? Is the link a client-side, or server-side object? Javascript would be the standard way.
If the control is a client-side object:
document.getElementById("hyperlink_name").style.display = "block";
Or if it is a server-side object:
document.getElementById("<%= hyperlink_name.ClientID %>").style.display = "block";
I would recommend getting jQuery and using the following though:
$('#hyperlink_name').show();
Or you can use an ASP.Net Link Button and do it server-side:
linkButton.Visible = true;
It would be more helpful if you would post some of the code you have tried already so that we can get a better idea of where you are.
{first answer deleted}
[EDIT :I didn't catch that you are using AsyncFileUpload when I first read the question]
Using AsyncFileUpload inside an update panel the server is being accessed via a partial postback, as a result other controls (the hyperlink) cannot be affected on the server. This will require that you make use of javascript (or preferably jquery) to make the change on the client.
You can do it on OnClientUploadComplete function, but you have to reference the hyperlink like this: <%= hyperLink.ClientID %>.style.display = 'block';
Another more asp.net way is to use update panels. Put the hyperlink into an UpdatePanel and set a trigger on the UpdatePanel when the file is uploaded. then change the visibility on the server at UploadedComplete event.
i have a div tag within a content tag as i am using a masterpage which has the forms and body tags.
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
<div id="xxx" style="overflow:scroll; height:450px;">
<asp:GridView ID="GridView1" runat="server" ...>
</asp:GridView>
</div>
</Content>
I wish to maintain the scroll position of the div when any postback happens.
There are jscripts when i search for it but i dont know
how do i apply them with the masterpage.
please help if there is an easier way. or how to use javascript with the above code.
Any help is appreciated.. thanks
You can use AJAX to remove postbacks which will keep your position. More specifically you can take a look at the UpdatePanel control.
Update:
A non-AJAX solution would be to add the following attribute in your page tag.
<%# Page MaintainScrollPositionOnPostback="true" %>
Try this it worked for me.
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
<div id="divScroll" style="overflow:auto; height:450px;">
<asp:GridView ID="GridView1" runat="server" ...>
</asp:GridView>
</div>
</Content>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
</script>
</asp:UpdatePanel>
javascript file add the following code:
var scrollTop;
function BeginRequestHandler(sender, args)
{
var m = document.getElementById('divScroll');
scrollTop = m.scrollTop;
}
function EndRequestHandler(sender, args) {
var m = document.getElementById('divGrid');
m.scrollTop = scrollTop;
}
I have a component in my application that show in my aspx page a x nurmbers of imagens get from my datasource of a repeater. I want to create a button and make this button print this images. I'd tried window.print() in my aspx, but it's only print the HTML information.
as far as i know,
u can't print directly to the printer.
u need to show the separate window with only img surrounded with div tag.
here is the eample:
<%# Page Language="C#" MasterPageFile="~/MasterPage2.master" AutoEventWireup="true" CodeFile="PrintImage.aspx.cs" Inherits="PrintImage" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
<script language="javascript" type="text/javascript">
function PrintImage()
{
printWindow = window.open ("", "mywindow", "location=1,status=1,scrollbars=1,width=600,height=600");
printWindow.document.write("<div style='width:100%;'>");
printWindow.document.write("<img id='img' src='" + document.getElementById('ctl00_MainContent_ImgMyPhoto').src + "'/>");
printWindow.document.write("</div>");
printWindow.document.close();
printWindow.print();
}
</script>
<div>
<asp:Image ID="ImgMyPhoto" runat="server" Width="100px" Height="90px" />
<br />
<input type="button" id="btnPrint" value="Print Image" onclick="PrintImage()" />
</div>
</asp:Content>
ref: this coding is get from Thirumalai_pm
Hope it works!