Develop Reference

How to disable TextBox if it not empty By JavaScript on page Load

I have an asp.net page that contain some textbox in ListView
I want to disable textbox that have some text by asp.net ItemDataBound ListView Event or Javascript code
How can i do that?
<asp:ListView ID="ListView1" runat="server" DataKeyNames="ID" >
<ItemTemplate>
<tr class="xl68" height="29" style='mso-height-source: userset; height: 21.75pt'>
<td > <asp:Label ID="lblID" runat="server" Visible="false" Text='<%# Eval("ID") %>'></asp:Label></td>
<td class="xl66" style='border-top: none'><%# Container.DataItemIndex + 1 %> </td>
<td class="xl69" width="351" style='border-top: none; border-left: none; width: 263pt'> <%# Eval("Name") %></td>
<td><asp:TextBox runat="server" MaxLength="2" Text='<%# Bind("C1") %>' ID="txb1" ></asp:TextBox></td>
<td><asp:TextBox runat="server" MaxLength="2" Text='<%# Bind("C2") %>' ID="txb2" ></asp:TextBox></td>
<td><asp:TextBox runat="server" MaxLength="2" Text='<%# Bind("C3") %>' ID="txb3" ></asp:TextBox></td>
<td><asp:TextBox runat="server" MaxLength="2" Text='<%# Bind("C4") %>' ID="txb4" ></asp:TextBox></td>
<td><asp:TextBox runat="server" MaxLength="2" Text='<%# Bind("C5") %>' ID="txb5" ></asp:TextBox></td>
<td class="xl67"> </td>
</tr>
</ItemTemplate>
</asp:ListView>

add the CssClass property with every TextBox control like this
<asp:TextBox runat="server" MaxLength="2" ID="txb1" CssClass="myCss" ></asp:TextBox>
add the Js function in aspx
function DisableInput(){
var inputs = $('input.myCss[type="text"]');
inputs.each(function( index )
{
if( $( this ).text() !='')
{
$( this ).attr('disabled',true);
}
});
}
On you Page_Load event add this code
ClientScript.RegisterStartupScript(GetType(), "Javascript", "javascript:DisableInput(); ", true);

On you Page_Load event add this code
ClientScript.RegisterStartupScript(GetType(), "Javascript", "javascript:disablewithText(); ", true);
In that javaScript function you can iterate through all the textboxes and check for having value and accordingly you can set disable attribute.

I Solved it in CodeBehind by this code in Page_Load Event
foreach (ListViewItem row in ListView1.Items)
{
foreach (Control txt in row.Controls)
{
if (txt is TextBox)
{
if (((TextBox)txt).Text != "")
((TextBox)txt).Enabled = false;
}
}
}

querySelectorAll returns empty nodelist

