How to pass clientId of a control in Repeater to JavaScript function? - javascript

I have a repeater having two columns. In first column i have an image button on click of which i am calling a javascript function.
In the second column i have a label. I want to pass the client id of this label to the javascript function called on click on ImageButton.
<asp:Repeater ID="rptElements" runat="server">
<ItemTemplate>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table>
<tr>
<td id="tdElementType" runat="server">
<asp:ImageButton ID="imgShow" runat="Server" Visible="false" OnClientClick="return DisplayElementDetails(this);" />
</td>
<td>
<asp:Label ID="lblElementDetails" Text='<%# Eval("ElementDetails")%>' runat="server" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>

I figured it out.
I added following code to the javascript function:
function DisplayElementDetails(obj)
{
var name = obj.id.substring(0,(obj.name.length)-7) + "lblElementDetails"
var obj = document.getElementById(name);
obj.style.display = 'none';
return false;
}
and set the style for label control
<asp:Label ID="lblElementDetails" Text='<%# Eval("ElementDetails")%>' runat="server" style="display:block" />
Its working now.

This can be done by Jquery. Add CSSclass to button and label for selecting them using CSS selectors
<td id="tdElementType" runat="server">
<asp:ImageButton ID="imgShow" runat="Server" Visible="false" CssClass="showButton" /></td>
<td>
<asp:Label ID="lblElementDetails" Text='<%# Eval("ElementDetails")%>' runat="server" CssClass="lblElement"/>
</td>
Reference JQuery on aspx page and call function on click event of image button
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".showButton").click(function(){
$(".lblElement").toggle();
});
});
</script>

Related

use jquery find repeater checkbox checked value

I have a checkbox template field within a repeater in c#
bind the repeater using asp.net c#
<asp:Repeater ID="rpt_detail" runat="server">
<ItemTemplate>
<table>
<tr>
<td style="width: 10%; padding-top: 10px;">
<input type="checkbox" id="selectit" name="selectit" value='<%# Eval("mdID") %>' />
</td>
<td>
<asp:Label ID="mdID" runat="server" Visible="false" Text='<%# Eval("mdID") %>'></asp:Label>
</td>
<td>
<asp:Label ID="lbl_xprice" runat="server" Text='<%# Eval("mdPrice") %>'></asp:Label>
</td>
</tr>
</table>
</ItemTemplate>
</asp:Repeater>
and javascipt
<script>
function aaaaa() {
var selectit = $('input[name="selectit"]').val();
$.ajax({
url: "ajaxservice/getinchar.aspx",
type: 'POST',
data: { selectw: selectit },
success: function (result) {
$("#testview").html(result);
}
});
}
</script>
How can I get checkbox checked value ?
You can loop all the checkboxes in the repeater with jQuery.
<script type="text/javascript">
function getCheckBoxValues() {
$('#myRepeater input[type="checkbox"]').each(function () {
if ($(this).prop('checked') == true) {
alert($(this).val());
}
});
}
</script>
But in order for this to work you have to wrap the Repeater with a <div> with a unique ID.
<div id="myRepeater">
<asp:Repeater ID="rpt_detail" runat="server"></asp:Repeater>
</div>
Not really related to the solution, but you are getting duplicate ID's (selectit) in your checkboxes inside the Repeater. Better use the asp.net CheckBox Control.
And you can better set the <table> </table> outside the Repeater.
<table id="myRepeater">
<asp:Repeater ID="rpt_detail" runat="server">
<ItemTemplate>
<tr>
<td> content... </td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>

How to access textbox inside grid view of parent page in popup page?

I have a pop up page where I want to get the textbox value which is inside gridview of main page,
and populate value in that textbox.
I have tried:
var Emp = window.opener.document.getElementById('grd_txtEmp');
Emp.rows[1].cells[3].childNodes[0].value="abc";
My popup page:
<asp:TemplateField HeaderStyle-BackColor="#C0C0C0" HeaderStyle-BorderColor="Black" HeaderText="Man">
<ItemTemplate>
<table><tr><td>
<asp:TextBox ID="txtEmpy" runat="server" TextMode="MultiLine" ontextchanged="txtEmploy_TextChanged" ReadOnly="true" Text='<%# Eval("Empry") %>' Width="98%"></asp:TextBox>
</td>
<td align="right">
Select
</td></tr></table>
</ItemTemplate>
<HeaderStyle BackColor="Silver" BorderColor="Black" Width="30%"/>
</asp:TemplateField>
As far as I understood, you are opening the popup, on clicking of some link or button in the grid view row. If this is correct, then while opening the popup, you can pass the textbox id to the popup as a query string. Then you can set the value to the correct text box from the poped up window. To get the id of the textbox in the current row, you can use jQuery
As an example, you can try this idea
Add a css class to the textbox, say, "extdata"
Add a css class to the link/button, say, "popupopener"
Then add the following jQuery
$(document).ready(function () {
$('.popupopener').each(function () {
$(this).click(function () {
//If the textbox is at the same level as the link button
var textBoxId = $(this).closest("table").find('.extdata').attr('id');
window.open("Select.aspx" + "?textboxid=" + textBoxId, "mywindow", 'menubar=1,resizable=1,width=600,height=400, top=200, left=400');
}
);
});
});
Change the layout as below
<asp:TemplateField HeaderStyle-BackColor="#C0C0C0" HeaderStyle-BorderColor="Black" HeaderText="Man">
<ItemTemplate>
<table>
<tr>
<td>
<asp:TextBox ID="txtEmpy" CssClass="extdata" runat="server" TextMode="MultiLine" OnTextChanged="txtEmploy_TextChanged" ReadOnly="true" Text='<%# Eval("Empry") %>' Width="98%"></asp:TextBox>
</td>
<td align="right">
<a class="popupopener">Select</a>
</td>
</tr>
</table>
</ItemTemplate>
<HeaderStyle BackColor="Silver" BorderColor="Black" Width="30%" />
</asp:TemplateField>

