Develop Reference

Remove and add a row with a server side control to a table using Jquery

I have a row which has a server side control. Depending on a condition I need to remove the row completely, so that the HTML cannot be read by screen-readers and re-added later when the condition is changed.
here is the code i am trying but it is not working
my original ASPX
table id="tblmain" width="100%">
<tr>
<td valign="top">
<div id="studysub_animal" runat="server">
<h3>
Select the vALUE.</h3>
<asp:RadioButtonList ID="rdb_one" runat="server">
<asp:ListItem Value="Humans">Humans</asp:ListItem>
<asp:ListItem Value="Non-Human primates">Non-Human primates</asp:ListItem>
</asp:RadioButtonList>
</div>
</td>
</tr>
<tr id="tr_optional">
<td>
<h3> Select your second value</h3>
<asp:RadioButtonList ID="rdb_two" runat="server">
<asp:ListItem>Individuals</asp:ListItem>
<asp:ListItem>Population</asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
</table>
This is the jquery i am writing
$('#<%=rdb_one.ClientID%> input:radio').click(function () {
var currentIdone = 'Humans';
var currentId = $(this).val();
var row = $('#tr_optional');
if (currentId == currentIdone) {
if ($('#tr_studypopul').length) {
}
else {
$('#tblstudysub_animal').append(row);
}
}
else {
$('#tr_studypopul').detach();
}
});
any idea. how can i add and remove the row conditioanlly.
When the page first loads it loads the row it is only hidden or visible depending on the answer

Like David said, you cannot add server-side controls dynamically. However, since it will be shown later on based on conditions, why not just hide it? Try use javascript document.getElementsById().style.display = 'none'. And when you show it, change "none" to "block". It worked for me.

How to get the particular cell value from a gridview and to display it in a textbox using jquery in asp.net?

The following is my grid view code. In this, I have one column "Syllabus". In the next column I'm having edit and delete buttons. On clicking the Edit button, a popup will display. I displayed that popup using jquery. In the popup, I'm having a textbox for Syllabus. But I dont know how to get that syllabus value from the gridview column and to display its value in the popup for editing its value?
<asp:GridView ID="gdvwSyllabus" CssClass="enquiryTable" runat="server" AutoGenerateColumns="false" Width="100%">
<Columns>
<asp:BoundField HeaderText ="Syllabus" DataField ="Syllabus" />
<asp:TemplateField HeaderText="Options">
<ItemTemplate>
<ul class="enquiryList1">
<li><asp:Image ImageUrl="~/Images/edit2.png" runat="server" ID="btnSyllabusEdit" CssClass="btnEdit" /></li>
<li><a><asp:Image ImageUrl="~/Images/delete2.png" runat="server" ID="btnDelete" /></a></li>
</ul>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
This is my popup code which I designed it as a table.This table will popup on clicking the edit button.I want to display the "syllabus" value in the "txtsyllabus" textbox for edit.
<table style="border: 0px; margin-left: 15px;" border="0" align="left">
<tr>
<td align="right">Syllabus <span class="ErrorField">*</span>:</td>
<td>
<asp:TextBox ID="txtsyllabus" CssClass="txtbox txtSyllabus" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td> </td>
<td align="left">
<asp:Button ID="btnSubmit" Text="Save" CssClass="btnStyle btnSyllabusSubmit" runat="server" />
</td>
</tr>
</table>
Thanks in advance.