I have an ASP.Net page with 3 textboxes and 1 radiobuttonlist. Each of the 4 controls has
class="tabbable"
in its definition. Here's the complete markup:
<%# Control Language="c#" AutoEventWireup="false" Codebehind="approvalacctprocess.ascx.cs" Inherits="cmc.workflow.ui.ApprovalAcctProcess" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>
<%# Register tagprefix="CMC" Tagname="ApprovalComments" src="~/workflow\ui\ApprovalComments.ascx" %>
<script src="../../Scripts/jquery-1.4.1.js"></script>
<asp:Panel ID="pnlApprovalAC" CssClass="STDPANEL" HorizontalAlign="Center" Runat="server" Width="550">
<TABLE cols="2" width="520">
<TR>
<TD class="FLDLABEL" style="VERTICAL-ALIGN: top">Client Number</TD>
<TD>
<asp:TextBox id=txtclnum style="VERTICAL-ALIGN: top" Width="300" Runat="server" CssClass="FLDVALUE" TabIndex="0" onchange="MoveNext(this);" Text='<%# Property["clnum"] %>' MaxLength="14" AutoPostBack="True" class="tabbable"></asp:TextBox>
<asp:RegularExpressionValidator id="rxClNum" ValidationExpression="^[0-9]+[ ]*$|Clt Number TBD" ErrorMessage="Client Number consists of up to 14 numbers"
ControlToValidate="txtclnum" runat="Server"></asp:RegularExpressionValidator></TD>
<TR>
<TD class="FLDLABEL" style="VERTICAL-ALIGN: top">Matter Number (5-6 digit)</TD>
<TD>
<asp:Label id=lbclnum style="TEXT-ALIGN: right" Width="140" Runat="server" Text='<%# Property["clnum"] %>' Font-Name="verdana" Font-Size="x-small">
</asp:Label>-
<asp:TextBox id=txtmmatter Width="150" Runat="server" CssClass="FLDVALUE" TabIndex="1" Text='<%# Property["mmatter"] %>' MaxLength="6" AutoPostBack="True" class="tabbable"></asp:TextBox>
</TD>
<TR>
<TD colSpan="2">
<HR style="COLOR: gray; TEXT-ALIGN: left" SIZE="1">
</TD>
</TR>
<tr>
<td class="FLDLABEL" style="VERTICAL-ALIGN: top" width="500" colspan="2"><asp:Label runat="server" ID="lbExistingClientQuestion" Text="Is there an Engagement Letter on file for this client?" Visible="false" />
<asp:Label runat="server" ID="lbUDFRetainerLetter" Text='<%# Property["RetainerLetter"] %>' Visible="false" /></td>
</tr>
<TR>
<TD class="FLDLABEL" style="VERTICAL-ALIGN: top" width="500" colSpan="2">Has a
retainer/engagement letter been submitted and approved by Charlotte Fischman?</TD>
</TR>
<TR>
<TD colSpan="2">
<asp:RadioButtonList id="rblRetLtrReturned" TabIndex="2" Runat="server" CssClass="RADIOBUTTONLIST" RepeatDirection="Horizontal" class="tabbable"
RepeatLayout="Table" RepeatColumns="1" width="300" AutoPostBack="True">
<asp:ListItem Value="0">No</asp:ListItem>
<asp:ListItem Value="1">Yes</asp:ListItem>
</asp:RadioButtonList>
<asp:Label id="lblnoretainerltrneeded" Runat="server" CssClass="SMALLNOTE" Text="(This is an existing client and the matter is in an existing area of law.
A retainer letter may not be needed.)"
Font-Size="xx-small" Visible="False" ForeColor="red"></asp:Label></TD>
</TR>
<TR>
<TD colSpan="2">
</TD>
</TR>
<TR>
<td class="FLDLABEL" style="VERTICAL-ALIGN: top" colSpan="2" width="500">Reason for Not Submitting an Retainer/Engagement Letter for Approval<SPAN style="FONT-WEIGHT: bold; COLOR: red">
*</SPAN>
<asp:Label runat="server" CssClass="SMALLNOTE" Text="(Required if no retainer letter submitted and not an existing client)" Font-Size="XX-Small" ForeColor="Red" /></td>
</TR>
<TR>
<td colspan="2">
<asp:TextBox Width="500" runat="server" TextMode="MultiLine" TabIndex="3" CssClass="FLDVALUE" ID="txtReason" MaxLength="500" Text='<%# Property["Reason"] %>' AutoPostBack="True" class="tabbable" />
</td>
</TR>
<TR>
<TD colSpan="2">
<HR style="COLOR: gray; TEXT-ALIGN: left" SIZE="1">
</TD>
</TR>
<TR>
<TD class="FLDLABEL" style="VERTICAL-ALIGN: top">Comments</TD>
<TD>
<asp:TextBox id="txtComments" style="VERTICAL-ALIGN: top" Width="300" TabIndex="4" Runat="server" CssClass="FLDVALUE"
MaxLength="450" Rows="5" TextMode="MultiLine" Text='<%# Property["AcctgComment"] %>' AutoPostBack="True" class="tabbable"></asp:TextBox></TD>
</TR>
</TABLE>
<TABLE class="STDPANEL" style="VERTICAL-ALIGN: middle" height="50" width="550">
<TR>
<td align="center">
<input id="btnSaveACProperty" runat="server" name="btnSaveACProperty"
onserverclick="OnSave_Click" type="submit" value="Save Status and Comment">
<input id="btnResetACProperty" runat="server" name="btnResetACProperty"
type="reset" value="Cancel">
</input>
</input>
</td>
<tr>
<td align="left">
<asp:ValidationSummary ID="valsum" runat="server" BorderColor=""
BorderStyle="Solid" BorderWidth="2" CssClass="VALIDATORSUM" DisplayMode="List"
Font-Bold="True" ForeColor="red"
HeaderText=" Some errors occurred in your input. Please correct them:<br> "
ShowMessageBox="True" ShowSummary="True" Width="500" />
</td>
</tr>
</TABLE>
</asp:Panel>
<script type="text/vbscript">
</script>
<script type="text/javascript" lang="javascript">
function MoveNext(ele) {
$(document).ready(function () {
var lastTabIndex = 4;
var currentElementID = ele.id; // ID set by OnFocusIn
var currentElement = document.getElementById(currentElementID);
var curIndex = currentElement.tabIndex; //get current elements tab index
if (curIndex == lastTabIndex) { //if we are on the last tabindex, go back to the beginning
curIndex = 0;
}
var tabbables = document.querySelectorAll("tabbable"); //get all tabbable elements
alert(tabbables.length);
for (var i = 0; i < tabbables.length; i++) { //loop through each element
if (tabbables[i].tabIndex == (curIndex + 1)) { //check the tabindex to see if it's the element we want
tabbables[i].focus(); //if it's the one we want, focus it and exit the loop
break;
}
}
});
}
</script>
The textbox txtclnum calls the javascript function MoveNext at the bottom of the page (just to make sure everything loads in the right order)(this is taken from the first answer to this question). MoveNext has an alert in it to tell me what tabbables.length is. The alert returns 0 because the CssClass in the .Net controls overwrites the class="tabbable" in the HTML. I've tried
var tabbables = document.getElementsByTagName("*");
which gets me to the correct control, but the focus doesn't stay on that control. How can I keep the focus on the control?

