I'm having a Drop-down-list and a Text-box with auto-completed extender on my web form.
Now i need to set ContextKey property of auto-completed extender from java-script.
I'm trying to set ContextKey property using java-script on onkeyup event of text-box. But it's not working
.aspx code
<table>
<tr>
<td style="width:100px;">
<asp:Label ID="Label1" CssClass="lbl" runat="server" Text="Server:"></asp:Label>
</td>
<td colspan="4">
<asp:DropDownList ID="DropDownList1" CssClass="Comb" runat="server"
OnSelectedIndexChanged="ddlServer_SelectedIndexChanged" AutoPostBack="true">
</asp:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" CssClass="lbl" runat="server" Text="Originating:"></asp:Label>
</td>
<td colspan="4">
<asp:TextBox runat="server" ID="TextBox1" CssClass="tb10" autocomplete="off" onkeyup="SetContextKey()"/>
<ajaxToolkit:AutoCompleteExtender TargetControlID="TextBox1" UseContextKey="true"
runat="server" BehaviorID="AutoCompleteEx" ID="AutoCompleteExtender1"
ServicePath="AutoComplete.asmx" ServiceMethod="GetResellerList"
MinimumPrefixLength="1" CompletionInterval="1000" EnableCaching="true" FirstRowSelected="true"
CompletionSetCount="20" CompletionListCssClass="cssList" DelimiterCharacters=";, :"
ShowOnlyCurrentWordInCompletionListItem="true" OnClientHiding="OnClientCompleted"
OnClientPopulated="OnClientCompleted" OnClientPopulating="OnClientPopulating">
</ajaxToolkit:AutoCompleteExtender>
</td>
</tr>
</table>
.cs code (Service Code)
[WebMethod]
public string[] GetResellerList(string prefixText, int count, string contextKey)
{
DataSet ds = new DataSet();
ds = clsTransaction.Select("SELECT nm AS Name FROM tblReseller WHERE nm LIKE '" + prefixText + "%' AND wsid = '" + contextKey + "'",
DataSendBSSWEB.ServerDbEnum.MainSqlServer,
false);
//Then return List of string(txtItems) as result
List<string> txtItems = new List<string>();
String dbValues;
foreach (DataRow row in ds.Tables[0].Rows)
{
dbValues = row["Name"].ToString();
txtItems.Add(dbValues);
}
return txtItems.ToArray();
}
javascript Code
<script type="text/javascript">
function SetContextKey() {
$find('<%=autoComplete2.ClientID%>').set_contextKey($get("<%=ddlServer.ClientID %>").value);
}
</script>
Can any one tell me how can i do this using java-script.
Target control id of the extender should be the TextBox's Id, Not the drop down's.
Related
In the below code there is a radiobuttonlist control and Multiline textbox. On button click I would need to check whether textbox query should contain any WHERE clause. If yes then will get executed directly, but if not then should get confirmation box. If clicked on "Ok" then should get proceed but if clicked on "Cancel" then process get terminated there itself.
In my case confirmation box is not popping up and how to get it's value at code behind?
For this I would have followed an article as
https://www.aspsnippets.com/Articles/Server-Side-Code-Behind-Yes-No-Confirmation-Message-Box-in-ASPNet.aspx
below is my code
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
function alertmsg(m) {
alert(m);
}
function alertmsgwithYesNo(m) {
var confirm_value = document.createElement("INPUT");
confirm_value.type = "hidden";
confirm_value.name = "confirm_value";
if (confirm(m)) {
confirm_value.value = "Yes";
} else {
confirm_value.value = "No";
}
document.forms[0].appendChild(confirm_value);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<table width="100%">
<tr>
<td align="center" valign="top">
<table cellspacing="5">
<tr>
<td align="left" valign="top"><strong>Options : </strong>
<asp:RadioButtonList ID="RadioButtonListoptions" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Value="1">Execute Directly</asp:ListItem>
<asp:ListItem Value="2">Display In Gridview</asp:ListItem>
<asp:ListItem Value="3">Display On Label</asp:ListItem>
</asp:RadioButtonList> <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Select option" ControlToValidate="RadioButtonListoptions" Display="Dynamic" SetFocusOnError="true" ForeColor="Red"></asp:RequiredFieldValidator></td>
</tr>
<tr>
<td align="left" valign="top">
<asp:TextBox ID="TextBoxQuery" runat="server" TextMode="MultiLine" Height="400px" Width="800px" placeholder="Enter query..." Font-Size="Large" Text="" Style="padding: 5px;"></asp:TextBox>
<br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Enter your query" ControlToValidate="TextBoxQuery" Display="Dynamic" SetFocusOnError="true" ForeColor="Red"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td align="center">
<asp:Button ID="ButtonSubmitQuery" runat="server" Text="Submit" Width="200px" Height="30px" OnClick="ButtonSubmitQuery_Click" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<asp:Label ID="LabelShowData" runat="server" Text="Label Here"></asp:Label>
<asp:GridView ID="GridViewData" runat="server" AutoGenerateColumns="true" EmptyDataText="No record found."></asp:GridView>
<asp:SqlDataSource ID="SqlDataSourceData" runat="server"></asp:SqlDataSource>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
C#:
protected void ButtonSubmitQuery_Click(object sender, EventArgs e)
{
if (RadioButtonListoptions.SelectedIndex != -1)
{
if (Convert.ToInt32(RadioButtonListoptions.SelectedItem.Value.ToString()) == 1)
{
if (!TextBoxQuery.Text.ToString().Contains("Where"))
{
ScriptManager.RegisterClientScriptBlock(Page, this.GetType(), "message", "alertmsgwithYesNo('Entered query did not have WHERE condition.');", false);
//ClientScript.RegisterClientScriptBlock(this.GetType(), "UpdateTime", "alertmsgwithYesNo('Query did not have WHERE Condition. Do you want to run it without Where Con');", true);
string confirmValue = Request.Form["confirm_value"];
Label1.Text = confirmValue;
return;
}
using (SqlConnection conn = new SqlConnection(vali.constr))
{
try
{
using (SqlCommand cmdsql = new SqlCommand(TextBoxQuery.Text.Trim()))
{
conn.Open();
int count = cmdsql.ExecuteNonQuery();
if (count > 0)
{
ScriptManager.RegisterClientScriptBlock(Page, this.GetType(), "message", "alertmsg('Select Option');", false);
}
}
}
catch (Exception ex)
{
Response.Write(ex.ToString());
}
finally
{
if (conn.State == ConnectionState.Open)
{
conn.Close();
}
}
}
}
}
else
{
ScriptManager.RegisterClientScriptBlock(Page, this.GetType(), "message", "alertmsg('Select Option');", false);
return;
}
}
Here is the c# file code in which i want to get radio button to every out put so that i can chosen option as we do in "mcqs".
public HtmlString questions_sec1()
{
int userid = Convert.ToInt32(Session["USERID"]);
List<DAO_getQuestiones> get_question_sec1 = new List<DAO_getQuestiones>(DAO_getQuestiones.get_question_sec1(userid)); // data to fech first section
string content = "";
HtmlString theEnvelopePlease = null;
try
{
foreach (var obj in get_question_sec1)
{
content = content + "<tr><td> " + obj.get_question_id + "</td> <td>" + obj.get_answer_question + "</td><td>"+ <input type="radio" name="d" value="data"> DATA +"</td></tr>";
}
theEnvelopePlease = new HtmlString(content);
return theEnvelopePlease;
}
catch (Exception ex)
{
content = content + ex;
theEnvelopePlease = new HtmlString(content);
return theEnvelopePlease;
}
}
Here is the code of html call which is returning the function of cs file for rendering:
<table>
<thead>
<tr>
<th>Sr.</th>
<th>Questions</th>
<th>Answers</th>
</tr>
</thead>
<tbody>
< %:questions_sec1() % >
</tbody>
</table>
Question: I want the radio button to every out put of answer so that i can chose one option and one more thing.
It is difficult to add form element with HTML string into ASP.NET form.
Instead, I suggest you to use a 'Repeater':
<asp:Repeater id="Repeater1" runat="server">
<HeaderTemplate>
<table>
<thead>
<tr>
<th>Sr.</th>
<th>Questions</th>
<th>Answers</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td> <%#Eval("get_question_id ") %> </td>
<td> <%#Eval("get_answer_question ") %> </td>
<td> <asp:RadioButton ID="RadioButton" runat="Server" Text="DATA" /> </td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
And in your .cs file, bind the data to the Repeater like this:
Repeater1.DataSource = get_question_sec1;
Repeater1.DataBind();
Here is the MSDN link of Repeater: https://msdn.microsoft.com/en-US/library/system.web.ui.webcontrols.repeater.itemtemplate(v=vs.110).aspx
Thanks for your responce but i dn't want to you built in control from the tool box of asp.net.
I need to generate excel report based on the dates selected. Every things works fine but my excel sheet is not generating but its working fine when i try to export in web forms. But if i use master page and content page its not working..
here is my code
aspx
<center>
<table>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Start Date:" style="color:white"></asp:Label>
</td>
<td>
<asp:TextBox ID="datepicker" runat="server"></asp:TextBox>
</td>
<td>
<img src="../Images/calendar.gif" id ="datepic"/>
<cc1:calendarextender ID="ceFromDate" runat="server" TargetControlID="datepicker"
Format="dd-MMM-yyyy" Enabled="True" PopupButtonID="datepic" CssClass="black">
</cc1:calendarextender>
</td>
</tr>
<br />
<br />
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="End Date:" style="color:white"></asp:Label>
</td>
<td>
<asp:TextBox ID="datepicker1" runat="server"></asp:TextBox>
</td>
<td>
<img src="../Images/calendar.gif" id="datepic1" />
<cc1:calendarextender ID="Calendarextender1" runat="server" TargetControlID="datepicker1"
Format="dd-MMM-yyyy" Enabled="True" PopupButtonID="datepic1" CssClass="black">
</cc1:calendarextender>
</td>
</tr>
<tr>
<td>
<asp:Button ID="Button1" runat="server" Text="Get Report" OnClick="Button1_Click" />
</td>
</tr>
</table>
<asp:GridView ID="GridView1" runat="server" ></asp:GridView>
</center>
cs code:
protected void Button1_Click(object sender, EventArgs e)
{
using (OracleConnection con = new OracleConnection(constr))
{
//for getting id
con.Open();
OracleCommand cmd = new OracleCommand("select adcomplain_no as \"AD COMPLAIN NO\",to_char( COMPLAINT_DATE,'DD/MM/YY') as \"COMPLAINT DATE\",nature_of_complaint as \"NATURE OF COMPLAINT\",(select categoryname from crs_categorynew where crsid=complaint_categoryID)as \"CATEGORY NAME\",(SELECT subcategoryname FROM CRS_SUDCATEGORYNEW WHERE CRSSUBID=complaint_subcategory) as \"SUB CATEGORY NAME\",seat_location AS \"SEAT LOCATION\",seatno AS \"SEAT NO\",extensionno AS \"EXTENSION NO\",to_char(entry_date,'DD/MM/YY')as \"ENTRY DATE\" ,(select staffno||'-'||NAME as name from employee where staffno=entry_by) as \"ENTRY BY\" ,(CASE STATUSFLAG WHEN 'U' THEN 'Un Allotted' WHEN 'AN' THEN 'Allotted' WHEN 'B' THEN 'Being Completed' WHEN 'C' THEN 'Completed' WHEN 'UA' THEN 'Un Attented' ELSE '' END)as \"STATUS\",(select staffno||'-'||NAME as name from employee where staffno=alloted_person) as \"ALLOTED PERSON\",to_char(target_date,'DD/MM/YY') as \"TARGET DATE\",(select staffno||'-'||NAME as name from employee where staffno=alloted_by) as \"ALLOTED BY\",to_char(alloted_date,'DD/MM/YY') as \" ALLOTED DATE\",complain_reason as SOLUTION,to_char(complain_statusdate, 'DD/MM/YY')as \"COMPLAIN STATUS DATE\",(select staffno||'-'||NAME as name from employee where staffno=complain_statusby)AS \"COMPLAIN STATUS BY\" from crs_complaint where complaint_date between (TO_DATE('" + datepicker.Text + "', 'dd/mm/yyyy')) and (TO_DATE('" + datepicker1.Text + "', 'dd/mm/yyyy'))", con);
OracleDataAdapter oda = new OracleDataAdapter(cmd);
DataTable dt = new DataTable();
oda.Fill(dt);
if (dt.Rows.Count > 0)
{
GridView1.DataSource = dt;
GridView1.DataBind();
}
Response.Clear();
Response.Buffer = true;
Response.AddHeader("content-disposition",
"attachment;filename=GridViewExport.xls");
Response.Charset = "";
Response.ContentType = "application/vnd.ms-excel";
StringWriter sw = new StringWriter();
HtmlTextWriter hw = new HtmlTextWriter(sw);
for (int i = 0; i < GridView1.Rows.Count; i++)
{
//Apply text style to each Row
GridView1.Rows[i].Attributes.Add("class", "textmode");
}
GridView1.RenderControl(hw);
string headerTable = #"<h1>Service Request List from '" + datepicker.Text + "' to '" + datepicker1.Text + "'</h1>";
//style to format numbers to string
string style = #"<style> .textmode { mso-number-format:\#; } </style>";
//Range rg = (Excel.Range)worksheetobject.Cells[1, 1];
//rg.EntireColumn.NumberFormat = "MM/DD/YYYY";
Response.Write(headerTable);
Response.Output.Write(sw.ToString());
Response.Flush();
Response.End();
con.Close();
}
}
public override void VerifyRenderingInServerForm(Control control)
{
/* Confirms that an HtmlForm control is rendered for the specified ASP.NET
server control at run time. */
}
cretae a trigger for the button in updatepanel, this may solve your problem..
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="Button1" />
</Triggers>
</asp:UpdatePanel>
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 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.