how to access repeater label value in javascript - c#

This is my javascript
function btnEditClick() {
alert(document.getElementById('<%=LblRefPhyID.ClientID %>').value);
}
<asp:Repeater ID="repeaterRefPhysicianList" runat="server">
<ItemTemplate>
<tr onclick="selectRow(this);">
<td class="csstablelisttd" style="display: none;">
<asp:Label ID="LblRefPhyID" runat="server" Text='<%#Eval("Ref_Phy_ID")%>'></asp:Label>
</td>
on clientclick of Edit button i have to pass RefphyId to another page how can i do that..

It's a repeater. That means that the ItemTemplate will be repeated for each item in your databound collection.
This comes with a caveat: IDs are supposed to be unique. So when you say that your asp:Label has an ID of LblRefPhyID, ASP.NET automagically does you the favor of generating unique IDs for each instance of the repeater that eventually makes its way to your generated HTML. These generated IDs will be based on your original value of LblRefPhyID, but it won't be exactly that, so a plain document.getElementById() outside of the repeater won't work.
There are many ways to work around this, and the very first step you need to do is to actually write some code that will take the automatic generated IDs into account. Maybe write some Javascript to cache the IDs using LblRefPhyID.ClientID, maybe do it dynamically onclick, whatever.
EDIT
And, oh yeah, #Pointy is completely correct in stating that label elements don't have values, just their inner HTMLs. I don't get why he got downvoted for giving a correct response.

Try to set css class instead of id and bind elements click event by class name.
I'm using jquery for this:
$(document).ready(function(){
//bind click event on our label class
$('.lblRef').live('click', function(){
alert($(this).text());
});
});
And this in asp.net page code:
<asp:Label CssClass="lblRef" runat="server" Text='<%#Eval("Ref_Phy_ID")%>'></asp:Label>

HTML <label> elements don't have a "value". They do have contents:
alert(document.getElementById('<%=LblRefPhyID.ClientID %>').innerHTML);

Best way would be to check what is the pattern of id generated by the repeater on the client side and then you can use that id to get the value of the label using innerHTML.
For instance in your case id generated may be :
repeaterRefPhysicianList_LblRefPhyID_01 to till the number of rows in source.
So you can use this information with innerHTML to get the value of the label..
All in all just check your html page you will know what to do next :)

Related

Customizing the ID value for asp:GridView

In my aspx page, I have the following code to generate a asp:Table
abc.aspx
<asp:Table id = "_tableTest" runat="server"></asp:Table>
When I render it on the page , I need the id to be prepend with a text , for example "Address"
<table id="Address_tableTest" > </table>
How can I customize the ID generation? I couldnt find relevant documentation.
What do you mean? If some 3rd party needs the table name, then you can't change it. I mean, either you type in Address_tableTest as the ID, or you don't.
The "id" is NOT generated for you, YOU the developer type it into the markup
You can change the "id" in the forms pre-render event.
In fact, you can even change it in the page on-load event.
this.GridView1.ID = "abc";
or
GridView1.ID = "Address_" + GridView1.ID.ToString();
The "id" in markup will now thus render and use "abc".
However, code behind will continue to use "this.GridView1" to reference the control.
You can append it.
<asp:Table id = '<%# Eval("Id") + "_TableName" %>' runat="server"></asp:Table>
what is the use of Eval() in asp.net
Yes #VDWWD is correct Id can not be set dynamically
The ID property of a control can only be set using the ID attribute in the tag and a simple value. Error Generated by webforms when I tried to set it dynamically.
It is explained here in this post Eval script for server side control's ID property

Update input type=text value or textbox control resize event