That function takes as its argument a CSS selector, so if you're looking for elements with class "tabbable" you would use document.querySelectorAll(".tabbable")

Since tabbable is a class, you need to put a period in front of it in your queryselector, so it should be:
document.querySelectorAll(".tabbable")
Edit: Just further clarification, the queryselector without the "." would be looking for html tags like <tabbable>. Since that does not exist, the length returned is 0.

The way you're using it, document.querySelectorAll("tabbable") is looking for an element of the tag <tabbable>. Since it looks like you're trying to query by a class, add the period to denote it is such.
document.querySelectorAll(".tabbable")
When you use document.getElementsByClassName("tabbable") it could work, so I could see where you could get confused if you've used that method in the past.

OK, I feel like an idiot. Just for others' future reference, the problem was that 1) there's a Cssclass assigned to those controls, which overrides my tabbable class in the HTML markup; and 2) once I took care of that (see below code), it still wasn't working because (duh) each control had an AutoPostBack=true on it (they used to have server-side code attached to them). Now that AutoPostBack is false, my code works fine. Here it is:
<script type="text/javascript" lang="javascript">
function MoveNext(currentElement, btnID) {
$(document).ready(function () {
var saveButton = document.getElementById(btnID);
saveButton.disabled = false;
var lastTabIndex = 4;
var curIndex = currentElement.tabIndex; //get current elements tab index
if (curIndex == lastTabIndex) { //if we are on the last tabindex, go back to the beginning
curIndex = 0;
}
var tabbables = document.getElementsByTagName("*"); //get all tabbable elements
for (var i = 0; i < tabbables.length; i++) { //loop through each element
if (tabbables[i].tabIndex != null & tabbables[i].tabIndex == (curIndex + 1)) { //check the tabindex to see if it's the element we want
tabbables[i].focus(); //if it's the one we want, focus it and exit the loop
break;
}
}
});
}
Thanks to everyone for their help.

asp.net controls values used on jquery ui dialog are empty in code behind

I am working on an asp.net application. I am using Jquery UI to add record to database. here is the markup.
<div id="AddShippingPopup" class="popup" title="New Shipping Address">
<p>Shipping Address</p>
<table>
<tr>
<td> Line 1:</td>
<td><asp:TextBox ID="txtShippingLine1" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Line 2:</td>
<td><asp:TextBox ID="txtShippingLine2" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>City:</td>
<td> <asp:TextBox ID="txtShippingCity" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>State:</td>
<td> <asp:DropDownList ID="ddlShipingState" runat="server" Width="200px" CssClass="required">
<asp:ListItem Value="">Please select</asp:ListItem>
<asp:ListItem Value="AK">Alaska</asp:ListItem>
</asp:DropDownList></td>
</tr>
<tr>
<td>Zip:</td>
<td><asp:TextBox ID="txtShippingZip" runat="server" Width="50px"></asp:TextBox></td>
</tr>
<tr>
<td>Preferred:</td>
<td>
<asp:CheckBox ID="chkPreferredShipAdd" runat="server" />
</td>
</tr>
</table>
</div>
and here is a button outside this div:
<asp:Button ID="btnAddShipping" runat="server" Text="Add Shipping" style = "display:none" OnClick = "btnAddShipping_Click" />
and Jquery dialog code:
$("#AddShippingPopup").dialog({
autoOpen: false,
modal: true,
width: 500,
height: 370,
buttons: {
"Cancel": function () {
$(this).dialog("close");
},
"Save": function () {
$("[id*=btnAddShipping]").click();
$(this).dialog("close");
}
}
});
function createShippingAddress() {
$("#AddShippingPopup").dialog("widget").find(".ui-dialog-titlebar-close").hide();
$("#AddShippingPopup").dialog("open");
return false;
}
and here is link to initialize the dialog:
<asp:LinkButton ID="lnkAddNewShippingAddress" runat="server" Font-Size="Smaller" OnClientClick="createShippingAddress(); return false;">Add New</asp:LinkButton>
but values of text boxes and drop down are empty when Save button is clicked. and empty strings are saved in db. How to fix it ?

