I have created an check username availability inside a createuserwizard. And i had added a progress indicator to the checking process and would show a spinner image (in gif format) and it was done by using java script.
if the system is in the midst of checking the username in database, it would display the spinner image and at the same time display a text "Checking availability..."
And the problem not is the spinner image do not appear when it was checking..
Here is code:
<script language="javascript" type="text/javascript">
// Hook the InitializeRequest event.
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(InitializeRequest);
function InitializeRequest(sender, args) {
// Change div's CSS class and text content.
$get('UserAvailability').className = 'progress';
$get('UserAvailability').innerHTML = 'Checking availability...';
}
</script>
<asp:UpdatePanel runat="server" ID="up1">
<ContentTemplate>
<tr>
<td class="style4">Username:</td>
<td>
<asp:TextBox runat="server" ID="UserName" AutoPostBack="True"
ontextchanged="Username_Changed" Width="190" />
<div runat="server" id="UserAvailability" style="background-position: left; background-repeat: no-repeat; margin-left: -250px; padding-left: 22px; float:right;"></div>
</td>
</tr>
</ContentTemplate>
</asp:UpdatePanel>
Here is the code behind:
protected void Username_Changed(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(2000);
TextBox UserNameTextBox = (TextBox)CreateUserWizardStep1.ContentTemplateContainer.FindControl("UserName");
if (Membership.GetUser(UserName.Text) != null)
{
UserAvailability.InnerText = "Username taken, sorry.";
UserAvailability.Attributes.Add("class", "taken");
}
else
{
UserAvailability.InnerText = "Username available!";
UserAvailability.Attributes.Add("class", "available");
}
}
I have used a masterpage, I had tried putting the JS file inside masterpage, but the image still not appearing.
EDIT
<style type="text/css">
#UserAvailability
{
padding-left: 22px;
margin-left: 30px;
float: left;
background-position: left;
background-repeat: no-repeat;
}
.progress
{
background-image: url(Images/spinner.gif);
}
.taken
{
background-image: url(Images/taken.gif);
}
.available
{
background-image: url(Images/available.gif);
}
</style>
Related
I have a webform that displays an alert box when a searched for item is not found. the alertbox is all asp side, calling it is c# side in codebehind.
the issue is that after the first time it is called, it calls on every postback of the page. after the click it should not fire again until after another missed search.
i have tried if(!ispostback), but the initial firing is a postback, so it won't fire at all.
during the postback it doesn't even call the c# code again, it just shows the alertbox.
<style type="text/css">
.alertBox
{
position: absolute;
top: 100px;
left: 50%;
width: 500px;
margin-left: -250px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
padding: 4px 8px;
}
</style>
<script type="text/javascript">
function closeAlert(e) {
e.preventDefault();
this.parentNode.style.display = "none";
}
</script>
</head>
<body>
<form id="form_rooftopSAQPM" runat="server">
<div runat="server" id="AlertBox" class="alertBox" Visible="false">
<div runat="server" id="AlertBoxMessage"></div>
<button onclick="closeAlert.call(this, event)">Ok</button>
</div>
...
private void site_Load(string siteNumber)
{
DataSet ds = retrieveDataFromSQL("exec s_RooftopSite " + siteNumber, "Couldn't retrieve site information");
if(ds.Tables.Count>0)
{
//load the fields
txtFoo.Text = ds.Tables[0].Rows[0][0].ToString();
}
else
{
MessageBoxShow("Site not found.");
}
}
protected void MessageBoxShow(string message)
{
this.AlertBoxMessage.InnerText = message;
this.AlertBox.Visible = true;
}
...
how can i set the alertbox to only fire when it is called by the c# code, yet still allow it to pop off on the first call, which is a postback?
I fixed it by switching from JavaScript to C#:
ASP:
<asp:Button runat="server" id="btnCloseAlert"
onclick="btnCloseAlert_Click" Text="Ok" />
CodeBehind in C#:
protected void btnCloseAlert_Click(object sender, EventArgs e)
{
AlertBox.Visible = false;
AlertBoxMessage.InnerText = "";
}
I try to change text of file upload control browse button. I made file upload control visible=false and I added another textbox and button:
.aspx file:
<asp:FileUpload ID="fuUploadPhoto" runat="server" visible="false"/>
<asp:TextBox ID="tbFilePath" runat="server" />
<asp:Button ID="btnChooseFile" runat="server" Text="Choose file from disk" />
next I try to add Attribute to btnChooseFile in PageLoad in .cs. Unfortunately it doesn't work and I don't know why. Where I made a mistake?
.cs file:
protected void Page_Load(object sender, EventArgs e)
{
btnChooseFile.Attributes.Add("onclick", "document.getElementById(" + fuUploadPhoto.ClientID + ").click()");
MultiViewAddPhoto.SetActiveView(viewAddPhotoStepOne);
}
protected void btnChooseFile_Click(object sender, EventArgs e)
{
if (fuUploadPhoto.HasFile)
{
tbFilePath.Text = fuUploadPhoto.PostedFile.FileName;
string filename = Path.GetFileName(fuUploadPhoto.FileName);
string ext = Path.GetExtension(filename);
imageGuid = Guid.NewGuid();
string contenttype = String.Empty;
switch (ext)
{
case ".jpg":
contenttype = "image/jpg";
break;
case ".jpeg":
contenttype = "image/jpg";
break;
case ".png":
contenttype = "image/png";
break;
}
if (string.IsNullOrEmpty(contenttype))
{
ltrErrorMessage.Text = "Nieprawidłowy format pliku!";
}
//prawidłowy format pliku
else
{
if (fuUploadPhoto.PostedFile.ContentLength > MyConsts.DAL.SizeOfPhoto)
{
ltrErrorMessage.Text = "Plik może mieć maksymalnie "+ MyConsts.DAL.SizeOfPhoto/1024 + " Mb! Zmniejsz plik i spróbuj ponownie.";
}
//jeśli prawidłowy format i rozmiar zdjęcia
else
{
try
{
filePath = ConfigurationManager.AppSettings["FilesPath"] + "\\" + Request.QueryString["konkurs"] + "\\" + imageGuid + ext;
path = "\\" + Request.QueryString["konkurs"] + "\\" + imageGuid + ext;
//zapisujemy plik na dysk
fuUploadPhoto.SaveAs(filePath);
if (File.Exists(filePath))
{
imgInspirationPhoto.ImageUrl = filePath;
imgInspirationPhoto.Visible = true;
}
else
{
imgInspirationPhoto.Visible = false;
}
}
catch (Exception ex)
{
Logger.Error(ex.Message, LogSource, ex);
}
}
}
}
}
When you make the fileupload visible false it won't be rendered on the page i.e its not hidden but not present. hence make it display none rather than visible false.
Try this
protected void Page_Load(object sender, EventArgs e)
{
btnChooseFile.Attributes.Add("onclick", "jQuery('#" + fuUploadPhoto.ClientID + "').click();return false;");
//MultiViewAddPhoto.SetActiveView(viewAddPhotoStepOne);
}
in aspx file:
<div style="display:none;">
<asp:FileUpload ID="fuUploadPhoto" runat="server"/>
</div>
remember to add reference to jQuery library in the aspx page;
Update: Also the file is not available in the code behind until full postback This solution might help
using two js files http://the-echoplex.net/demos/upload-file/file-upload.js and http://the-echoplex.net/demos/upload-file/jelly/min.js .And add the file-upload.css file.Your sample
aspx file is,
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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">
<script src="script/jelly.js" type="text/javascript"></script>
<style type="text/css">
/****************** Start page styles ********************************************/
body {
background: #DFA01B;
font-family: arial, sans-serif;
font-size: 11px;
}
#wrap {
max-width: 600px;
margin: 30px auto;
background: #fff;
border: 4px solid #FFD16F;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
padding: 20px;
}
.field {
padding: 0 0 1em;
}
</style>
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="wrap">
<form enctype="multipart/form-data" action="#" method="post">
<div class="field">
<label class="file-upload">
<span><strong>Put YOUR TEXT</strong></span>
<%--<input type="file" name="uploadfile" onclintclick="test_load()" />--%>
<asp:FileUpload
ID="FileUpload1" name="uploadfile" runat="server"
ondatabinding="FileUpload1_DataBinding" />
</label>
</div>
</form>
</div><!--/ wrap -->
<script src="script/file-upload.js" type="text/javascript"></script>
</form>
</body>
</html>
and CSS file,
body {
}
/*
As this stylesheet is lazy loaded these styles only apply if JavaScript is enabled
*/
.file-upload {
overflow: hidden;
display: inline-block;
position: relative;
vertical-align: middle;
text-align: center;
/* Cosmetics */
color: #fff;
border: 2px solid #2FA2FF;
background: #6FBEFF;
/* Nice if your browser can do it */
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
text-shadow: #000 1px 1px 4px;
}
.file-upload:hover {
background: #2FA2FF;
}
.file-upload.focus {
outline: 2px solid yellow;
}
.file-upload input {
position: absolute;
top: 0;
left: 0;
margin: 0;
font-size: 70px;
/* Loses tab index in webkit if width is set to 0 */
opacity: 0;
filter: alpha(opacity=0);
}
.file-upload strong {
font: normal 1.75em arial,sans-serif;
}
.file-upload span {
position: absolute;
top: 0;
left: 0;
display: inline-block;
/* Adjust button text vertical alignment */
padding-top: .45em;
}
/* Adjust the button size */
.file-upload { height: 3em; }
.file-upload,
.file-upload span { width: 14em; }
.file-upload-status {
margin-left: 10px;
vertical-align: middle;
padding: 7px 11px;
font-weight: bold;
font-size: 16px;
color: #888;
background: #f8f8f8;
border: 3px solid #ddd;
}
you can download sample project at changedfileuploadbutton text
You can't using the standard asp file upload control.
You could create your own custom control which inherits from FileUpload, there you could add custom behaviour:
public class MyFileUpload : FileUpload
{
//do stuff
}
I've an aspx page and I want to disable that page dynamically on a IF condition.
Here, By the word 'Disable' I mean an exactly same condition when a pop-up or a Radwindow opens and the Parent page gets disabled and the user is not able to do anything to the parent page until the pop-up gets closed.
For Ajax or Rad Controls, I can set the 'Modal' attribute of the control to true to make Parent page disabled. But what to do for my required condition.
Any suggestion would be appreciated.
You achieve the disabled effect by adding a div that covers the page using Javascript or JQuery.
var documentHeight = $(document).height();
$("body").append("<div style='z-index: 100; background: lightgray; opacity: 0.5; width: 100%; height: " + documentHeight + "px; position: absolute; left: 0; top: 0;'></div>");
The caveat is that this isn't "secure", if that's what you're after (the user could "hack" the disabling pane using Firebug or similar).
You can use ModalPopupExtender, take a look at my sample. I use this concept in all my sites and works great for all types of browsers.
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="ConfirmDialogUserControl.ascx.cs"
Inherits="GP.Solutions.UserControls.ConfirmDialogUserControl" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<script type="text/javascript">
var _source;
var _popup;
function ShowConfirmDialog(source, message) {
this._source = source;
this._popup = $find('mdlPopup');
var displayDiv = document.getElementById('<%= ConfirmMessageDiv.ClientID %>');
displayDiv.innerText = message;
displayDiv.textContent = message;
this._popup.show();
}
function ConfirmDialogOk() {
this._popup.hide();
__doPostBack(this._source.name, '');
}
function ConfirmDialogCancel() {
this._popup.hide();
this._source = null;
this._popup = null;
}
</script>
<asp:Panel ID="pnlModal" runat="server" CssClass="modalPopup" style="display:none;">
<div class="modalHeader">
<div id="DivImage" runat="server"> </div>
<asp:Label ID="TitleLabel" runat="server" Text="" CssClass="modalTitle"></asp:Label>
</div>
<asp:Panel ID="pnlControls" runat="server" CssClass="modalContent">
<div id="ConfirmMessageDiv" runat="server"></div>
</asp:Panel>
<div class="modalControlsContainer">
<asp:Button ID="btnConfirmDialogOk" runat="server" CssClass="modalButton" Text="" />
<asp:Button ID="btnConfirmDialogCancel" runat="server" CssClass="modalButton" Text="" />
</div>
</asp:Panel>
<asp:ModalPopupExtender ID="ModalPopupExtender1" behaviorid="mdlPopup" runat="server" TargetControlID="pnlModal"
PopupControlID="pnlModal" OkControlID="btnConfirmDialogOk" OnOkScript="ConfirmDialogOk();" CancelControlID="btnConfirmDialogCancel"
OnCancelScript="ConfirmDialogCancel();" DynamicServicePath="" Enabled="True" BackgroundCssClass="modalBackground" DropShadow="true">
</asp:ModalPopupExtender>
Here is css code used in this case:
.modalBackground
{
background-color:Black;
filter:alpha(opacity=60);
opacity:0.6;
}
.modalPopup
{
background-color:White;
border: 1px solid green;
width:280px;
padding: 10px 10px 10px 10px;
}
.modalPopupFullWidth
{
background-color:White;
border: 1px solid green;
padding: 10px 10px 10px 10px;
}
.modalHeader
{
width:auto;
border: 1px solid silver;
height:25px;
background-color:#F2F2F2;
}
.modalTitle
{
color:Black;
font-size: 11px;
font-weight:bold;
position:relative;
left:30px;
top:-20px;
}
.modalImageInformation
{
background-image: url('information.png');
background-repeat: no-repeat;
width:26px;
height:26px;
border: 0;
}
.modalImageWarning
{
background-image: url('warning.png');
background-repeat: no-repeat;
width:26px;
height:26px;
border: 0;
}
.modalImageError
{
background-image: url('error.png');
background-repeat: no-repeat;
width:26px;
height:26px;
border: 0;
}
.modalImageQuestion
{
background-image: url('question.png');
background-repeat: no-repeat;
width:26px;
height:26px;
}
.modalImageSearch
{
background-image: url('search.png');
background-repeat: no-repeat;
width:26px;
height:26px;
}
.modalContent
{
padding-top:10px;
padding-bottom:0px;
}
.modalControlsContainer
{
margin-left:auto;
margin-right:auto;
text-align:center;
padding-top:5px;
}
.modalButton
{
background-image: url('button-113x28.png');
background-color:transparent;
width:113px;
height:28px;
border: 0px none transparent;
color: White;
font-size:11px;
cursor:pointer;
margin-top:10px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.hidden { display: none; }
.unhidden { display: block; }
I Have an aspx page that contains 2 buttons "Update" and "Default". I have a dropdown list which contains a few values, say 1 to 10. When I click on Default button, the dropdown is set to a default value, say 4. If I wish to set the dropdown value to 3, I choose 3 and click on Update button and the changes are saved somewhere, maybe a DB.
Initially, Update button is disabled. Only if any changes are made to the dropdown, the Update button is enabled. Assuming that the Update button is initially disabled, I click the Default button to set the dropdown to its initial value. When I do that, a postback happens during which the Update button suddenly becomes enabled and then disabled. How do I avoid this? During page refresh, I don't want the disabled Update button to become enabled and then disabled. ALl this happens in a millisecond but its still visible.
is there any way out of this?
Design code is as follows:
ASPX
<%# Page Language="C#" AutoEventWireup="true" CodeFile="LogSettings.aspx.cs" Inherits="Settings_LogSettings" %>
<!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 id="Head1" runat="server">
<title>Diagnostic Server Configuration Tool</title>
<link rel="stylesheet" type="text/css" href="../css/style001.css" />
<style type="text/css">
a.info
{
position: relative; /*this is the key*/
z-index: 24; /*background-color:#ccc;*/
color: #000;
border-width: 0px;
border-style: none;
text-decoration: none;
}
a.info:hover
{
z-index: 25;
background-color: #ff0;
}
a.info span
{
display: none;
}
a.info:hover span
{
/*the span will display just on :hover state*/
display: block;
position: absolute;
bottom: 2em;
right: 2em;
width: 15em;
border: 1px solid #0cf;
background-color: #cff;
color: #000;
text-align: left;
padding: 5px;
}
</style>
<script language="javascript" type="text/javascript">
function setDefaults() {
if (document.getElementById("dlLoggingLevel").value != document.getElementById("dlLoggingLevel_Def").value) {
document.getElementById("dlLoggingLevel").value = document.getElementById("dlLoggingLevel_Def").value;
document.getElementById("imgLoggingLevel").src = "../images/field_ok.png";
document.getElementById("imgLoggingLevelUndo").style.display = "inline";
document.getElementById("btnUpdate").disabled = false;
}
if (document.getElementById("txtMaxFileSize").value != document.getElementById("txtMaxFileSize_Def").value) {
document.getElementById("txtMaxFileSize").value = document.getElementById("txtMaxFileSize_Def").value;
document.getElementById("imgMaxSize").src = "../images/field_ok.png";
document.getElementById("imgMaxSizeUndo").style.display = "inline";
document.getElementById("btnUpdate").disabled = false;
}
}
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
</script>
<script language="javascript" type="text/javascript" src="../Css/wcf_validate.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<br />
<div class="divEditHeader" id="EditHeader">
<h1>
Logging Configuration
</h1>
<table width="100%">
<tr>
<td align="left">
<asp:Button CssClass="formEditBtn" runat="server" ID="btnUpdate" Text="Update" OnClick="btnUpdate_Click"
Enabled="false" />
<button class="formEditBtn" onclick="javascript:setDefaults();" causesvalidation="false">
Default</button>
</td>
<td align="right">
</td>
</tr>
</table>
</div>
<br />
<table class="InputTable">
<tr class="Prompt">
<td class="Prompt">
Logging Level
</td>
<td>
<asp:DropDownList runat="server" ID="dlLoggingLevel">
<asp:ListItem Text="NONE" Value="none"></asp:ListItem>
<asp:ListItem Text="FATAL" Value="fatal"></asp:ListItem>
<asp:ListItem Text="ERROR" Value="error"></asp:ListItem>
<asp:ListItem Text="WARNING" Value="warning"></asp:ListItem>
<asp:ListItem Text="INFO" Value="info"></asp:ListItem>
<asp:ListItem Text="DEBUGLOW" Value="debuglow"></asp:ListItem>
<asp:ListItem Text="DEBUGMEDIUM" Value="debugmedium"></asp:ListItem>
<asp:ListItem Text="DEBUGHIGH" Value="debughigh"></asp:ListItem>
<asp:ListItem Text="DEBUGALL" Value="debugall"></asp:ListItem>
</asp:DropDownList>
<img id="imgLoggingLevel" src="../images/blank.png" />
<asp:TextBox runat="server" ID="dlLoggingLevel_Init" Style="display: none"></asp:TextBox>
<asp:TextBox runat="server" ID="dlLoggingLevel_Def" Style="display: none"></asp:TextBox>
<img id="imgLoggingLevelUndo" src="../images/restore.png" style="display: none; cursor: hand"
onmouseover="this.src='../Images/restore_hov.png'" onmouseout="this.src='../Images/restore.png'"
onclick="restoreValue('dlLoggingLevel','dlLoggingLevel_Init','imgLoggingLevel','imgLoggingLevelUndo')" />
</td>
<td>
<a href="javascript: void 0" class="info">
<img src="../images/help.png" border="0">
<span><font size="2">Enter the desired level of diagnostic data logging. Default: INFO.
</font></span></a>
</td>
</tr>
<tr class="Prompt">
<td class="Prompt">
Maximum Log File Size(MB)
</td>
<td>
<asp:TextBox runat="server" ID="txtMaxFileSize" Width="36px" MaxLength="3"></asp:TextBox>
<asp:TextBox runat="server" ID="txtMaxFileSize_Init" Style="display: none"></asp:TextBox>
<asp:TextBox runat="server" ID="txtMaxFileSize_Def" Style="display: none"></asp:TextBox>
<img id="imgMaxSize" src="../images/blank.png" />
<asp:CustomValidator runat="server" ID="valMaxSize" ControlToValidate="txtMaxFileSize"
Display="Dynamic" ErrorMessage="" ClientValidationFunction="MaxSize_Validate"></asp:CustomValidator>
<img id="imgMaxSizeUndo" src="../images/restore.png" style="display: none; cursor: hand"
onmouseover="this.src='../images/restore_hov.png'" onmouseout="this.src='../images/restore.png'"
onclick="restoreValue('txtMaxFileSize','txtMaxFileSize_Init','imgMaxSize','imgMaxSizeUndo')" />
</td>
<td>
<a href="javascript: void 0" class="info">
<img src="../images/help.png" border="0">
<span><font size="2">Enter the maximum log file size in MB. Default: 2 MB. Range: 1
- 100 MB. </font></span></a>
</td>
</tr>
</table>
<br />
<asp:Label runat="server" ID="lblMessage" Font-Bold="true"></asp:Label>
<br />
</div>
</form>
</body>
</html>
Code-Behind
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using DiagnosticCommon;
using System.Drawing;
public partial class Settings_LogSettings : System.Web.UI.Page
{
const string EnvVariable = "DIAGNOSTICSERVER";
const string ConfigFileName = "DiagnosticService.exe.config";
protected void Page_Load(object sender, EventArgs e)
{
if (Security.EnforceSecurity())
Response.Redirect("Login.aspx");
if (!IsPostBack)
{
DebugHelper.MaxDebugLevel = DebugHelper.Parse(ConfigReader.GetValue("LoggingLevel"));
DebugHelper.MaxLogFileSize = long.Parse(ConfigReader.GetValue("LogFileSize"));
txtMaxFileSize.Attributes.Add("onchange", "javascript:MaxSize_Validate('',this);");
txtMaxFileSize.Attributes.Add("onkeypress", "return isNumberKey(event)");
dlLoggingLevel.Attributes.Add("onchange", "javascript:Logging_Validate('',this);");
BindData();
BindInitData();
BindDefaults();
}
}
private void BindData()
{
string installPath = Environment.GetEnvironmentVariable(EnvVariable);
try
{
dlLoggingLevel.SelectedValue = ConfigReader.GetValue("LoggingLevel");
txtMaxFileSize.Text = ConfigReader.GetValue("LogFileSize");
}
catch (Exception ex)
{
lblMessage.Text += ex.Message + "<br>" + installPath;
lblMessage.ForeColor = Color.Red;
}
}
private void BindInitData()
{
string installPath = Environment.GetEnvironmentVariable(EnvVariable);
try
{
dlLoggingLevel_Init.Text = ConfigReader.GetValue("LoggingLevel");
txtMaxFileSize_Init.Text = ConfigReader.GetValue("LogFileSize");
}
catch (Exception ex)
{
lblMessage.Text += ex.Message + "<br>" + installPath;
lblMessage.ForeColor = Color.Red;
}
}
protected void btnCancel_Click(object sender, EventArgs e)
{
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
}
protected void btnUpdate_Click(object sender, EventArgs e)
{
try
{
lblMessage.Text = "";
ConfigReader.SetValue("LoggingLevel", dlLoggingLevel.SelectedValue);
ConfigReader.SetValue("LogFileSize", txtMaxFileSize.Text);
lblMessage.Text = "Configuration updated.";
lblMessage.ForeColor = Color.Green;
btnUpdate.Enabled = false;
BindInitData();
}
catch (Exception ex)
{
lblMessage.Text += ex.Message;
lblMessage.ForeColor = Color.Red;
}
}
private void BindDefaults()
{
try
{
dlLoggingLevel_Def.Text = ConfigReader.GetDefault("LoggingLevel");
txtMaxFileSize_Def.Text = ConfigReader.GetDefault("LogFileSize");
}
catch (Exception ex)
{
lblMessage.Text = ex.Message;
lblMessage.ForeColor = Color.Red;
btnUpdate.Enabled = false;
}
}
}
Since the button has no type defined, the default type is used which is a submit button.
This means that when you click the Default button, the JS code is running but then the form is submitted.
To avoid the submission simply make the button be ordinary button:
<button type="button" class="formEditBtn" onclick="javascript:setDefaults();" causesvalidation="false">Default</button>
Following is the line in setDefaults() method that enables the update button for a while, a post back occurs and update button again disabled.
document.getElementById("btnUpdate").disabled = false;
Either comment this line or set it to true
i have written one javascript function to retrieve the position of a button and assigned it to asp:updateprogress but i want to apply the button's position to div element in the code or a label control within the updateprogress not to update progress.
<asp:UpdateProgress ID="UpdateProgress2"
runat="server"
AssociatedUpdatePanelID="SendMailUpdatePanel"
DisplayAfter="0">
<ProgressTemplate>
<div id="blur" style="top: 0px; left: 0px; width: 99%; height: 5000px; position: absolute;background-color: white; z-index: 999; filter: alpha(opacity=50); opacity: 0.5;-moz-opacity: 0.85; padding-top: 25%; padding-left: 30%;" />
<div id="progress" style="text-align: center; width: 444px; border: 1px solid black;padding: 10px; background-color: #eee; z-index: 998; filter: alpha(opacity=500);-moz-opacity: 1.00;">
<b>Mail is being Sent! Please Wait...</b>
<br />
<asp:Image ID="LoadImage"
runat="server"
ImageUrl="~/Images/spinner.gif" />
<br />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
My javascript function is:
function getPosition(btnSendResume, progress)
{
var btnSendRe = document.getElementById(btnSendResume);
var divp = document.getElementById(progress);
divp.style.display="block";
divp.style.left=btnSendRe.offsetLeft;
divp.style.top=btnSendRe.offsetTop + btnSendRe.offsetHeight - 40;
}
I have written following under button click:
btnSendResume.Attributes.Add("onclick", "getPosition('" + btnSendResume.ClientID + "','" + UpdateProgress2.FindControl(progress).ClientID + "');");
But it is giving error that progress doesn't exist under the current context.
Your <div id="progress" is a normal HTML element, not a server-side control.
You should just write document.getElementById("progress").
You can do this by Jquery.
A simple offset() will return left and top position of a control.
function getPosition(btnSendResume, progress)
{
var btnSendReOffset = $('#btnSendResume').offset();
var btnSendRe = $('#btnSendResume');
var divp = document.getElementById(progress);
divp.style.display="block";
divp.style.left=btnSendReOffset.left;
divp.style.top=btnSendReOffset.top+ btnSendRe.height() - 40;
}
You can add a click event to your button on window load and trigger your function.