You can do this by calling a javascript function from button on client click as following:
function showpopup(details)
{
document.getElementById('texbox').value=details
document.getElementById('divpopup').style.display='block'
return false;
}
on gridview item databound event do the code like this
btn=e.item.findcontrol("editbouttn")
btn.attributes.add("onclick","return showpopup(" & e.item.dataitem("details") & ");"
please let me know if this does not work.

get specific value of a TD tag

How can I hide a specific TD in my Table ?
Rendered page:
<table>
<tr>
<th>Codigo</th>
<th>Tipo</th>
<th>(L/V)</th>
<th>Endereco</th>
<th>Propostas Ativas</th>
<th>Cons</th>
</tr>
<tr>
<td>373054</td>
<td>Apartamento</td>
<td>V</td>
<td>Rua DO FURQUIM</td>
<td>1</td>
<td>0</td>
</tr>
</table>
ASP page:
<asp:GridView ID="grdImoveis" Width="100%" runat="server" AutoGenerateColumns="false" DataSourceID="dsGrid" OnRowDataBound="grdImoveis_DataBound">
<Columns>
<asp:BoundField HeaderText="Código" DataField="Imovel_Id" />
<asp:BoundField HeaderText="Tipo" DataField="TipoDsc1" />
<asp:BoundField HeaderText="(L/V)" DataField="TransacaoSigla" />
<asp:TemplateField HeaderText="Endereco">
<ItemTemplate>
<%# Eval("Descricao") %> <%# Eval("Logradouro") %>, <%# Eval("Numero") %> - <%# Eval("Expr1") %> <%# Eval("Complemento") %>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="Propostas Ativas" DataField="NumeroProposta" />
<asp:BoundField HeaderText="Cons" DataField="FoundInSanNegocio" />
</Columns>
</asp:GridView>
Drawing (Example):
Código Tipo (L/V) Endereço Propostas Ativas Cons
373054 Apartamento V Rua Do Furquim 1 0
I want to get via JQuery the value of the last column (Cons), but the user can't see this column. How can I hide and get the value of this column in each line ?

Easiest way is:
$(document).ready(function(){
$('#<%=grdImoveis.ClientID %>').find('tr').each(function(){
$(this).find('td:last').hide();
});
});
To get the value on click or some other event you can use:
var value= $(this).find('td:last').text();

Assuming your Cons column is always the last one of your table, this should do it:
var myVar = '';
var myArray = new Array();
$('tr').each(function() {
//this fetches the text content of the last cell of the current row:
myVar = $(this).children("td:last").text();
//this puts that value at the end of the myArray array
myArray.push(myVar);
//this hides that td
$(this).children("td:last").hide();
});
I made a jsfiddle for it, seems to work.
http://jsfiddle.net/qnvHM/

Check what the ID of you table is. Assuming it's grdImoveis, then:
// Hide last column and and get its value (text)
var comp = $("#grdImoveis TD:last").hide().text();

Accessing Eval value inside Gridview Using JQuery OR JavaScript

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"))
});

Grid Inline editing with JavaScript, weird behaviour

I made this invoice page.
There is a repeater that generates a table.
There are invoice item descriptions coming into td tags encapsulated with div tags
like this:
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<tr>
<td class="griditem text">
<div class="invoiceDescription" id='<%# "item-" + Eval("ID") %>' value='<%# Eval("ID") %>' onclick="InvoiceItemClicked(this);">
<%# Eval("Description") %>
</div>
</td>
<td class="gridnumb text r">
<%# String.Format("{0:n}", Eval("Quantity"))%>
</td>
<td class="gridnumb text r">
<%# String.Format("{0:c}", Eval("UnitCost"))%>
</td>
<td class="gridnumb text r">
<%# String.Format("{0:c}", Eval("Total"))%>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
If you see the first line, I call a javascript onclick. The function is like this (uses jQuery):
function InvoiceItemClicked(elm) {
var textbox = document.createElement('input');
textbox.setAttribute('type', 'text');
textbox.value = $(elm).text();
$(elm).html(textbox);
}
This is the first time I try to do sth like this, and it worked in the first shot. It transforms lines into textboxes with same text set into them. But the problem is when the generated textbox is clicked (focus), the text inside it disappears.
I will also appreciate any other best practices to do this inline editing. I need to then update the items via webservices etc..
Thanks in advance.

yep my bad!
function InvoiceItemClicked(elm) {
var b = $(elm).hasClass('invoiceDescriptionEditing');
if(!b)
{
var textbox = document.createElement('input');
textbox.setAttribute('type', 'text');
textbox.setAttribute('id', 'txt');
$(textbox).css('width', '550px');
textbox.value = $(elm).text();
$(elm).html(textbox);
$(elm).removeClass('invoiceDescriptionEditable');
$(elm).addClass('invoiceDescriptionEditing');
}
}
this is aight! :)