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.
Related
I have a UserControl "Day" that is repeated 5 times in another UserControl for 5 weekdays in a week that means each day 1 UserControl. And in this UserControl has RadioButtonList rdlAmountSlot is repeated 4 times with the below data
rdlAmountSlot_0 - Amount1 --- (1 - 100)
rdlAmountSlot_1 - Amount2 --- (100 - 1000)
rdlAmountSlot_2 - Amount3 --- (1000 - 10000)
rdlAmountSlot_3 - Amount4 --- (10000 - 100000)
I used the below code for confirmation from the user
$(document).ready(function(){
$("[id^='rdlAmountSlot_'][type='radio']").change(function () {
var radioBtnId = this.id;
var $this = $(this);
radconfirm('Are you sure you want to select this slot?', function(arg){
if (arg == true) {
$find('<%= FindControl("txtAmount").ClientID %>').set_value("");
}
else {
$this.siblings('input').prop('checked',true);
var rdlAmountSlot = document.getElementById(radioBtnId);
rdlAmountSlot.checked = false;
$this.prop('checked', false);
}
}, 300, 100,"");
});
});
The above code is throwing confirmation box for 5 times. What could be the reason and how to resolve it?
UPDATE
Below is my markup code for each day
<asp:UpdatePanel runat="server" ID="pnlUpdate" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlDayView" runat="server">
<asp:RadioButtonList ID="rdlAmountSlot" CssClass="radio1" runat="server" ClientIDMode="Static">
</asp:RadioButtonList>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
Below is the markup for 5 days
<table>
<tr>
<td>
<asp:Panel ID="pnlMonday" runat="server" >
<uc1:My ID="MyMonday" runat="server" />
</asp:Panel>
</td>
<td>
<asp:Panel ID="pnlTuesday" runat="server" >
<uc1:My ID="MyTuesday" runat="server" />
</asp:Panel>
</td>
<td>
<asp:Panel ID="pnlWednesday" runat="server" >
<uc1:My ID="MyWednesday" runat="server" />
</asp:Panel>
</td>
<td>
<asp:Panel ID="pnlThursday" runat="server" >
<uc1:My ID="MyThursday" runat="server" />
</asp:Panel>
</td>
<td>
<asp:Panel ID="pnlFriday" runat="server" >
<uc1:My ID="MyFriday" runat="server" />
</asp:Panel>
</td>
</tr>
<table>
This is the code similar to rdlAmountSlot
<table id="ctl00_ContentPlaceHolder1_MyAvailability_MyAvailabilityMonday_rdlAvailability" class="radio1" border="0" style="color: #004B59; font-size: 11px; font-family: Arial, Sans-serif; text-align: justify">
<tr>
<td><span disabled="disabled"><input id="ctl00_ContentPlaceHolder1_MyAvailability_MyAvailabilityMonday_rdlAvailability_0" type="radio" name="ctl00$ContentPlaceHolder1$MyAvailability$MyAvailabilityMonday$rdlAvailability" value="AVL01" disabled="disabled" /><label for="ctl00_ContentPlaceHolder1_MyAvailability_MyAvailabilityMonday_rdlAvailability_0">Slot 0</label></span></td>
</tr><tr>
<td><input id="ctl00_ContentPlaceHolder1_MyAvailability_MyAvailabilityMonday_rdlAvailability_1" type="radio" name="ctl00$ContentPlaceHolder1$MyAvailability$MyAvailabilityMonday$rdlAvailability" value="AVL02" /><label for="ctl00_ContentPlaceHolder1_MyAvailability_MyAvailabilityMonday_rdlAvailability_1">Slot 1</label></td>
</tr><tr>
<td><input id="ctl00_ContentPlaceHolder1_MyAvailability_MyAvailabilityMonday_rdlAvailability_2" type="radio" name="ctl00$ContentPlaceHolder1$MyAvailability$MyAvailabilityMonday$rdlAvailability" value="AVL03" /><label for="ctl00_ContentPlaceHolder1_MyAvailability_MyAvailabilityMonday_rdlAvailability_2">Slot 2</label></td>
</tr><tr>
<td><input id="ctl00_ContentPlaceHolder1_MyAvailability_MyAvailabilityMonday_rdlAvailability_3" type="radio" name="ctl00$ContentPlaceHolder1$MyAvailability$MyAvailabilityMonday$rdlAvailability" value="AVL04" checked="checked" /><label for="ctl00_ContentPlaceHolder1_MyAvailability_MyAvailabilityMonday_rdlAvailability_3">Slot 3</label></td>
</tr>
</table>
May be if you try with each it would work.
$(document).ready(function(){
$("[id^='rdlAmountSlot_'][type='radio']").each(function () {
$(this).change(function(){
var radioBtnId = this.id;
var $this = $(this);
radconfirm('Are you sure you want to select this slot?', function(arg){
if (arg == true) {
$find('<%= FindControl("txtAmount").ClientID %>').set_value("");
}
else {
$this.siblings('input').prop('checked',true);
var rdlAmountSlot = document.getElementById(radioBtnId);
rdlAmountSlot.checked = false;
$this.prop('checked', false);
}
}, 300, 100,"");
})
});
});
I want to retrieve the primary and secondary site administrators using javascript and show them in the labels on custom Access Denied page. Using the code below(inline javascript) to do that but SP.SOD.ExcuteFunc() does not get executed. Am I missing something?
<asp:Content ID="Content5" ContentPlaceHolderId="PlaceHolderMain" runat="server">
<script type="text/javascript">
SP.SOD.RegisterSod("sp.js", "\_layouts\sp.js");
</script>
<script type="text/javascript">
debugger;
alert("check");
var clientContext;
var siteCollection;
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', getAdmin);
function getAdmin(){
alert("Entering into function");
var currentContext = SP.ClientContext.get_current();
//alert("1");
var siteColl = clientContext.get_site();
var rootWeb = siteColl.get_rootWeb();
this.props = rootWeb.get_allProperties();
clientContext.load(rootWeb);
clientContext.executeQueryAsync(onRequestSucceeded, onRequestFailed);
//alert("end");
}
//alert("After");
function onRequestSucceeded()
{
alert("inside onrequest");
var primarySiteContact = this.props.get_item('GA_PrimarySiteCollectionContact');
var secondarySiteContact = this.props.get_item('GA_SecondarySiteCollectionContact');
elem = document.getElementById('lblPrimary');
elem.innerHTML = primarySiteContact;
alert(primarySiteContact);
}
function onRequestFailed(sender, args)
{
alert('Error: ' + args.get_message());
}
</script>
<table border="0" cellpadding="0">
<asp:Panel id="PanelUserName" runat="server">
<tr>
<td class="ms-sectionheader">
<img src="/_layouts/images/ListSet.gif" alt="" />
<SharePoint:EncodedLiteral ID="EncodedLiteral3" runat="server" text="<%$Resources:wss,accessDenied_currentuser%>" EncodeMethod='HtmlEncode'/>
</td>
</tr>
<tr>
<td valign="top" class="ms-descriptiontext"><SharePoint:EncodedLiteral ID="EncodedLiteral4" runat="server" text="<%$Resources:wss,accessDenied_loggedInAs%>" EncodeMethod='HtmlEncode'/>
<b><asp:Label id="LabelUserName" runat="server"/></b>
</td>
</tr>
</asp:Panel>
<tr>
<td> </td>
</tr>
<tr>
<td>
<asp:HyperLink id="HLinkLoginAsAnother" Text="<%$SPHtmlEncodedResources:wss,accessDenied_logInAsAnotherOne%>"
CssClass="ms-descriptiontext" runat="server"/>
<br/>
<asp:HyperLink id="HLinkRequestAccess" Text="<%$SPHtmlEncodedResources:wss,accessDenied_requestAccess%>"
CssClass="ms-descriptiontext" runat="server" /><br /><br />
<asp:Label id="Label1" runat="server" Text="Please contact the below mentioned site owners" /><br/>
<asp:Label id="lblPrimary" runat="server" /><br/>
<asp:Label id="lblSecondary" runat="server" />
</td>
</tr>
</table>
</asp:Content>
I am having trouble setting panel visibility
but on change JavaScript returning null reference exception.
JavaScript runtime error: Unable to get property 'setAttribute' of undefined or null reference
I want to make panel TrMarketingDetails visible based on a radio button (RbMarketing) change.
JavaScript
function trVisible(val) {
var selected = $("#" + val.id + " input:radio:checked").val();
if (selected == "1") {
document.getElementById('<%=TrMarketingDetails.ClientID %>').setAttribute("style", "visibility: visible");
document.getElementById('<%= hfdMarket.ClientID %>').value = 'Y';
}
else if (selected == "2") {
document.getElementById('<%=TrMarketingDetails.ClientID %>').setAttribute("style", "visibility: hidden");
}
}
AXPX Code
<tr>
<td style="font-weight: bold" align="left" class="style4">
Marketing facilities available
</td>
<td style="font-weight: bold" class="style23">
<asp:RadioButtonList ID="RbMarketing" runat="server" DataTextField="Yes" onchange="trVisible(this);"
RepeatDirection="Horizontal">
<asp:ListItem Text="Yes" Value="1"></asp:ListItem>
<asp:ListItem Text="No" Value="2"></asp:ListItem>
</asp:RadioButtonList>
<asp:HiddenField ID="hfdMarket" runat="server" />
<%--OnSelectedIndexChanged="RbMarketing_SelectedIndexChanged" AutoPostBack="True"--%>
</td>
</tr>
<asp:Panel ID="TrMarketingDetails" runat="server" Style="visibility: hidden" EnableViewState="true">
<tr>
<%--visible="false"--%>
<td runat="server" style="border: none;" class="style7" align="left">
Details :
</td>
<td runat="server" style="border: none;" class="style26" align="left">
<asp:TextBox ID="TextMarketingDetails" runat="server" CssClass="textboxCss" autocomplete="off"
MaxLength="100" Enabled="True" ondrop="return false;" Width="300px" TextMode="MultiLine"></asp:TextBox>
<asp:RequiredFieldValidator ID="Requiredfieldvalidator49" runat="server" Display="None"
ControlToValidate="TextMarketingDetails" ValidationGroup="grp1" ForeColor="#F00000"
SetFocusOnError="true" ErrorMessage="Please enter Marketing details" Enabled="false"></asp:RequiredFieldValidator>
<asp:ValidatorCalloutExtender ID="ValidatorCalloutExtender3" runat="server" PopupPosition="Right"
TargetControlID="Requiredfieldvalidator49">
</asp:ValidatorCalloutExtender>
</td>
</tr>
</asp:Panel>
W3C link for style.visibility
document.getElementById("controlid").style.visibility = "hidden"
you just change like
function trVisible(val) {
var selected = $("#" + val.id + " input:radio:checked").val();
if (selected == "1") {
document.getElementById('<%=TrMarketingDetails.ClientID %>').style.visibility = "visible";
document.getElementById('<%= hfdMarket.ClientID %>').value = 'Y';
}
else if (selected == "2") {
document.getElementById('<%=TrMarketingDetails.ClientID %>').style.visibility = "hidden";
}
}
You are already use jquery syntax in your code, then good to do this via jquery syntax like
$('#<%=TrMarketingDetails.ClientID %>').show();
$('#<%=TrMarketingDetails.ClientID %>').hide();
Check this link with same question
I'm trying to create a small jQuery script that blackens out the background of a page, brings up a small form, and then takes the form away and restores the background when the form is submitted / cancelled.
I have successfully demo;d this with a JSFDDLE but I have written that in plain HTML, and in reality I need to do this in an ASP.NET ASPX page.
The small form I need to pop up is inside a fieldset, inside an InsertItemTemplate. I can get the backgound to blacken out, the form pops up, but when I press either the Insert or Cancel Buttons, I can't get the background (div with id="backing") to go away. My jQuery can't find the buttons even though I'm targeting them by id.
Here is the jQuery in my ASPX page:
$(document).ready(function () {
var btnCancel = document.getElementById('btnInsertCancel');
var btnAddContact = document.getElementById('btnAddContact');
// when add contact button is pressed
$(btnAddContact).click(function () {
$('#backing').fadeIn();
});
// when submit button in add customer pop up is pressed
$(btnCancel).click(function () {
$('#backing').fadeOut();
});
});
The Insert Item template looks like this
<InsertItemTemplate>
<fieldset id="newContact">
<table cellpadding="2" cellspacing="0" style="height: 100%;">
<tr>
<td style="width: 20%;">
Title:
</td>
<td style="width: 80%; padding-left: 5px;">
<telerik:RadDropDownList ID="drpITitle" runat="server"
DataSourceID="objTitle" DataTextField="TITLEDESC"
DataValueField="TITLEID" SelectedValue='<%#Bind("TITLEID") %>' >
</telerik:RadDropDownList>
<asp:RequiredFieldValidator ID="rfvTitle" runat="server" ErrorMessage="Title (Required)"
ValidationGroup="valClientContactI" InitialValue="" ControlToValidate="drpITitle"
Display="Dynamic"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
Firstname:
</td>
<td style="width: 80%; padding-left: 5px;">
<telerik:RadTextBox ID="txtIFirstname" Runat="server" Text='<%# Bind("CONTACTFNAME")%>'>
</telerik:RadTextBox>
<asp:RequiredFieldValidator ID="rfvFirstname" runat="server" ErrorMessage="First name (Required)"
ValidationGroup="valClientContactI" InitialValue="" ControlToValidate="txtIFirstname"
Display="Dynamic"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
Surname:
</td>
<td style="width: 80%; padding-left: 5px;">
<telerik:RadTextBox ID="txtISurname" Runat="server" Text='<%# Bind("CONTACTSNAME")%>'>
</telerik:RadTextBox>
<asp:RequiredFieldValidator ID="rfvSurname" runat="server" ErrorMessage="Surname (Required)"
ValidationGroup="valClientContactI" InitialValue="" ControlToValidate="txtISurname"
Display="Dynamic"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
DOB:
</td>
<td style="width: 80%; padding-left: 5px;">
<telerik:RadDatePicker runat="server" ID="dtpIDOB" SelectedDate='<%# Bind("DOB")%>'>
</telerik:RadDatePicker>
</td>
</tr>
<tr>
<td>
Position:
</td>
<td style="width: 80%; padding-left: 5px;">
<telerik:RadDropDownList ID="drpIPosition" runat="server"
DataSourceID="objPosition" DataTextField="POSITIONDESC"
DataValueField="POSITIONID" SelectedValue='<%#Bind("CONTACTPOSITIONID") %>'>
</telerik:RadDropDownList>
<asp:RequiredFieldValidator ID="rfvPosition" runat="server" ErrorMessage="Position (Required)"
ValidationGroup="valClientContactI" InitialValue="" ControlToValidate="drpIPosition"
Display="Dynamic"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
Marketing:
</td>
<td style="width: 80%; padding-left: 5px;">
<asp:CheckBox ID="chkIMarketing" runat="server"
Enabled="true" Checked='<%# Bind("MARKETING") %>'></asp:CheckBox>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="btnInsert" runat="server" CommandName="PerformInsert" Text="Insert" ValidationGroup="valClientContactI" ClientIDMode="Static">
</asp:Button>
<asp:Button ID="btnInsertCancel" runat="server" CommandName="Cancel" Text="Cancel" CausesValidation="false" ClientIDMode="Static">
</asp:Button>
</td>
</tr>
</table>
</fieldset>
</InsertItemTemplate>
Any suggestions about how I can target either the Inseert Button, or Cancel button would be greatly appreciated.
Many Thanks
If you can use ID's
ID's are fine for unique controls (if anything, preferable, as there should not be duplicates and the jQuery look-up is faster). In this specific case you will never have more than one InsertItem template visible at once so your ID's will be fine. If that is ever not the class, use classes instead as Anoop Joshi suggests*.
*note: The other reason you might want to switch to classes, and class selectors, is that Telerik controls (which you use) do not properly support ClientIDMode http://www.telerik.com/forums/clientidmode-support-for-asp-net-4-0
The only other thing that can happen is when elements are added to the DOM dynamically. If that turns out to be the case, switch to using delegated events like this:
$(function(){
$(document).on('click', '#btnInsertCancel', function () {
$('#backing').fadeIn();
});
// when submit button in add customer pop up is pressed
$(document).on('click' , '#btnAddContact', function () {
$('#backing').fadeOut();
});
});
These listen at an ancestor, then apply the selector, then apply the function to any matching elements that generated the event.
The preference is to use the first non-changing ancestor in your DOM. Failing that (you do not show the rest of the page) you can use document which receives all bubbled events on the page.
Note: $(function(){YOUR CODE}); is the preferred short version of $(document).ready(function () {YOUR CODE});
"Class" based version
Assuming you have to use classes instead (for any of the reason mentioned) the code becomes:
$(function(){
$(document).on('click', '.btnInsertCancel', function () {
$('#backing').fadeIn();
});
// when submit button in add customer pop up is pressed
$(document).on('click' , '.btnAddContact', function () {
$('#backing').fadeOut();
});
});
ASPX:
<td colspan="2">
<asp:Button class="btnInsert" runat="server" CommandName="PerformInsert" Text="Insert" ValidationGroup="valClientContactI" ClientIDMode="Static">
</asp:Button>
<asp:Button class="btnInsertCancel" runat="server" CommandName="Cancel" Text="Cancel" CausesValidation="false" ClientIDMode="Static">
</asp:Button>
</td>
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"))
});