The usual problem in this cases is that the javascript Dialog is render their content out side of the asp.net form element.
So force him to render inside the form by using the appendTo option. Here is an example from jQuery site:
$( ".selector" ).dialog({ appendTo: "#someElem" });
and be sure that the element that you append to, is inside your asp.net form.
Your code will be as:
$("#AddShippingPopup").dialog({
appendTo: "#dialogAfterMe",
autoOpen: false,
modal: true,
width: 500,
height: 370,
buttons: {
"Cancel": function () {
$(this).dialog("close");
},
"Save": function () {
$("[id*=btnAddShipping]").click();
$(this).dialog("close");
}
}
});
and place this div somewhere inside your form
<div id="dialogAfterMe"></div>

How to get the particular cell value from a gridview and to display it in a textbox using jquery in asp.net?

The following is my grid view code. In this, I have one column "Syllabus". In the next column I'm having edit and delete buttons. On clicking the Edit button, a popup will display. I displayed that popup using jquery. In the popup, I'm having a textbox for Syllabus. But I dont know how to get that syllabus value from the gridview column and to display its value in the popup for editing its value?
<asp:GridView ID="gdvwSyllabus" CssClass="enquiryTable" runat="server" AutoGenerateColumns="false" Width="100%">
<Columns>
<asp:BoundField HeaderText ="Syllabus" DataField ="Syllabus" />
<asp:TemplateField HeaderText="Options">
<ItemTemplate>
<ul class="enquiryList1">
<li><asp:Image ImageUrl="~/Images/edit2.png" runat="server" ID="btnSyllabusEdit" CssClass="btnEdit" /></li>
<li><a><asp:Image ImageUrl="~/Images/delete2.png" runat="server" ID="btnDelete" /></a></li>
</ul>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
This is my popup code which I designed it as a table.This table will popup on clicking the edit button.I want to display the "syllabus" value in the "txtsyllabus" textbox for edit.
<table style="border: 0px; margin-left: 15px;" border="0" align="left">
<tr>
<td align="right">Syllabus <span class="ErrorField">*</span>:</td>
<td>
<asp:TextBox ID="txtsyllabus" CssClass="txtbox txtSyllabus" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td> </td>
<td align="left">
<asp:Button ID="btnSubmit" Text="Save" CssClass="btnStyle btnSyllabusSubmit" runat="server" />
</td>
</tr>
</table>
Thanks in advance.

You can do this by calling a javascript function from button on client click as following:
function showpopup(details)
{
document.getElementById('texbox').value=details
document.getElementById('divpopup').style.display='block'
return false;
}
on gridview item databound event do the code like this
btn=e.item.findcontrol("editbouttn")
btn.attributes.add("onclick","return showpopup(" & e.item.dataitem("details") & ");"
please let me know if this does not work.

Accessing Eval value inside Gridview Using JQuery OR JavaScript

I have gridview with four columns. All the data inside is generated in RowDataBound event using Literals
eg.
<asp:TemplateField HeaderText="" >
<ItemTemplate>
<asp:HiddenField ID="ID" Value='<%#Eval("id")%>' runat="server" />
<asp:Literal ID="ltrImage" runat="server"></asp:Literal>
</ItemTemplate>
</asp:TemplateField>
and
<asp:TemplateField HeaderText="" HeaderStyle-HorizontalAlign="Center"
ItemStyle-Width="10%" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Literal ID="lrtBrief" runat="server"></asp:Literal>
</ItemTemplate>
</asp:TemplateField>
In one of these Literals I am creating a <a> tag and I want to find the <%#Eval("id")%> value in click event of the <a> tag.
I did try something like this but didn't work
$('.contactLink').click(function () {
var grd = $('#MainContent_cphMain_DisplayResults1_gvDisplay');
var txt = $(grd).find("cells[1].innerHTML").html();
});
HTML Looks Like this
<td align="center" style="width:5%;">
<input id="MainContent_cphMain_DisplaySearchResults1_gvListing_Listing_0" type="hidden" value="1" name="ctl00$ctl00$MainContent$cphMain$DisplaySearchResults1$gvListing$ctl02$Listing">
<table class="contact">
<tbody>
<tr>
<td valign="top">
<h3>Test</h3>
<h3>
<a id="hlContact" class="contactLink format" runat="server">Contact</a>
<a id="hlViewF" class="viewLink format" href="CategoriesSearch.aspx?ID=1" runat="server">View </a>
</td>
</tr>
</tbody>
</table>
</td>
Any help will be appreciate
Thanks

Note that you're missing a closing h3 around your two links.
$(".contactLink").click(function() {
var value = $(this).closest("table") // Get the <a>'s closest <table>
.siblings(":hidden") // <hidden>
.val();
});
Fiddle for reference.

if I understand your question right:
In one of these Literals I am creating a tag and I want to find
the <%#Eval("id")%> value in click event of the tag.
I would say something like this would do the trick
$('a').live("click", function () {
alert($(this).attr("id"))
});