I'm trying to write a function in jQuery which is going through all table rows and searches for hidden field values by specific hidden control ID "hdnIsEmpty", the problem is that I don't know how to do it by this hidden control ID because there are other hidden controls which are not necessarily to touch...
Maybe there is some other way to get what I wan't, but here is my unsuccessful try/approach and the only one I know:
<udc:Repeater ID="repDetailedInformation" runat="server" DataSource='<%# Eval("DetailsInformation") %>'>
<table id="tblDetails">
<tbody>
<tr>
<td>
BLA-BLA-BLA Information
</td>
</tr>
<tr>
<td>
<udc:HiddenField ID="hdnIsEmpty" runat="server" Value='<%#Eval("IsEmpty") %>' />
</td>
</tr>
<tr>
<td>
<udc:HiddenField ID="hdnBlaBla" runat="server" Value='<%#Eval("BlaBla") %>' />
</td>
</tr>
<tr>
<td>
BLA-BLA-BLA Information
</td>
</tr>
</tbody>
</table>
and jQuery:
<script type="text/javascript">
$(document).ready(function () {
function getHiddenBoolean(name) {
var selector = 'input:hidden[name$="' + name + '"]';
var field = $(selector);
return (field != null && field.length > 0) ? field.val().toLowerCase() == "true" : false;
};
var filteredRows = $('#tblDetails tr td').filter(function () {
return $(this).find('#hdnIsEmpty');
});
$.each(filteredRows, function () {
var isEmpty = getHiddenBoolean(filteredRows);
});
})
The first issue you have is that ASP.Net Webforms changes the id of all runat="server" elements at runtime, so you cannot select by them. Even if you could, in this instance you would have duplicates, which is invalid. Instead you could add a class to those elements to identify them.
<tr>
<td>
<udc:HiddenField ID="hdnIsEmpty" runat="server" class="hiddenfield" Value='<%#Eval("IsEmpty") %>' />
</td>
</tr>
From there you can just loop over that class selector, like this:
$(document).ready(function () {
$('#tblDetails tr td .hiddenfield').each(function() {
if ($(this).val().toLowerCase() == 'true') {
// do something here...
}
});
});
If you are unable to add a class attribute on the control, you could instead make the selector more generic:
$(document).ready(function () {
$('#tblDetails tr td input:hidden:first').each(function() {
if ($(this).val().toLowerCase() == 'true') {
// do something here...
}
});
});
After taking into account the ASP.NET issue mentioned above, another alternative would be:
$(document).ready(function (){
var $hidden = $('.tableClass input.hiddenTouchableElements');
$hidden.each(function() {
if ($(this).val().toLowerCase() == 'true') {
// do something here...
}
});
});
Related
i create a table row will auto generate data from sql and bound in by backend code.
Is it a way check that user has click or not by using javascript?
The row is create as below:
<tr>
<td align="right" class="formLine">Brand Type:</td>
<td class="FormLine2" align="left" colspan="7">
<asp:CheckBoxList ID="chkBrandType" runat="server" RepeatColumns="10" RepeatDirection="Horizontal" RepeatLayout="Flow" BorderWidth="0" />
</td>
</tr>
Jquery solution
//assuming all your html elemnts and checkboxes are having unique ids
$("#check1").on('click', function(){
if($(this).is(":checked")){
alert("checked");
else {
alert("unchecked");
}
}
Otherwise if you just want to check if ANY checkbox has been clicked
$('input[type="checkbox"]').change(function(){
if($(this).is(':checked')){
alert('checked');
} else {
alert('unchecked');
}
});
This can be done easily with the function below. Note the use of CheckBoxList1.ClientID to get the correct ID. Also you need to add input to the listener since asp.net will create a table around the checkboxes.
<script type="text/javascript">
$(document).ready(function () {
$("#<%= CheckBoxList1.ClientID %> input").change(function (e) {
if ($(this).prop("checked")) {
alert($(this).val());
}
});
});
</script>
This question already has answers here:
Why doesn't index() working as expected
(5 answers)
Closed 7 years ago.
I've got a jquery .each() nested in a Datatables action function. I'm trying to get the values(td) of the checked row, so I figured I use the index that's passed to the each() function and use the index to select the row(tr). The index is always 0. My approach seems flawed, but it's a start. I need the values in the checked rows.
var data = hesTable.$('input[type="checkbox"]:checked').each(function (index, element) {
var item = $(this);
alert(index);
alert('Row index: ' + item.index())
alert('Row index: ' + item.parent().index());
});
HTML (MVC)
<tbody>
#if (Model.HesViewModels != null)
{
// Can't use the DisplayTemplate here because need to assign Data-* attributes
//
//foreach (var item in Model.HesViewModels)
for (var i = 0; i < Model.HesViewModels.Count; i++)
{
// Make sure Hes Service returns data
//
if (Model.HesViewModels[i] != null)
{
<tr>
<td>
#Html.CheckBoxFor(s => Model.HesViewModels[i].Process,
new
{
data_detailid = Model.HesViewModels[i].PartnerReferralDetailId,
data_reasoncode = Model.HesViewModels[i].ReferralDetailReasonCode,
data_statuscode = Model.HesViewModels[i].ReferralDetailStatusCode,
data_outcomecode = Model.HesViewModels[i].ReferralDetailOutcomeCode
})
</td>
<td>#Model.HesViewModels[i].PartnerReferralDetailId</td>
<td>#Html.TextBoxFor(m => Model.HesViewModels[i].ReferralDetailStatusCode)</td>
<td>#Html.TextBoxFor(m => Model.HesViewModels[i].ReferralDetailReasonCode)</td>
<td>#Html.TextBoxFor(m => Model.HesViewModels[i].ReferralDetailOutcomeCode)</td>
</tr>
}
}
}
</tbody>
RENDERED HTML
<input data-detailid="1578441" data-outcomecode="154" data-reasoncode="9" data-statuscode="8" data-val="true" data-val-required="The Process field is required." id="HesViewModels_0__Process" name="HesViewModels[0].Process" type="checkbox" value="true" /><input name="HesViewModels[0].Process" type="hidden" value="false" />
Try using selector "table tr:has(:checked)" to select only tr which have input element where checked is true . Approach iterates tr elements instead of input elements , to avoid need to select parent elements within .each()
$("table tr:has(:checked)").each(function(index, element) {
console.log($(this).index())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<table>
<tbody>
<tr>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked />
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked />
</td>
</tr>
</tbody>
Because the index() is based on the siblings. Not all the checkboxes on the page. So use the index of the row.
item.closest("tr").index()
If you want to get the tds, than you really do not need the index()
item.closest("tr").find("td")
I have a small application in MVC4. It has a grid and every row has two things.
1) ID
2) Button
When user click on a button I need to invoke a javascript function passing ID as an parameter. How can I do this in MVC. I can eaisly do thin in case of . Please help
Below is my code.
#model IEnumerable<Models.Asset>
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table>
<tr>
<th>
Id
</th>
<th>
Show
</th>
</tr>
#foreach (var item in Model) {
<tr>
<td width="80">
#item.Id
</td>
<td>
<button class="btnView" onclick="myfunction(#item.someProperty)">Show</button>
///How can I pass #item.someProperty as an parameter to click handler?
</td>
</tr>
}
</table>
<div id="imageDisplay">
<p>
</p>
</div>
#section scripts{
<script type="text/javascript">
$(function () {
$('#imageDisplay').dialog({
autoOpen: false
});
$('.btnView').click(function () {
alert('ok');
//How can I get id as an parameter to this function?
});
});
</script>
}
Firstly just remove onclick handler from the button(You don't need it as you are handling click event with jquery)
Try this :
HTML :-
<td>
<button class="btnView" data-prop="#item.someProperty">Show</button>
</td>
JQUERY :-
$('.btnView').click(function () {
var prop = $(this).attr('data-prop');
alert(prop);
});
OR
$('.btnView').click(function () {
var prop = $(this).data('prop');
alert(prop);
});
OR(if you don't want to add data-prop on button then you can follow below answer,Just catch 'Id' which is there in td of your table)
$('.btnView').click(function () {
var id = $(this).closest('tr').find('td').eq(0).text();
alert(id);
});
Remove the onclick handler from the button (you don't have a function called myfunction)
Since you already have the ID value in the previous column, you can get it using
$('.btnView').click(function () {
var id = $(this).closest('tr').children('td').eq(0).text();
});
I'm a beginner and know only basics of javascript and MVC. Now I need to remove the corresponding row from the appended table whenever the row is unchecked..
This is my table ...
<table id="sortabletable" class="tab sortable">
<tr class = trow>
<td>
#Html.DisplayFor(modelItem => item.AId)
</td>
<td>
#Html.DisplayFor(modelItem => item.UId)
</td>
<td><input type="checkbox" name="thecheckbox" value="#item.TXId" class ="cbox" checked/></td>
</tr>
</table>
<table class="tab" id="tlist">
<tbody>
</tbody>
</table>
and here's my Jquery
$(function () {
$('input[type="checkbox"]').click(function () {
_this = $(this);
if ($(this).is(':checked')) {
row.find('td:nth-child(1), td:nth-child(3)').hide();
var row = _this.closest("tr").clone();
$('#tlist').append(row);
} else {
// i dont know
}
});
});
I don't know how to select the row based on checked value from an appended table.
use a combination of closest and remove
$('input.cbox').on('change', function() {
var _this = $(this);
if(this.checked) {
var row = _this.closest("tr").clone();
row.find('td:nth-child(1), td:nth-child(3)').hide();
row.data('id' , this.value);
$('#tlist').append(row);
}
else {
$('[data-id="'+ this.id +'"]', '#tlist').remove()
}
});
I have search box and add and edit buttons in one page.i have to edit a detail after selecting radiobutton.The script for selecting radiobutton and redirecting to next page is given below.But only alert to 'Select resume' only works.rest of code is not working.Pls help
<script type="text/javascript">
$(document).ready(function () {
var which_button;
var rad;
$('input[type="image"]').click(function (event) {
process_form_submission(event);
if (which_button == "Edit") {
if (!$("input[name='rdoUserId']:checked").val()) {
alert('Select a Resume!');
return false;
}
else {
rad = $("input[name='rdoUserId']:checked").val();
var url = "Edit/" + rad;
$('#frmIndexResume').attr("action", url);
$('#frmIndexResume').submit();
}
}
return false;
})
function process_form_submission(event) {
event.preventDefault();
//var target = $(event.target);
var input = $(event.currentTarget);
which_button = event.currentTarget.value;
}
});
</script>
<form name="frmIndexResume" method="get"action="">
<table id="tblSearch">
<tr>
<td>Name:#Html.TextBox("Names")</td>
<td>From:#Html.TextBox("FromDate")</td>
<td>To:#Html.TextBox("ToDate")</td>
<td><input type="image" value="Search" src="#Url.Content("~/images/Search.png")" width="60px"height="40px" alt="Search"/></td>
</tr>
</table>
<table id="Createbtn">
<tr>
<td>
<a href="#Url.Action("Create", "Resume")" title="Create">
<img src="#Url.Content("~/images/Create.png")" width="40px" height="30px"alt="Create"/></a>
</td>
<td>
<input type="image" value="Edit" src="#Url.Content("~/images/Edit.png")" width="40px" height="30px" alt="Edit"/>
</td>
</tr>
</table>
<table id="tblResume">
<caption>Listings</caption>
<tr>
<th>Select</th>
<th>
Name
</th>
<th>
DOB
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
<input type="radio" value="#item.Id" name="rdoUserId" />
</td>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.DOB)
</td>
</tr>
}
</table>
</form>
You have the radio button in a loop causing there to be duplicates of the radio button.
#foreach (var item in Model)
{
...
<input type="radio" value="#item.Id" name="rdoUserId" />
...
}
The 'name' attribute is not a unique identifier. My guess is the jQuery is picking either the last or first radio button in the form since there is more than one of them.
There may be more issues besides this with the form also.
Maybe window.location is what you are looking for.
You can easily redirect via:
window.location = url;
or via:
window.navigate(url);
Please note that the second approach maybe ie-specific.