I have table that display via Razor syntax
Here is code
#foreach (var item in Model)
{
<tr>
<td class="point">
#(rowNo += 1)
</td>
<td class="title">
#Html.DisplayFor(modelItem => item.Date_of_Birthday)
</td>
<td id="name" class="title">
#Html.DisplayFor(modelItem => item.Name)
</td>
<td class="title"></td>
<td class="title"></td>
<td class="title"></td>
<td style="text-align: end;">
<img id="delete_pt" src="~/images/icons8-Delete-50.png"/>
<img src="~/images/doc-50.png"/>
</td>
</tr>
}
I try to get value of
<td id="name" class="title">
#Html.DisplayFor(modelItem => item.Name)
</td>
Via JS
Here is code
<script>
$(document).on('click', '#delete_pt', function () {
var title = $(this).find('#name').html();
console.log(title);
});
But when I click I'm not get value it's empty. Where is my error?
Your element with id="delete_pt" is an <img> and it does not contain any child elements. You need to find the parent <tr> element and then find the <td id="name"> element.
$(document).on('click', '#delete_pt', function () {
var title = $(this).closest('tr').find('#name').html();
console.log(title);
});
However you loop is generating duplicate id attributes which is invalid html. You need to replace your id attributes with class names, for example
<td class="name title">
#Html.DisplayFor(modelItem => item.Name)
</td>
....
<img class="delete_pt" src="~/images/icons8-Delete-50.png" />
and then use
$(document).on('click', '.delete_pt', function () {
var title = $(this).closest('tr').find('.name').html();
console.log(title);
});
i believe you need to change it to
#Html.DisplayFor(item=> item.Date_of_Birthday)
You can simply pass the item.name as a value to the js
<img id="delete_pt" src="~/images/icons8-Delete-50.png" onclick="deletePT(#item.Name)"/>
and add a function to yout JS:
(remove the onclick event)
function deletePT(itemname){
console.log(itemname);
}
Your code generate a ID value to more then one element in the HTML - that is not good. but this is not the issue of the problem
Related
From my razor view i have a loop for creating some datas inside a table.
#foreach (var item in Model.ItemModel) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.ItemCode)
</td>
<td>
#Html.DisplayFor(modelItem => item.ItemName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Brand)
</td>
<td>
#Html.DisplayFor(modelItem => item.PurchaseQty)
</td>
<td>
#Html.DisplayFor(modelItem => item.SalesQty)
</td>
<td>
#Html.DisplayFor(modelItem => item.Stock)
</td>
<td>
<button onclick="showModal(item.ItemCode);">Show Details/button>
</td>
</tr>
}
My javascript function is to accept one parameter (when button clicks) and print it inside a modal.
<script type="text/javascript">
function showModal(itemCode)
{
var mod = $('#myModal');
mod.modal();
$('#recordId').html(itemCode);
}
</script>
I got exception when i run above code, and it works fine when i use some manual input parameters like 123.
<button onclick="showModal(123);">Show Details/button>
i want to call this method by using dynamic parameter ( value from loop ), whats wrong here? help me!
The answer is "showModal(#item.ItemCode);" ,
i missed # at the beginning.
I have table in my view
Here is code
<tbody id="findings" style="overflow-y: scroll;">
#foreach (var item in Model) {
<tr>
<td style="display: none" id="patientId" class="title">
#Html.DisplayFor(modelItem => item.Patient_id)
</td>
<td class="title appdate">
#Html.DisplayFor(modelItem => item.Start_appointment)
</td>
<td id="nameVal" class="title">
#Html.DisplayFor(modelItem => item.Patient.Name)
</td>
<td class="title">
<img src="#item.Calculation.CalculationStatus" />
</td>
<td class="title">
<img style="width: 30px; height: 30px;" class="open_calculation" src="~/images/icons8-Document-30.png" />
</td>
</tr>
}
</tbody>
I need to get value from
<td class="title appdate">
#Html.DisplayFor(modelItem => item.Start_appointment)
</td>
via button click open_calculation
How I can do this correctly via js?
Thank's for help.
Easiest way would be:
$(function(){
$("body").on("click", ".open_calculation", function(){
$(this).closest("tr").find(".appdate").text();
});
});
Hope this helps!
So according to #N.Ivanov answer I need to write code like this.
$('.open_calculation').click(function() {
openCalculation(this);
});
function openCalculation(element) {
$('#main_window').load('#Url.Action("OpenCalculationPartial", "Calculations")',
function () {
var date = "Finding from" + " " + $(element).closest("tr").find("#appdate").text().trim();
$("#appointmentDate").text(date);
});
}
Where was problem.
I use this in function, but this context in function are different.
So code this code isn't right:
$('.open_calculation').click(function() {
openCalculation();
});
function openCalculation(element) {
$('#main_window').load('#Url.Action("OpenCalculationPartial", "Calculations")',
function () {
var date = "Finding from" + " " + $(element).closest("tr").find("#appdate").text().trim();
$("#appointmentDate").text(date);
});
}
I am new in mvc5. I am facing a problem is that i want to render some row in a table with a radio button in every row. If i clicked or checked the radio button then it will show a picture in that row. Now the problem is that, i am trying to test every row by clicking but the result is only one row showing alert and this is only first row. where is the problem i don't know? will you please help me to find out the problem?
#if (Model != null) {
foreach (var item in Model) {
<tr style="vertical-align:middle">
<td style="vertical-align:middle">
#Html.DisplayFor(modelItem => item.CandId)
</td>
<td style="vertical-align:middle">
#Html.DisplayFor(modelItem => item.CandName)
</td>
<td style="vertical-align:middle">
#Html.HiddenFor(modelItem => item.Position, new {id="ps" })
</td>
<td style="vertical-align:middle">
<img src="/Ballot/RetrieveImage/#item.id" alt="" height=50 width=50/>
#*#Html.DisplayFor(modelItem => item.cand_symbol)*#
</td>
<td style="vertical-align:middle; text-align:center;">
#Html.RadioButtonFor(modelItem => item.isCandidate, item.CandId, new { id="rd",name="rd"})
<img src="" height="50" width="50" id="picture" hidden />
</tr>
}
}
$("#rd").click(function () {
$('#picture').attr('src', '/Images/vt.png');
var ps = $('#ps').val();
alert(ps);
$(picture).show();
});
You are rendering multiple elements with same id which is the reason it is not working, it will always fire event for just first item it finds in the DOM with that id.
Change it to class and add click event on class selector:
#Html.HiddenFor(modelItem => item.Position, new {#class="ps" })
#Html.RadioButtonFor(modelItem => item.isCandidate, item.CandId, new { #class="rd",name="rd"})
<img src="" height="50" width="50" class="picture"/>
and in js:
$(".rd").click(function () {
var picture = $(this).closest("tr").find('.picture').attr('src', '/Images/vt.png');
var ps = $(this).closest("tr").find('.ps').val();
$(picture).show();
});
I have buttons in a table which are created dynamically. I want to iterate through a table, get the tablerows which contain a checked checkbox and get the value of a button inside the tablerow. I want to push the values in an array after. The buttons don't have a unique ID so I cannot get their values by id.
I tried to get the values through giving the buttons a class and itering works fine but the array is filled with empty entries.
$("#bt_multiple_deletion").off().on("click", function () {
var files = [];
var rows = $(".select").find("input[type=checkbox]:checked");
rows.each(function () {
files.push($(this).find(".filefolder-button").text());
});
})
I really don't know what Im doing wrong. I tried to get the values with .text(), .val() etc.
My table row looks like this:
<tr class="select">
<td>
<span class="countEntries"><input id="lv_fifo_ctrl7_cb_delete_file" type="checkbox" name="lv_fifo$ctrl7$cb_delete_file" /></span>
</td>
<td>
<img src="images/icons/013_document_02_rgb.png" alt="document" />
</td>
<td class="name">//the button i want to get the value from
<input type="submit" name="lv_fifo$ctrl7$bt_file" value="013_document_png.zip" id="lv_fifo_ctrl7_bt_file" class="filefolder-button download file del" style="vertical-align: central" />
</td>
<td>
<span id="lv_fifo_ctrl7_lb_length">33.14 KB</span>
</td>
<td>
<span id="lv_fifo_ctrl7_lb_CreationTime">21.10.2014 07:34:46</span>
</td>
<td></td>
<td>
<input type="submit" name="lv_fifo$ctrl7$bt_del_file" value="delete" id="lv_fifo_ctrl7_bt_del_file" class="delete-button delete-file" />
</td>
</tr>
The problem is rows is the input elements not the tr elements so in the loop you need to find the tr which contains the input then find the target element inside it
$("#bt_multiple_deletion").off().on("click", function () {
var checked = $(".select").find("input[type=checkbox]:checked");
var files = checked.map(function () {
return $(this).closest('tr').find(".filefolder-button").val();
}).get();
})
Another option is
$("#bt_multiple_deletion").off().on("click", function () {
var rows = $(".select").find("tr").has('input[type=checkbox]:checked');
//var rows = $(".select").find('input[type=checkbox]:checked').closest('tr');
var files = rows.map(function () {
return $(this).find(".filefolder-button").val();
}).get();
})
#Timo Jokinen Do you need this
$("#bt_multiple_deletion").on("click", function () {
var files = [];
var rows = $(".select").find("input[type=checkbox]:checked");
rows.each(function () {
files.push($(this).parents("tr").find("td.filefolder-button").text());
});
console.log(files);
})
<table class="select">
<tr>
<td class="filefolder-button">test1</td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td class="filefolder-button">test2</td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td class="filefolder-button">test3</td>
<td><input type="checkbox" /></td>
</tr>
</table>
<button id="bt_multiple_deletion">delete</button>
Checkout example link here
Any ideas why this doesn't work?
http://jsfiddle.net/zk4pc/2/
I'm trying to get it so that everytime there is an element with the class "insert_name", the name is printed from the table.
Could you also help me make the selection more advanced (for instance only using the data from the first tr in the "client-profile" class?
Thanks!
HTML
<body onload="printMsg()">
<div id="api_data" style="display:none;">
<div class="client-profile">
<div class="head icon-5">Customer Details</div>
<table id="client-information">
<tbody>
<tr>
<td class="left">Name:</td>
<td class="color">Matthew Tester
</td>
</tr>
<tr class="dark">
<td class="left">E-mail:</td>
<td class="color">asdfg</td>
</tr>
<tr>
<td class="left">Registration:</td>
<td class="color">2013-11-21</td>
</tr>
<tr class="dark">
<td class="left">Status:</td>
<td class="color"><span class="active">Active</span>
</td>
</tr>
<tr>
<td class="left">Last Login Time:</td>
<td class="color" title="2014-05-28 11:43:46">1 hour ago</td>
</tr>
<tr class="dark">
<td class="left">Last Login From:</td>
<td class="color">123.123.123.123</td>
</tr>
<tr>
<td class="left">Location:</td>
<td class="color">United Kingdom</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="insert_name"></div>
</body>
Javascript
(function printMsg() {
var node = document.getElementsByClassName('insert_name');
node.innerHTML = $('[class*="color"]').eq(0).text();
})();
jsFiddle Demo
The issue is with your node selection. When you select by class name it returns an array of elements. Since you are only looking for the div with that class name, access the first index to reference it.
var node = document.getElementsByClassName('insert_name')[0];
edit
To make this iterate all of the nodes you could take this approach
var nodes = document.getElementsByClassName('insert_name');
var text = $('[class*="color"]').eq(0).text();
for(var i = 0; i < nodes.length; i++){
nodes[i].innerHTML = text;
}
Alternatively, since jQuery is already included, you could remove the body's onload event and just use this
jsFiddle Demo
$(function(){
$('.insert_name').html($('[class*="color"]').eq(0).text());
});
To ensure this only acts on the client-profile class the selector would be
$('.insert_name').html($('.client-profile [class*="color"]').eq(0).text());
If you are just trying to insert the name rather than all of the content, this should do the trick:
$(function() {
$('.insert_name').text($('td:contains("Name:")').next().text());
});
Here is the fiddle:
http://jsfiddle.net/b8LKQ/
Hope that helps!
I added a little more jQuery:
$(function() {
$('[class*="color"]').each(function(){
$('.insert_name').append($(this).text());
});
});
http://jsfiddle.net/zk4pc/7/
Hope that helps!