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();
});
Related
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 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
I have an accordion that is loaded from a model list, so it is repeated with new IDs assigned according to the ID of the model. In this structure I have a DIV is display:none and upon clicking a radio button I want it to slide down and show. This is some of my HTML:
<tr style="height:35px">
<td style="text-align:left" >
<label id="lblOtherAvery+#Model[i].UserId" style="font-size:x-small">Other:</label>
</td>
<td>
#Html.RadioButtonFor(x=>Model[i].AverySize, "Other", new { #id = "chkOtherAvery" + #Model[i].UserId, #style = "width:30px;", #class = "radLabel radLabelOther", #disabled = "disabled"})
</td>
</tr>
<tr>
<td style="text-align:center" colspan="2" >
<div id="divAvery_#Model[i].UserId" style="display:none;vertical-align:top;text-align:center" class="divAvery">
<table style="width:100%;text-align:center">
<tr style="height:20px;">
<td style="font-size:x-small">Rows:</td>
<td>#Html.TextBoxFor(x=>Model[i].LabelRows, new {#id = "txtRows" + #Model[i].Userd, style = "width:50px;font-size:x-small;height:20px"})<span style="font-size:x-small"><i>(MAX 16)</i></span></td>
<td style="font-size:x-small">Columns:</td>
<td>#Html.TextBoxFor(x=>Model[i].LabelColumns, new {#id = "txtColumns" + #Model[i].UserId, style = "width:50px;font-size:x-small;height:20px"})<span style="font-size:x-small"><i>(MAX 3)</i></span></td>
</tr>
</table>
</div>
</td>
</tr>
Then in the JS for when the radio is clicked:
$('.radLabelOther').on('click', function () {
var divId = $(this).closest('tr').next().children().find('.divAvery');
$(divid).slideDown().show();
});
But this doesn't work. I am able to get the DIV element OK, but I cannot get it to show. What am I doing wrong?
I have even tried to get the ID of the DIV with this:
var divId = $(this).closest('tr').next().children().find('.divAvery').attr('id');
But that doesn't work either.
I can get it to work now by doing this:
var $divId = $(this).closest('tr').next().children().find('.divAvery');
$divId.slideDown();
Why does that $ make it work?
I have a textbox called "Branch Code" which ties a branch to a corporate card transaction. Sometimes there is a need to split a transaction among several branches. I have a table being built dynamically in MVC containing the form that needs filled out. In the branch code table cell, I'm adding a href that will fire off the splitTransaction javascript function that opens a new window allowing a value to be built. This new value needs to be written back to the parent window into the textbox that was right next to the hyperlink that opened the child window. My problem is, how do I send the name of the textbox to the child window? I'm not sure how to get it.
Here is my view:
#model List<intranetMVC.Models.sp_CorpCardEmpGetTrans_Result>
#{
ViewBag.Title = "Index";
}
<h2>Corporate Card Transactions</h2>
#using (#Html.BeginForm("Index", "CorpCardTransactions", FormMethod.Post))
{
<table cellpadding="8">
<tr>
<th class="col-md-2">Transaction Details</th>
<th class="col-md-2">Payee</th>
<th>Amount</th>
<th class="col-md-2">Description</th>
<th class="col-md-1">GL/Account</th>
<th class="col-md-1">Branch Code</th>
<th class="col-md-1">Receipt</th>
</tr>
#for (int i = 0; i < Model.Count; i++)
{
<tr>
<td valign="top">
#Html.HiddenFor(m => m[i].ID)
#*#Html.DisplayFor(m => m[i].AccountID)
#Html.HiddenFor(m => m[i].AccountID)<br />
<em>#Html.DisplayFor(m => m[i].CardHolderName)</em>
#Html.HiddenFor(m => m[i].CardHolderName)<br />*#
Posted: #Html.DisplayFor(m => m[i].PostDate)
#Html.HiddenFor(m => m[i].PostDate)<br />
TranDate: #Html.DisplayFor(m => m[i].TranDate)
#Html.HiddenFor(m => m[i].TranDate)
</td>
<td valign="top">
#Html.DisplayFor(m => m[i].Payee)
#Html.HiddenFor(m => m[i].Payee)
</td>
<td valign="top">
#Html.DisplayFor(m => m[i].Amount)
#Html.HiddenFor(m => m[i].Amount)
</td>
<td valign="top">#Html.EditorFor(m => m[i].Description)</td>
<td valign="top">#Html.EditorFor(m => m[i].GL_Account)</td>
<td valign="top">
#Html.EditorFor(m => m[i].BranchCode)<br />
Split Transaction
</td>
<td valign="top">#Html.EditorFor(m => m[i].Receipt)</td>
</tr>
}
</table>
<br />
<input type="submit" name="saveBtn" id="saveBtn" value="Save Progress" style="font-size:1.2em;font-weight:bold;width:200px;" /> <input type="submit" name="finishBtn" id="finishBtn" value="Finish and Close Statement" style="font-size:1.2em;font-weight:bold;width:250px;" /> #Html.ActionLink("Cancel", "Index", "Statements")
<p style="margin-top:1em;"><span style="color:green; font-size:14px;">#ViewBag.Message</span> <span style ="color:#b94a48; font-size:14px;font-weight:bold;">#ViewBag.Error</span></p>
<script type="text/javascript">
var popup;
function splitTransaction() {
popup = window.open("splittrans.htm", "Popup", "width=400,height=200");
popup.focus();
}
</script>
}
Here is what the page source looks like for one of the branch code table cells:
<td valign="top">
<input class="k-textbox" data-val="true" data-val-number="The field BranchCode must be a number." id="_0__BranchCode" name="[0].BranchCode" value="11" /><br />
Split Transaction
</td>
When I click on the link to "split transaction", how do I send the value of the textbox next to it to the function that opens the child window? Or how do I reference this textbox when sending the new value back to the parent window? There could be many of them on the page. It appears as if they are being named like this: _0__BranchCode, etc.
It would be better to handle the click event rather that using the onclick attribute
Split Transaction
and the script
$('.split).click(function() {
// get the adjacent (sibling) textbox value
var value = $(this).siblings().first().val();
// do something with the value
});
or you could use $(this).prev('.k-textbox').val() or $(this).closest('td').children('input').val();
I have a list of items and i want to set the order of items in list.
If i select multiple items at same then the multiple items should move respectively up or down.
I am using this code to move up and down. but in this case if first and third item are selected then it returns false because i am adding a check that if previous to current item is null then it should not move that up and if next to current is not available then it should not move down.
$('#selectedTab tr').each(function () {
var currentTr = $(this).find('td.backgroundcolor').parent();
if (currentTr.text() == null) {
}
else {
debugger;
var previousTr = "";
if (obj.value == "Move Up") {
previousTr = currentTr.prev();
//if (previousTr.length == 0)
// return false;
}
else {
previousTr = currentTr.next();
if (previousTr.length == 0)
return false;
}
var temp = currentTr.contents().detach();
currentTr.append(previousTr.contents());
previousTr.append(temp);
}
});
And Html for this
`
<table id="unSelectedTab" style="width: 100%">
<tr>
<td>
<img src="~/images/Employees.png" />Employee</td>
</tr>
<tr>
<td>
<img src="~/images/vehicles.png" />Vehicle</td>
</tr>
<tr>
<td>
<img src="~/images/collision.png" />Collision</td>
</tr>
<tr>
<td>
<img src="~/images/trailers.png" />Trailers</td>
</tr>
<tr>
<td>
<img src="~/images/dispatch.png" />Dispatch</td>
</tr>
<tr>
<td>
<img src="~/images/notifications.png" />Notifications</td>
</tr>
<tr>
<td>
<img src="~/images/equipment.png" />Equipment</td>
</tr>
</table>
</td>
`
Thanks
Prince Chopra