I have been having trouble updating the value for my input type=text or the texbox control text value with the jquery $(window).resize(function(){}); I know that the event fires because when i resize the browser an alert will appear. I also am using the functionality for something else.
It currently looks like this:
$(window).resize(function(){
if($(window).width()>1080){
var innerwidth = $(window).width()-170;
$("#div1").width(innerwidth);
}
I want to add this:
$(window).resize(function(){
if($(window).height()>500){
var innerheight = $(window).height();
$('input.hiddentest').val(innerheight);
}
I know that the issue lies with:
$('input.hiddentest').val(innerheight);
I have also tried this:
$('#texttest.ClientID').text(innerheight);
This is the input and the textbox below that I am using(note that the type used to be hidden, but i dont think that makes an issue and I wanted it to be visible for debugging purposes)
<input id="hiddentest" type="text" visible="true" name="hiddentest" onclick="test();" runat="server" value="1000" />
<asp:TextBox id="texttest" Visible="true" runat="server" Text="1000" />
Overall I have been looking for a way to dynamically update the values as the page resizes with the size of the page. My geuss is that i am not using the right thing to identify the id's. Thanks for taking the time to look at this and for any replies.
P.S. I am also open to the idea of using a javascript function instead but i can't even seem to get the function to fire for the resize event so it would require more help.
This is what i have so far:
window.onresize=Test();
function Test(){
var hdnfld= document.getElementById("texttest");
var testing = window.innerWidth;
alert(testing);
hdnfld.text= testing;
}
Use just ID of elements without dots (that actually represent the classes you don't have).
So use
$('#hiddentest').val(innerheight)
and
$('#texttest').val(innerheight)
Note that asp:TextBox renders as inptut type="text" so you still have to use .val() on it, not .text()
Hidden text box id is "hiddentest" so the code will be
$('#hiddentest').val(innerheight);
hiddentest is an id not a class in your case
Try,
$(window).resize(function(){
if($(window).height()>500){
var innerheight = $(window).height();
$('#hiddentest').val(innerheight);
}
});
<asp:TextBox id="texttest" Visible="true" runat="server" Text="1000" />
For the above asp.net textbox control, the ID changes dynamically when rendered (prepended with master and page information), id looks similar to main_ctrl100_texttest
var hdnfld= document.getElementById("texttest");, so this no longer holds good. Use a class instead.
<asp:TextBox id="texttest" Visible="true" runat="server" CssClass="texttest" Text="1000" />
var hdnfld = document.getElementsByClassName("texttest");
If you need more info on how to access .net controls using jquery, see here.

How to link up ASP.Net page to code?

I have a list:
<ul class="question">
<li>eBook Reader</li>
<li>Normal Mobile</li>
<li>Smartphone</li>
<li>PC / Laptop</li>
<li>Landline Telephone</li>
<li>Tablet</li>
<li>Games Console</li>
</ul>
Continue
A user is able to click any of the <li> items and it will add a class of selected to it. When they click continue, it needs to run at a method on the server which will take in the index of the <li> selected and do something with it.
The trouble is I've no idea how to do this with .aspx pages. I tried having this:
<asp:LinkButton runat="server" OnClick="ContinueClick" Text="Continue" CssClass="button next" />
Instead of the existing <a> tag but I can't seem to be able to pull anything meaningful out of it.
I think this should be a radio button list, and then take the selected value from there instead of using a list. Take a look at this link to see how to use a radio button list.
I think when you want a user to single select from a group, then a radio button list is the correct option. When you want a multi-select, then use a checkbox list.
The code will be similar to this...
<asp:RadioButtonList ID="questions" runat="server">
<asp:ListItem>eBook Reader</asp:ListItem>
<asp:ListItem>Normal Mobile</asp:ListItem>
<asp:ListItem>Smartphone</asp:ListItem>
<asp:ListItem>PC / Laptop</asp:ListItem>
<asp:ListItem>Landline Telephone</asp:ListItem>
<asp:ListItem>Tablet</asp:ListItem>
<asp:ListItem>Games Console</asp:ListItem>
</asp:RadioButtonList>
protected void ContinueClick(object sender, System.EventArgs e)
{
//questions.SelectedItem.ToString();
}
Add an Id and runat="server" on the elements that you would like to access on the server-side with their attributes and css-class.
You can also solve this by adding radio buttons, instead of a list.
Another solution to your issue might be a hidden control that holds the id of the selected element.
You can manually trigger postbacks to ASP.NET from JavaScript like this ASP.NET postback with JavaScript

How can I access td Id in aspx.cs page of asp.net c#?

I have used this code but it doesn't work.
HtmlGenericControl T1 = (HtmlGenericControl)Page.FindControl("T1");
T1.Visible = false;
Error Is:
Object reference not set to an instance of an object
add runat="server" and id to TD
<td runat="server" id="tdToSelect">
now you can set
tdToSelect.visible = false;
If this is inside update panel use UpdatePanel.FindControl() method
Add runat='server' to your td. Otherwise you'll need to use Javascript.
You can't.
What you can do, is use ASP.NET's TableRow and TableCell controls instead of HTML's <TR> and <TD> elements. You can then access the control you need from your ASP.NET code behind.
At render time, those controls will of course emit <TR> and <TD> elements, but you will know the ID to use in your server-side code and your code can modify the control before the server sends the generated HTML to the client.
You can only reference server side controls from your C# code. i.e. you should have an attribute set to your control runat=server and you can then assign an id to it. This way, you will be able to access it from your c# code.
You should know that FindControl function not make recursive search but you can add runat="server" to your TD and set visible.

updating textbox value

I have an input tag having some text in it. Now I would like that onclick of a button the text will be changed.
For some reason it is not being changed.
This is the input tag:
<input id="network_table" type="text" value="oldValue" runat="server"/>
the following is the way I am trying to change the value of the input tag:
network_table.Value = "newValue";
network_table.Text = "newValue";
Bind the "onclick" event and apply this these methods:
In jQuery :
$('#network_table').val("your val");
http://docs.jquery.com/Val
Javascript
document.getElementById('network_table').value = "your val";
you can do it serverside with "OnClick" event on button, assuming your controls are defined with runat="server" attribute
http://msdn.microsoft.com/fr-fr/library/system.web.ui.webcontrols.button.onclick(v=VS.80).aspx
You could try and assign some meaningless class to the input and use that as a reference point to get in hold of the input field.
<input id="network_table" type="text" value="oldValue" runat="server" class="myInputField"/>
$('.myInputField').val('newValue');
Using the id will not work because you are using the 'runat=server' and it makes the id unavailable on client side and you would need to get the unique id first to be able to get in hold of it. This is a lot cleaner way but you need to make sure not to use the class elsewhere to avoid ambiguous results.
Here is a jsfiddle example which does what you want but on load.
http://jsfiddle.net/yX5ze/

Categories

Resources