Get values from radgrid using jquery

I have a usercontrol and there is a radgrid included in it. I need to fetch label GetName's text from the radgrid using jquery.I have to check the label's value for each record. Can someone please help me to do it.Thanks.This is my radgrid.
<telerik:RadGrid ID="Gridview1">
<Columns>
<telerik:GridTemplateColumn UniqueName="tempcolumn">
<HeaderTemplate>
<table>
<tr>
<td>
<asp:Label ID="Header" runat="server" Text="Name"></asp:Label>
</td>
</tr>
</table>
</HeaderTemplate>
<ItemTemplate>
<table>
<tr>
<td>
<asp:Label ID="Getname" runat="server"></asp:Label>
</td>
</tr>
</table>
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</telerik:RadGrid>
The code you show there is in your .aspx page, not the generated one.
In HTML result, the aps:label would be something like that :
<span Id="ctl00$blablabla$Getname_random"></span>
So, I would suggest to add a class to your label to use it as selector :
<asp:Label ID="Getname" runat="server" CssClass="getNameClass"></asp:Label>
And then :
$(function () {
//Move in any trigger function (e.g: click)
$('.getNameClass').each(function() {
console.log($(this).text() );
});
});
Hope it helps.

Get text value of span in repeater by using javascript or jquery

i can't get value of span (or label)
here is my html code
<asp:Repeater ID="rpt_district" runat="server" >
<ItemTemplate>
<tbody id='bodies'>
<tr>
<td>
<span id="district_id"><%# Eval("DISTRICT_ID") %></span>
</td>
<td><%# Eval("DISTRICT_NAME") %></td>
<td>
<asp:Label ID="lb_city_id" runat="server" Text='<%# Eval("CITY_ID") %>'></asp:Label>
</td>
<td style="float:left; margin-left:5px;">
<asp:CheckBox ID="cb_status" runat="server" onclick="javascript: return false;" />
<asp:HiddenField ID="hf_status" Value='<%# Eval("ENABLE") %>' runat="server" />
</td>
<td>
<div style="float:left; margin-left:4px;" >
<asp:ImageButton ID="ib_edit" runat="server" ImageUrl="~/Hinh/icons/Edit.png" ToolTip="Edit" />
</div>
<div style="float:left; margin-left:4px;">
<asp:ImageButton ID="ib_delete" runat="server" ImageUrl="~/Hinh/icons/Trash.png"
ToolTip="Delete" CommandArgument='<%# Eval("DISTRICT_ID") %>'
OnClientClick="getvalue(); return false;"/>
</div>
</td>
</tr>
</tbody>
</ItemTemplate>
</asp:Repeater>
i want to get value of district_id in span tag (or label is ok) by using javascript when clicking on imagebutton
function getvalue() {
var thisspan = $('.district_id').eq(0);
alert(thisspan);
}
but it just get the value in first column be cause of ea(0)
i'm just want to get value by using javascript or jquery not code behind
thanks.....
In HTML, no two elements can have the same ID. Your repeater is creating multiple elements with the same ID. In the JavaScript, you are selecting a class with jQuery instead of an ID. Change it to a class in your html.
You are searching after a class but you have an id
var thisspan = $('#district_id').eq(0);
. is the selector for classes and # is selector for ids. Your html has the id not the class, so your code should be like:
var thisspan = $('#district_id').eq(0);
Also, id's are unique in html so you do not need the .eq(0):
var thisspan = $('#district_id');
Finally, to get the text value inside of the span tah you need to do:
var thisspan = $('#district_id').html();
or
var thisspan = $('#district_id').text();
Add a css class to your image button like this. No two elements in the DOM should have the same ID.
<asp:ImageButton ID="ib_delete" CssClass="imgClass" ..../>
The below will give you the value of the 1st instance of the image button.
console.log($('.imgClass').val());

Show message when start typing inside textbox using javascript

I'm using ASP.NETand I want to show message behind a textbox when I start to write in it, I want to do that on the client side so I think javascript is the key.
Edit :
My code:
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Alternate Email :"></asp:Label>
</td>
<td>
<asp:TextBox ID="_txtAlternateEmail" runat="server" onkeyup="typetext(this);"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="Security Question :"></asp:Label>
</td>
<td>
<asp:TextBox ID="_txtSecurityQuestion" runat="server"></asp:TextBox>
</td>
</tr>
and the javascript
<script type="text/javascript">
function typetext(tb) {
var mySpanElement = document.getElementById("_txtSecurityQuestion");
mySpanElement.innerText = tb.value;
}
</script>
You could handle the onkeyup event in the textbox
<asp:TextBox ID="_txtAlternateEmail" runat="server" onkeyup="typetext(this);">
</asp:TextBox>
which calls the typetext method. In your typetext method, you can set the span (or whatever HTML element) to the text of the textbox.
function typetext(tb)
{
var mytextbox = document.getElementById('<%=_txtSecurityQuestion.ClientID %>');
mytextbox.value = tb.value;
}

Categories