I basically want to ask this question(How to implement "select all" check box in HTML?) but from a asp.net point of view. There seems to be more challenges to over come when you are using asp.net to do this. The CssClass attribute generates a span container with the class you specified and it doesn't get placed on the input. Along with the challenge of masterpages and controls. I am looping through records and displaying them with a checkbox. I was hoping to grab all the checkboxes by class to perform the check all. I don't think that will be possible. Any advice?
Markup:
<asp:CheckBox runat="server" ID="checkAll" CssClass="CheckAll" />
<asp:Table ID="tblitems" Visible="false" Width="80%" HorizontalAlign="Center" runat="server">
<asp:TableRow>
//The data gets added as a table row.
</asp:TableRow>
</asp:Table>`
Browser:
//Check All check box
<span class="CheckAll"><input id="ctl00_ContentPlaceHolder1_checkAll" type="checkbox" name="ctl00$ContentPlaceHolder1$checkAll" /></span>
//Each checkbox that will be checked looks like this
<span class="chkBox"><input id="ctl00_ContentPlaceHolder1_ctl01" type="checkbox" name="ctl00$ContentPlaceHolder1$ctl01" /></span>
JavaScript
$('.CheckAll').click(function (event) {
alert("start");
if (this.checked) {
// Iterate each checkbox
$(':checkbox').each(function () {
this.checked = true;
});
alert("end");
}
});
ClientIDMode property of the checkbox control will allow you to more easily work with client-side selectors, like this:
Markup:
<asp:CheckBox runat="server" ID="checkAll" CssClass="CheckAll" ClientIDMode="Static" />
Check out the Control.ClientIDMode Property MSDN documentation.
Note: ClientIDMode is available in ASP.NET 4.0 and later.
Since each checkbox is in a span with a class 'chkBox', locate the checkboxes using that selector on the click handler:
$('.CheckAll').on('click', function (event) {
var checked = $(this).prop('checked');
$('.chkBox :checkbox').prop('checked', checked);
});
It would be more precise if you wrapped all the checkboxes you'd like to have checked in a container div:
<div id="myCheckboxes">
// .NET code here
</div>
JS:
$('.CheckAll').on('click', function (event) {
var checked = $(this).prop('checked');
$('#myCheckboxes :checkbox').prop('checked', checked);
});
Karl, I believe, has improved the approach. However, if you want to stick with what you have, modify your Javascript to be the following:
$('.CheckAll').find(':checkbox').click(function (event) {
alert("start");
if (this.checked) {
// Iterate each checkbox
$(':checkbox').each(function () {
this.checked = true;
});
alert("end");
}
});
The following code basically selectes all checkboxes, and change the check statuses based on the CheckAll Checkbox.
<script type="text/javascript">
$(document).ready(function () {
$('#<%= CheckAll.ClientID %>').click(function() {
var checkedStatus = this.checked;
$("input[type='checkbox']").attr('checked', checkedStatus);
});
});
</script>
<asp:CheckBox runat="server" ID="CheckAll" />
<asp:CheckBox runat="server" ID="Check1" />
<asp:CheckBox runat="server" ID="Check2" />
<asp:CheckBox runat="server" ID="Check3" />
<asp:CheckBox runat="server" ID="Check4" />
Multiple Group of CheckBoxes in a Single Page
If you have multiple groups of checkboxes in a single page, you can differentiate them with class.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"
Inherits="WebApplication2012.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// Selects all enabled checkboxes
$("#<%= CheckAll.ClientID %>").click(function () {
var checkedStatus = this.checked;
$(".myCheckBox input[type='checkbox']").attr('checked', checkedStatus);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:CheckBox runat="server" ID="CheckAll" Text="Check All" CssClass="myCheckAll" /><br />
<asp:CheckBox runat="server" ID="Check1" Text="Check1" CssClass="myCheckBox" /><br />
<asp:CheckBox runat="server" ID="Check2" Text="Check2" CssClass="myCheckBox" /><br />
<asp:CheckBox runat="server" ID="Check3" Text="Check3" CssClass="myCheckBox" /><br />
<asp:CheckBox runat="server" ID="Check4" Text="Check4" CssClass="myCheckBox" />
</form>
</body>
</html>
I got it to work using this script below. This not work for every scenario but it worked very well for mine so far. Thanks!
mark up
<asp:CheckBox runat="server" ID="CheckAll" OnClick="toggle(this)" />
Javascript
function toggle(source) {
checkboxes = document.getElementsByTagName('input');
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = source.checked;
}
}
Related
I want to check whether the TextBox is disabled or not.
If we try to click on the disabled TextBox. It should show an alert message.
This is my code with source http://jsfiddle.net/Alfie/2kwKc/ but in my case not working.
On MasterPage.master :
<asp: ContentPlaceHolder ID="head" runat="server">
</asp: ContentPlaceHolder >
<script type="text/javascript">
$("#txDateRet").click(function () {
if (this.readOnly) {
alert("The textbox is clicked.");
}
});
</script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
On Markup Default.aspx webpage:
<asp:TextBox ID="txDateRet" runat="server"
ReadOnly="true" BackColor="Yellow"
Width="300" CssClass="toUpper"
Enabled="false"></asp:TextBox>
#Update #1
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#txDateRet").click(function () {
if ($(this).attr("readonly") == "readonly") {
alert($(this).attr("readonly"));
}
});
});
</script>
<asp:TextBox ID="txDateRet"
ClientIDMode="Static"
runat="server"
ReadOnly="true"
BackColor="Yellow"
Width="300"
CssClass="toUpper"
Enabled="false">
</asp:TextBox>
#Update #2
$(document).ready(function () {
$("#txDateRet").click(function () {
alert($(this).attr("readonly"));
});
});
#Update #3
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3">
<input name="ctl00$ContentPlaceHolder1$txDateRet"
type="text" value="26/02/2019"
readonly="readonly"
id="txDateRet"
class="toUpper"
style="background-color:Yellow;width:300px;" />
</div>
</div>
There are may three reasons:
1- Because that code rendered before loading JQuery library so put that script before triggering click event.
2- Because that element is and ASP.Net element in a place holder, it may will get different ID that you can see it by inspecting it.
totally change the code like:
<asp: ContentPlaceHolder ID="head" runat="server">
</asp: ContentPlaceHolder >
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#txDateRet").click(function () {
if (this.readOnly) {
alert("The textbox is clicked.");
}
});
});
</script>
<asp:TextBox ID="txDateRet" ClientIDMode = "static" runat="server"
ReadOnly="true" BackColor="Yellow"
Width="300" CssClass="toUpper"
Enabled="false"></asp:TextBox>
3- Or that readonly prop will not get true after rendering it may will get readonly="readonly" so if (this.readOnly) will not work, it may should changed to if (this.readOnly == "readonly").
hope this answer give you the clue.
I think in webform we give the complete id of textbox with content place holder.
You can try this.
$("#head_txDateRet").click(function () {
if (this.readOnly) {
alert("The textbox is clicked.");
}
});
I thought this could be easily achieved with Jquery or ASP.NET Ajax but not finding a solution or able to create one. I'm close with the below but not able to return value to lblStatus during loop. Or maybe way to use just Jquery and AJAX.
JQuery
<script src="js/jquery-1.7.min.js" type="text/javascript"></script>
<script>
function validateAdd() {
var myExtender = $find('ProgressBarModalPopupExtender');
myExtender.show();
return true;
}
</script>
HTML
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<ajaxToolkit:ModalPopupExtender ID="ProgressBarModalPopupExtender" runat="server" BackgroundCssClass="ModalBackground" BehaviorID="ProgressBarModalPopupExtender" TargetControlID="hiddenField" PopupControlID="Panel1" DynamicServicePath="" Enabled="True" />
<asp:Panel ID="Panel1" runat="server" Style="display: none; background-color: #C0C0C0;">
<p class="wait">Please wait!</p>
<asp:Label ID="lblStatus" runat="server" Text=""></asp:Label>
</asp:Panel>
<asp:HiddenField ID="hiddenField" runat="server" />
<input type="submit" value="Process Records" id="process" causesvalidation="False" onclick="javascript: return validateAdd();" onserverclick="btnProcess_ServerClick" runat="server" />
</form>
Then on the code behind, do a loop and push status on each loop and then hide process dialog. If I could show progress even better, but just trying to show current record processing.
protected void btnProcess_ServerClick(object sender, EventArgs e)
{
//Example Test Looping Through Slow Process
string[] arr1 = new string[] { "record_one", "record_two", "record_three" };
foreach( string s in arr1)
{
lblStatus.Text = "Processing.." + s;
Thread.Sleep(2000);
}
ProgressBarModalPopupExtender.Hide();
}
I have two controls in my web form. One is combo box control, and the other is text box. What I want to do is when user selects another item in combo box, the new item is added to text box and shown to user automatically.
For example:
1. When user select '001' item in combo box, text box shows '001' in text area.
2. When user select '002' item in combo box, text box shows like this: '001','002'
Here is my code:
class webform : System.Web.UI.Page{
private StringBuilder sb = new StringBuilder();
protected void ComboBox1_SelectedIndexChanged(object sender, EventArgs e)
{
//Todos: Add the selection of combo box to text box2.
this.localsb.Append(this.ComboBox1.Text);
this.localsb.Append(",");
this.Text2.Text = this.localsb.ToString();
}
......
}
Here is my front end code:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="PCA_Form.aspx.cs" Inherits="WebApplication2.PCA_Form" Culture="auto" meta:resourcekey="PageResource1" UICulture="auto" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>PCA_Form</title>
<style type="text/css">
#Text1 {
width: 147px;
margin-top: 0px;
}
#form1 {
height: 718px;
width: 963px;
}
.auto-style1 {
font-size: large;
}
#Checkbox1 {
width: 112px;
}
#Select1 {
width: 162px;
}
</style>
<script>
$(document).ready(function () {
$('.ComboBox1').on('blur', function () {
if ($(this).prop('checked')) {
var initial = $('#Text2').val();
var checkbox = $(this).text();
$('#Text2').val(initial + ',' + checkbox).change();
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div style="height: 51px; width: 906px;" aria-atomic="False" draggable="auto">
<span class="auto-style1">New Price</span>
<asp:TextBox ID="Text1"
runat="server"
class="Text"
onkeypress="if (event.keyCode!=46 && (event.keyCode < 48 || event.keyCode >57)) event.returnValue = false;"
TextMode ="MultiLine">
</asp:TextBox>
<span class="auto-style1">Item Number</span>
<ajaxToolkit:ComboBox ID="ComboBox1"
TextMode="MultiLine"
runat="server"
AutoPostBack="True"
DataSourceID="SqlDataSource1"
DataTextField="Code"
DataValueField="Code"
Style="display: inline;"
AutoCompleteMode="Suggest"
DropDownStyle="DropDown"
OnSelectedIndexChanged="ComboBox1_SelectedIndexChanged">
</ajaxToolkit:ComboBox>
<asp:Button ID="Button1"
Text="submit"
OnClick="SubmitButton_Click"
runat="server" />
<asp:Button ID="Button2" runat="server" Text="Excel" OnClick="Button2_Click" />
<asp:TextBox ID="Text2" runat="server" TextMode="MultiLine"></asp:TextBox>
</div>
<div style="height: 466px; width: 943px; margin-top: 35px">
<span class="auto-style1"> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="Data Source=XXX;Initial Catalog=XXXXX;Integrated Security=True" ProviderName="System.Data.SqlClient" SelectCommand="SELECT [Code] FROM [Item]"></asp:SqlDataSource>
<br />
<asp:GridView ID="PCADataGrid" runat="server" Width="938px" OnSelectedIndexChanged="PCADataGrid_SelectedIndexChanged" AutoGenerateColumns ="true">
</asp:GridView>
</span>
</div>
</form>
<p> </p>
</body>
</html>
In combo box tag, I trigger a function called ComboBox1_SelectedIndexChanged() when user changes selection in this box.
Well, that is indeed possible. However, your approach will require an Update Panel and all the agony that follows if you intend to avoid the lovely screen-flicker from those pesky Postback's. I would recommend doing this client side with JavaScript:
$(document).ready(function() {
$('.Checkbox').on('blur', function() {
if($(this).prop('checked')) {
var initial = $('#txtField').val();
var checkbox = $(this).text();
$('#txtField').val(initial + ', ' + checkbox).change();
}
});
});
That is a bit crude and rough, but it should meet your needs. This will avoid the issues your bound to introduce by using the Asp.Net Page Life Cycle. Hopefully this points you in good direction.
As I said above your approach will:
Require Postback or Update Panel
Problem:
Postback - Screen will flicker, plus can make managing View State quite difficult.
Update Panel - A pain to work with, also will hinder performance. As each 'Postback' becomes an Ajax call of the page. Which is stored in memory, so every Postback becomes stored in memory during the life-cycle. So it isn't very efficient.
Update:
You asked a question about:
.Checkbox
#txtField
On your front-end, in source code your elements are created like:
<asp:TextBox
id="txtField" runat="server"
placeholder="Initial Content..." />
There are more you can place on the control, but to answer your question they correlate to the Id or Class name for the given element your manipulating. An Id can only be bound to a single element, where a class can be used on several elements. For example-
<asp:Checkbox
id="chkField" runat="server"
CssClass="Checkbox" />
So in this instance the . is an anchor on this case, .Checkbox. The next would be # which is to anchor to the Id, #chkField. So when you use JavaScript they use the $('.Checkbox') or $('#chkField') as the Selector to elements on your page. Does that clarify for you?
i have a page that has a grid with rows of data and it has url hidden in each row n when a row is clicked it opens new tabed window and the parent page still stays open with the grid data. i want to have a button that does the same . my aspx is
<script type="text/javascript" id="igClientScript">
function NavigateOnClick(sender, eventArgs) {
try {
var row = eventArgs.get_item().get_row().get_index();
var url = sender.get_rows().get_row(row).get_cell(0).get_text();
window.open(url);
}
catch (e) {
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="Entity"></asp:Label>
<asp:DropDownList ID="DropDownList1" AutoPostBack="true" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem>Select Entity</asp:ListItem>
</asp:DropDownList>
<asp:Label runat="server" ID="EntityName"></asp:Label>
<asp:Button ID="newEntity" runat="server" Visible="false" OnClick="newEntity_Click" OnClientClick="aspnetForm.target ='_blank';" />
<ig:WebScriptManager ID="WebScriptManager1" runat="server"></ig:WebScriptManager>
<ig:WebDataGrid ID="EntityGrid" runat="server" Width="100%" Height="50%" StyleSetName="Claymation" >
<Columns>
</Columns>
<ClientEvents Click="NavigateOnClick" />
</ig:WebDataGrid>
</div>
I want something like window.open =(entity,_newtab) without doing a page post back how can i get this?
Just use
window.open(url, 'random_name');
Refer this: http://www.w3schools.com/jsref/met_win_open.asp
Add an attribute to your button:
target="_blank"
button.attributes.add("target","_blank");
here is what worked part of my problem was that the url is dynamic i created a label that is updated on dropdown selection and pass the label text while creating the url instead of asp button went with html button function opentab(sender, eventArgs) {
try {
var name = document.getElementById('EntityName');
var url = name.textContent;
window.open(url+"Edit.aspx");
}catch(e){
}
}which wont cause a postback
I have a _TextChanged event which works properly except in a specific circumstance which can be replicated as follows:
User modifies text (event fires correctly)
User modifies text again to match the original value (event doesn't fire)
I can get the _TextChanged event to work on my development box by turning on Viewstate for the update panel on the ascx page, but when I move it to the server I get an error that the viewstate failed if I switch user controls and then switch back to that page. The controls which go inside the update panel are build dynamically in code behind and are rebuilt with each postback -- this works for every other postback so I don't think the issue is with the controls.
Additionally, turning on viewstate makes the page run dreadfully slow anyway, so this would not be an ideal fix.
Finally, the _TextChanged event works for all changes except when reverting back to the original value.
Can anyone tell me why the event doesn't fire in that specific circumstance, and how to address the problem?
Text box creation in code behind:
TextBox annualHoursTextBox = new TextBox();
annualHoursTextBox.ID = string.Format("bundle{0}_annualHoursTextBox{1}", bundle.BundleNbr, parentItem.LaborItemNbr);
annualHoursTextBox.CssClass = "";
annualHoursTextBox.Columns = 4;
annualHoursTextBox.Text = childItem == null ? string.Empty : childItem.FTEHours.ToString("F0");
annualHoursTextBox.AutoPostBack = true;
annualHoursTextBox.TextChanged += new EventHandler(annualHoursTextBox_TextChanged);
AsyncPostBackTrigger AHtrigger = new AsyncPostBackTrigger();
AHtrigger.ControlID = annualHoursTextBox.UniqueID;
AHtrigger.EventName = "TextChanged";
upPricingSheet.Triggers.Add(AHtrigger);
//snip
//add some attributes for reference on the events
annualHoursTextBox.Attributes["othercontrol"] = tasksPerYearTextBox.UniqueID;
annualHoursTextBox.Attributes["nextcontrol"] = benefitsTextBox.UniqueID;
annualHoursTextBox.Attributes["targetTBcontrol"] = taskTimeTextBox.UniqueID;
annualHoursTextBox.Attributes["targetDDLcontrol"] = taskTimeUOMDropDown.UniqueID;
Event Handler:
protected void annualHoursTextBox_TextChanged(object sender, EventArgs e)
{
TextBox ah = sender as TextBox;
TextBox other = Page.FindControl(ah.Attributes["othercontrol"]) as TextBox;
if ((!String.IsNullOrEmpty(ah.Text)) && (!String.IsNullOrEmpty(other.Text)))
{
TextBox next = Page.FindControl(ah.Attributes["nextcontrol"]) as TextBox;
TextBox targetTB = Page.FindControl(ah.Attributes["targetTBcontrol"]) as TextBox;
DropDownList ddl = Page.FindControl(ah.Attributes["targetDDLcontrol"]) as DropDownList;
Double TasksPerSecond;
TasksPerSecond = CalculateTimePerTask(ah.Text, other.Text);
string TimeUnit;
double Time;
if (TasksPerSecond < 60)
{
TimeUnit = "Seconds";
Time = TasksPerSecond;
}
else if (TasksPerSecond < 3600)
{
TimeUnit = "Minutes";
Time = (TasksPerSecond / 60);
}
else
{
TimeUnit = "Hours";
Time = (TasksPerSecond / 60 / 60);
}
//Enter the time in the appropriate textbox
targetTB.Text = Time.ToString("F2");
//select the appropriate item from the ddl
ListItem i = ddl.Items.FindByText(TimeUnit);
if (i != null)
{
ddl.SelectedItem.Selected = false;
i.Selected = true;
}
}
}
ASPX Page:
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="Solution.aspx.cs" Inherits="Solution" %>
<%# Register Src="fragments/solutionRecommended.ascx" TagName="solutionRecommended"
TagPrefix="uc1" %>
<%# Register Src="fragments/solutionPricingSheet.ascx" TagName="solutionPricingSheet"
TagPrefix="uc2" %>
<%# Register Src="fragments/solutionSuggested.ascx" TagName="solutionSuggested" TagPrefix="uc3" %>
<%# Register Src="fragments/solutionSummary.ascx" TagName="solutionSummary" TagPrefix="uc4" %>
<%# Register Src="fragments/ucItemFilterSearch.ascx" TagName="ucItemFilterSearch"
TagPrefix="uc5" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<script type="text/javascript">
function addItemToBundle(postUrl, redirectUrl) {
$.post(postUrl);
window.location = redirectUrl;
// window.location = url;
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<asp:HiddenField ID="hfStepNbr" runat="server" />
<asp:Panel ID="pnlStepMessage" runat="server" Visible="false" CssClass="padding10">
<h3 class="placeholder">
<asp:Label ID="lblMessage" runat="server" /></h3>
</asp:Panel>
<div class='elev8form' id="mainDiv" runat="server">
<h3 class='header'>
Solutions</h3>
<div id="tabs">
<div class='tab'>
<asp:LinkButton ID="lbSuggested" runat="server" Text="Select Items" data-step="1"
OnClick="lbTab_Click" CausesValidation="false"></asp:LinkButton>
</div>
<div class='tab'>
<asp:LinkButton ID="lbPricing" runat="server" Text="Pricing Worksheet" data-step="2"
OnClick="lbTab_Click" ></asp:LinkButton>
</div>
<div class='tab'>
<asp:LinkButton ID="lbRecommendedSolutions" runat="server" Text="Recommended Solutions"
data-step="3" OnClick="lbTab_Click" CausesValidation="false"></asp:LinkButton>
</div>
<div class='tab'>
<asp:LinkButton ID="lbSummary" runat="server" Text="Solutions Summary" data-step="4"
OnClick="lbTab_Click" CausesValidation="false"></asp:LinkButton>
</div>
</div>
<div id="solutions-body">
<asp:MultiView ID="mltSolution" runat="server">
<asp:View ID="viewSuggested" runat="server">
<uc3:solutionSuggested ID="solutionSuggested1" runat="server" RedirectUrl="~/portal/elev8/solution.aspx" />
</asp:View>
<asp:View ID="viewPricing" runat="server">
<uc2:solutionPricingSheet ID="solutionPricingSheet1" runat="server" />
</asp:View>
<asp:View ID="viewRecommended" runat="server">
<uc1:solutionRecommended ID="solutionRecommended1" runat="server" />
</asp:View>
<asp:View ID="viewSummary" runat="server">
<p style="font-size: 14px;">
Text here
</p>
<uc4:solutionSummary ID="solutionSummary1" runat="server" />
</asp:View>
</asp:MultiView>
</div>
</div>
<script type="text/javascript">
function pageLoad() {
$(function () {
var maxChannelHeight;
var items = $('.channel');
for (var counter = 0; counter < items.length; counter++) {
var channel = items[counter];
var channelHeight = $(channel).height();
maxChannelHeight = maxChannelHeight > channelHeight ? maxChannelHeight : channelHeight;
}
$('.channel').height(maxChannelHeight);
$("#priceing-sheet-save-button *").click(function () {
window.scrollTo(0, 0);
});
});
}
</script>
ASCX Page:
<%# Control Language="C#" AutoEventWireup="true" CodeFile="solutionPricingSheet.ascx.cs"
Inherits="solutionPricingSheet" %>
<asp:UpdateProgress ID="upProgressRecSolution" runat='server' AssociatedUpdatePanelID="upPricingSheet">
<ProgressTemplate>
<div style="position: absolute; z-index: 2000; left: 45%; display: inline; width: 100px;"
class="elev8form">
<asp:Image ID="Image1" runat='server' ImageUrl="~/portal/img/ajax-loader-big.gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<div id="pricing-sheet-wrapper">
<p class='left'>
More text</p>
<asp:Panel ID="pnlSaveMessage" runat="server" Visible="false" CssClass="save-message">
<span>Item prices saved</span>
</asp:Panel>
<div class='export'>
<span class='bigbutton'>
<asp:LinkButton ID="btnExport" runat='server' Text="Export to Excel" OnClick="btnExport_Click" />
</span>
</div>
<asp:UpdatePanel ID="upPricingSheet" runat="server" UpdateMode="Conditional" ViewStateMode="Disabled">
<ContentTemplate>
<div id="pricing-sheet">
<asp:PlaceHolder ID="phContent" runat="server"></asp:PlaceHolder>
<asp:PlaceHolder ID="opportunityPlaceHolder" runat="server" />
<div class='save export'>
<div>
<div id="pageValidationError" class="validationMessage">
* Changes not saved. Review all entries for validation messages. Required fields marked with an asterisk.
</div>
</div>
<%--<asp:HiddenField ID="hf" runat="server" value="0" />--%>
<center>
<span id="priceing-sheet-save-button">
<asp:Button ID="btnSave" runat="server" Text="Save All Prices" SkinID="redbutton"
OnClick="btnSave_Click" CausesValidation="true" />
</span>
</center>
</div>
</div>
<script type="text/javascript">
function pageLoad() {
$("#tabs .tab a").click(function () {
$("#<%= btnSave.ClientID%>").click();
});
}
</script>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.validationMessage').hide();
$('#<%= btnSave.ClientID %>').click(function () {
if (Page_IsValid == false) {
$('.validationMessage').show();
return false;
}
});
$('input[type=text]').blur(function () {
if (Page_IsValid == false) {
$('.validationMessage').show();
return false;
}
else {
$('.validationMessage').hide();
}
})
});
That is the intended behavior - the event is called OnTextChanged (different from original) not OnTextTyped (any text entered), for that you would have to handle this event (which triggers even if nothing at all is entered):
OnBlur="__doPostBack(this.id, '');"
UPDATE: its pretty simple actually, since you are using ajax, your textbox's .defaultValue is not changing between postbacks, only the .value is - so either use OnBlur as I told you, or on every postback change the .defaultValue to .value in javascript: http://www.w3schools.com/jsref/prop_text_defaultvalue.asp
or just place the textbox in the UpdatePanel, and it will take care of it self on its own...
UPDATE 2: First off, nowhere in your code is the textbox shown to be inside an `UpdatePanel', and secondly, you have 3 choices:
a) For OnBlur method to work, remove AutoPostBack property (it is the client side OnChange event), but keep the OnTextChanged event (it is server side).
b) For ViewState method to work, set ViewStateMode="Enabled" on the textbox, and make sure you are using ViewStateMode="Disabled" on its containers - and not EnableViewState="False".
c) javascript .defaultValue method...