How can I access to an HTML control runat server from javascript - javascript

I have the following code:
<telerik:GridTemplateColumn DataField="JOB_CODE"
<EditItemTemplate>
<input type="text" ID="JOB_CODETextBox" runat="server"
value='<%# Eval("JOB_CODE") %>' readonly="readonly"
onclick="$('#basic-modal-content').modal({
appendTo:'form', persist: true,
onClose: function (dialog)
{
/*
I want to assign here a value to the textbox control
like this: JOB_CODETextBox = 'something...'
I tried this:
$find('<%= JOB_CODETextBox.ClientID %>').value = 'something..'
but it didn't work!! the find function returns [null]
*/
$.modal.close();
}
} );" />
Any help!!

This should work:
$('#'+'<%= JOB_CODETextBox.ClientID %>').val('something');
or (C# only):
$('<%= "#" + JOB_CODETextBox.ClientID %>').val('something');
or using JavaScript/ECMAScript:
document.getElementById('<%= JOB_CODETextBox.ClientID %>').value = 'something';

I'm not familiar with the telerik control you are using so I'm going to assume it's similar to other databound controls. Operating with that in mind, here is an example using a Repeater control.
here's the markup
<asp:Repeater ID="rpt1" runat="server">
<ItemTemplate>
<input type="text" id="JOB_CODETextBox" runat="server" />
</ItemTemplate>
</asp:Repeater>
in this situation, I usually generate the javascript server side.
System.Text.StringBuilder js = new StringBuilder();
js.AppendLine(" <script>");
// we'll store all the control references in a list
// since there will be one for each item in the repeater
js.AppendLine(" var JOB_CODETextBox_list = [];");
for (int j = 0; j < this.rpt1.Items.Count; j++)
{
System.Web.UI.HtmlControls.HtmlGenericControl JOB_CODETextBox;
// try to locate the copy of the control local to each item
JOB_CODETextBox = (HtmlGenericControl)this.rpt1.Items[j].FindControl("JOB_CODETextBox");
if (JOB_CODETextBox != null) // make sure you found something
{
js.AppendFormat("JOB_CODETextBox_list.push(document.getElementById('{0}'));", JOB_CODETextBox.ClientID);
js.AppendLine();
}
}
js.AppendLine(" </script>");
this.Page.ClientScript.RegisterStartupScript(typeof(Page), "JOB_CODE", js.ToString(), false);
that should generate a script that gets a reference to all instances of that input control within the Repeater. after it runs, you can access the items client side like
JOB_CODETextBox_list[n].value = 'something';

Related

In ASP.NET Web Forms I want to get control inside child Repeater with javascript

I have Parent repeater which contains another child repeater.
For simplicity let's say that the child repeater contains text box and Requiredvalidator.
Simple example of the markup:
<asp:Repeater ID="rpt1" runat="server">
<HeaderTemplate>
....
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lbl1" runat="server" CssClass=".."></asp:Label>
<div class="..">
<asp:Repeater ID="rpt2" runat="server">
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<div class="...">
<asp:TextBox ID="txt21" runat="server" CssClass="..." MaxLength="7" CssClass="ErrorMessage" ErrorMessage="*" />
<asp:RequiredFieldValidator ID="rfv21" runat="server" CssClass="ErrorMessage" ErrorMessage="*" />
</div>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:Repeater>
</div>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:Repeater>
I create a method like this to get the second repeater's RequiredField id:
function getId(){
var myId = document.getElementById('<%= rfv21.ClientID %>');
}
but of course it didn't work and there was an exception:
The name control-name Does Not Exist in the Current Context
So how can i do this?
I want to mention that the business need for me is that when the onchange, onkeyup, onkeydown events fires for the txt21 it will get it's equivalent rfv21 and enbale it:
I create this method which fires for onchange, onkeyup, onkeydown events changed:
function txt21_onChange(txtbox) {
var newValue = this.value;
var oldValue = this.oldvalue;
var myRfv2 = document.getElementById('<%= rfv2.ClientID %>');
if (newValue != oldValue) {
ValidatorEnable(myRfv2, true);
}
}
and i update txt21 to be:
<asp:TextBox ID="txt21" runat="server" CssClass=".." MaxLength="7" onkeyup="javascript: txt21_onChange(this);this.oldvalue = this.value;" />
but this line want work:
var myRfv2 = document.getElementById('<%= rfv2.ClientID %>');
as i explained before.
I think Item.FindControl(..) may help but how can we use it in this case?
You can bind the javascript function call from Repeater Repeater.ItemDataBound event.
Code Bahind
void R1_ItemDataBound(Object Sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
TextBox txt21 = (TextBox)e.Item.FindControl("txt21");
RequiredFieldValidator rfv21 = (RequiredFieldValidator)e.Item.FindControl("rfv21");
txt21.Attributes.Add("onclick", "txt21_onChange('" + txt21.ClientID + "','" + rfv21.ClientID + "'" )
}
}
Javascript
function txt21_onChange(txt21ID, rfv21ID)
{
txt21ID = document.getElementById(txt21ID);
rfv21ID = document.getElementById(rfv21ID);
//The above are TextBox and RequiredFieldValidator objects of row of TextBox that triggered change event.
//You can use these object
}
The problem here is that there going to be many such controls, one per each row of each child repeater. All will have slightly different generated IDs. So instead of querying them by id (impossible), you can use jQuery to quickly find them relatively to the txt that fired an event:
function txt21_onChange(txtbox) {
var rfv2 =
$(textbox) // gives you the jquery object representing the textbox
.closest("div") // the parent div
.find("id*='rfv2'"); // the element you are looking for, id contains rfv2
This answers the immediate question in this thread on how to get hold of the element. But I am not sure it will solve your bigger problem of enabling/disabling validation. You cannot easily do so with server side controls in javascript. Besides, validator is not disabled by default in your code. Although I believe all this is worth a separate question here on SO>

Need to identify which textbox is used using javascript

I have four text boxes in 4 different tabs of an ASP.NET Page. I need to provide same validation message to all the text boxes. Presently I am using four different functions with same functionality. Kindly suggest a way to identify which textbox is being used make that a single funtion
Code from Commend:
<asp:TextBox ID="textBox1" runat="server" ValidationonGroup="abcd"></asp:TextBox>
<asp:CustomValidator ID="ID1" runat="server" ValidationGroup="abcd"
ControlToValidate="textBox1" ErrorMessage="message"
ClientValidationFunction="fname"></asp:CustomValidator>
--Javascript Fn--
function fname(sender, args) {
var x = document.getElementById('<%=txtBox1.ClientID%>').value;
if (some condition) {
args.IsValid = false;
} else {
args.IsValid = true;
}
}
Edit
if you are using Asp.Net then you should use like this
Aspx page code
<div>
<asp:TextBox runat="server" ID="txt1" ClientIDMode="Static" onKeyPress="javascript:text_changed(this.id);"></asp:TextBox>
</div>
JS Code
<script type="text/javascript">
function text_changed(event)
{
var id = event;
alert(id);
}
</script>
You got the textbox id in id variable and now u can get value etc using this id you are applying your conditions.... i hope this will help u

How to call javascript function from asp:textbox?

I am using textbox for searching items from data base and loading them in gridview and
i used custom paging on gridview to show only 25 records per page
and i found java script for searching records on client side as
script>
function filter2(phrase, _id) {
var words = phrase.value.toLowerCase().split(" ");
var table = document.getElementById(_id);
var ele;
for (var r = 1; r < table.rows.length; r++) {
ele = table.rows[r].innerHTML.replace(/<[^>]+>/g, "");
var displayStyle = 'none';
for (var i = 0; i < words.length; i++) {
if (ele.toLowerCase().indexOf(words[i]) >= 0)
displayStyle = '';
else {
displayStyle = 'none';
break;
}
}
table.rows[r].style.display = displayStyle;
}
}
</script>
and calling this as:
<input name="txtTerm" onkeyup="filter2(this, '<%=GridView1.ClientID %>')" placeholder="Search" type="text"/>
this function search record from activated page and obviously searching from whole database will be done on server side and i used asp textbox
but i need onkeyup="filter2(this, '<%=GridView1.ClientID %>')"event in my asp textbox e-g
<asp:TextBox ID="txtSearch" onkeyup="filter2(this, '<%=GridView1.ClientID %>')" placeholder="Search" runat="server" AutoPostBack="True" OnTextChanged="txtSearch_TextChanged" />
but asp didn't allow me to do that..
i need your help to achieve this.
thanks in advance.
EDIT:
I need both searching (client side, server side) in single textbox
because
client side allow searching from loaded page of gridview and
server side allow searching from database on clicking
You could add the client attribute of rendered input control via code behind:
protected void Page_Load(object sender, EventArgs e)
{
txtSearch.Attributes.Add("onkeyup", string.Format("filter2(this,'{0}')",GridView1.ClientID)");
}
EDIT:
After the right comment of #Lukas, we should say that the main problem was the use of <%=GridView1.ClientID %> inline expression inside the textbox webcontrol:
<%= %> will write the string directly to the response-stream, which happens after the server control is constructed, so will be rendered as string and not resolved.
For example:
<asp:Label runat="server" ID="label">test</asp:Label>
<asp:TextBox runat="server" ID="txt" Text="<%# label.ID %>" onkeyup="alert('<%: label.ID %>')"></asp:TextBox>
This is what we have in output:

Inject JavaScript to a link button from code behind in c#

Good day,
I have a repeater that contain link button. The value and number of link button is generate base on data pull from database. The HTML code is something as follow:
<asp:Repeater ID="repCategories" runat="server" EnableViewState="false">
<ItemTemplate>
</ItemTemplate>
</asp:Repeater>
Here is some code that I try to do in my code behind,
for (int i = 0; i < table.Rows.Count; i++)
{
RepeaterItem itm = repCategories.Items[i];
GiftRow dr = tbl.GetRow(i);
Literal litLink2 = (Literal)itm.FindControl("litLink2");
litLink2.Text = dr.Name;
string myScript = string.Empty;
myScript = "\n<script type=\"text/javascript\" language=\"Javascript\" id=\"EventScriptBlock\">\n";
myScript += "alert('hi');";
myScript += "\n\n </script>";
Page.ClientScript.RegisterStartupScript(this.GetType(), "myKey", myScript, false);
}
By doing this, I will get alert hi when I load the page.What I want to do is, I only want it do alert hi when I click on the link button, instead of page load.
Use a LinkButton and leverage the ClientClick event instead:
<asp:Repeater ID="repCategories" runat="server" EnableViewState="false">
<ItemTemplate>
<asp:LinkButton ID="lbMyLinkButton" runat="server" />
</ItemTemplate>
</asp:Repeater>
I'd also recommend you use ItemDataBound events of repeaters where possible:
void repCategories_ItemDataBound(Object Sender, RepeaterItemEventArgs e) {
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) {
((LinkButton)e.Item.FindControl("lbMyLinkButton")).OnClientClick = "alert('hi');";
}
}
NOTES:
I wouldn't ever recommend you render javascript server-side unless absolutely necessary. I've provided an answer to fit in with the context of your question, but I would advise you have a javascript function already on your page and 'wire it up' server-side (if not bind it on the client with pure javascript)
There is also an assumption here that you're binding data to the repeater (you should be anyway), which means you also have to wire up the ItemDataBound handler: repCategories.OnItemDataBound += repCategories_ItemDataBound

How to pass ID to a java script function in ASP.NET

Hi, I have following java script function:
function EnableDisableTextBox(chkBoxId, txtBoxId) {
var isChk = document.getElementById(chkBoxId);
document.getElementById(txtBoxId).disabled = !(isChk.checked);
}
When I am trying to call above function, by clicking check box its not working as expected
<asp:CheckBox ID="chkBachelors"
onclick="javascript:EnableDisableTextBox('chkBachelors','txtFirstDegree');"
runat="server" Text='<%$Resources:Resource, FirstDegree %>' TextAlign="Left"/>
<asp:TextBox ID="txtFirstDegree" CssClass="form-text" runat="server"
MaxLength="250"></asp:TextBox>
Expected Result (When user click chkBachelors check box):
if "chkBachelors" check box is checked
then enable "txtFirstDegree" text box
else
disable "txtFirstDegree" text box
What is the problem and how to solve it?
<asp:CheckBox ID="chkBachelors"
onclick="EnableDisableTextBox(this);"
runat="server" Text='' TextAlign="Left"/>
<asp:TextBox ID="txtFirstDegree" CssClass="form-text" runat="server"
MaxLength="250"></asp:TextBox>
<script language ="javascript" type="text/javascript">
function EnableDisableTextBox(checkbox)
{
var txtBoxId= "<%=txtFirstDegree.ClientID%>";
document.getElementById(txtBoxId).disabled = !(checkbox.checked);
}
</script>
<%=chkBachelors.ClientID%> and <%=txtFirstDegree.ClientID%> will give the client side ID of the Asp.Net controls .You don't need to pass them explicitly
function EnableDisableTextBox() {
var isChk = document.getElementById(<%=chkBachelors.ClientID%> );
document.getElementById(<%=txtFirstDegree.ClientID%>).disabled = !(isChk.checked);
}

Categories

Resources