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);
});
}
Related
I am trying to create a table that places all the answers that the user has answered by buying a ticket under the correct questions, and if they haven't answered then show the dash symbol.
The problem is that if there are more than on tickets that the user has purchased then the answers get all messed up.
Example:
So, for this the number should go under 'Mobile Num?' in the same row as 'Free 2' and 'Male', 'Aadil' and '20' should go under 'Gender?', 'Name?' and 'Age?' in the same row as Free.
This is my HTML:
<template>
<fragment>
<tr>
<td :rowspan="countArray + 1">
<img :src="user.profile_image">
</td>
<td :rowspan="countArray + 1">
{{user.first_name + " " + user.last_name}}
</td>
<td :rowspan="countArray + 1">
<div v-for="(nameTick, nameKey) in name" :key="nameKey" class="tdStyle">
<td>
{{nameTick}}
</td>
</div>
</td>
</tr>
<tr v-for="(ticketQues, quesKey) in ticketAns" :key="quesKey">
<td v-for="(ans, ansKey) in ticketQues.questions" :key="ansKey">
{{ans.answer}}
</td>
</tr>
</fragment>
</template>
This is my JS:
beforeMount: function() {
this.$axios.$get(`/user/${this.userId}`).then(response => {
this.user = response
});
for (let i = 0; i < this.ticketName.tickets.length; i++) {
this.tickets_name = this.ticketName.tickets[i].ticket_name;
this.countArray = this.ticketName.tickets[i].count;
this.name.push(this.tickets_name);
};
},
watch: {
tickets: {
handler: function(val) {
for (let x = 0; x < val.length; x++) {
this.$axios.$get(`/ticket/${val[x].id}/answer`).then(response => {
for (let i = 0; i < response.questions.length; i++) {
this.userAnswered = response.questions[i];
this.answered.push(this.userAnswered.answer);
}
console.log(response)
this.allQuestions = this.ticketAns.push(response);
})
}
// this.userAnswers.push(this.ticketAns);
this.userAnswers.push(this.answered);
}
}
}
If someone can help it would be much appreciated.
Remove the <td> inside <td>, after that use a <div> with grids and css to organize inside the <div>.
<template>
<fragment>
<tr>
<td :rowspan="countArray + 1">
<img :src="user.profile_image">
</td>
<td :rowspan="countArray + 1">
{{user.first_name + " " + user.last_name}}
</td>
<td :rowspan="countArray + 1">
<div v-for="(nameTick, nameKey) in name" :key="nameKey" class="tdStyle">
<div class="ui grid">
{{nameTick}}
</div>
</div>
</td>
</tr>
<tr v-for="(ticketQues, quesKey) in ticketAns" :key="quesKey">
<td v-for="(ans, ansKey) in ticketQues.questions" :key="ansKey">
{{ans.answer}}
</td>
</tr>
</fragment>
</template>
When I click on my button "Select" it should show me the HTML popup, and for some reason is not happening.
Could it be some id problem or hard code?
The main idea is to click and bring some kind of list reading from a random array list.
Below: my .js with the call back id and display.
Any ideas?
<!-- This hosts all HTML templates that will be used inside the JavaScript code -->
<table class ="cls-{id} active-{active}" style="display: none;" width="100%" id="rowTemplate">
<tr class ="bb cls-{id} active-{active}">
<td class="active-{active}" id="{id}-question" width="70%">{question}</td>
<td class="cls-{id} active-{active}" width="30%">
<button class="buttons" step="0.01" data-clear-btn="false" style="background: #006b54; color:white !important ;" id="{id}-inspectionResult"></button>
</td>
</tr>
</table>
<div id="projectPopUp" class="popup-window" style="display:none">
<div class="popuptitle" id="details-name"></div>
<table width="100%" id="detailsgrid">
<tr>
<td style="text-align:left">Start Time</td>
<td> <select id="details-startTime" data-role="none"></select></td>
</tr>
<tr>
<td style="text-align:left">End Time</td>
<td> <select id="details-endTime" data-role="none"></select></td>
</tr>
</table>
<div>
<button class="smallButton" onClick="closeProjectPopup()">Cancel</button>
<button class="smallButton" onClick="submitProjectPopup()">Submit</button>
</div>
</div>
<table style="display: none;" id="sectionRowTemplate">
<tr width="100%" class="bb cls-{id}-row2 sectionheader">
<td class="cls-{id}" colspan="3">{question}</td>
</tr>
</table>
Javascript code:
var buildQuestionnaire = function(){
parseInitialDataHolder();
for (var i = 0; i < ARRAY_OF_QUESTIONS.length; i++){
var id = i;
var data = {
id: id,
question: ARRAY_OF_QUESTIONS[i].question,
inspectionResult: '',
active: true
};
var initialdata = initialdataholder[id];
if(initialdata) {
data = initialdata;
}
dataholder.push(data);
if (typeof ARRAY_OF_QUESTIONS[i].header == 'undefined') {
$('#questionsTable tbody').append(Utils.processTemplate("#rowTemplate tbody", data));
$("#" + id + "-inspectionResult").text(data.inspectionResult || 'Select');
$("#" + id + "-inspectionResult").click(resultHandler.bind(data));
updateActiveStatus(data);
commentvisibilitymanager(data);
}
else {
$('#questionsTable tbody').append(Utils.processTemplate("#sectionRowTemplate tbody", data));
}
}
}
//to show the popup
$('#projectPopUp').show();
//to close the popup
$('#projectPopUp').hide();
$(document).ready(function() {
buildQuestionnaire();
});
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
Im having problems displaying the Title of a table.
This is where i click to open a "modal" with the details:
<td>{{z.proyecto}}</td>
Here is the modal that opens up with details of said project:
<div id="proyecto_detalle" class="modal" style="display: {{estiloProyecto_detalle}};">
<div class="modal-content">
<span class="close" ng-click="close_proyecto_detalle()">×</span>
<h4 align="center">Detalle Tareas</h4>
<table id="detalleTareas" class="table table-striped table-bordered">
<thead>
<tr>
<td><b>Tarea</b></td>
<td><b>Inicio</b></td>
<td><b>Termino</b></td>
<td><b>Completado</b></td>
<td><b>Esperado</b> </td>
<td><b>Responsable</b></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="y in datos10">
<td style="vertical-align: top;">{{y.tarea}}</td>
<td style="vertical-align: top;">{{y.inicio}}</td>
<td style="vertical-align: top;">{{y.termino}}</td>
<td style="vertical-align: top;">{{y.completado}}%</td>
<td style="vertical-align: top;">{{y.esperado}}%</td>
<td style="vertical-align: top;">{{y.nombre}}</td>
</tr>
</tbody>
</table>
</div>
</div>
I need to show the name of "z.proyecto" inside the modal in the "h4" where it says "Detalle Tareas".
Any tips about how can i do it?
This is my angularjs, where i display the modal, updated with the current changes.
$scope.mostrar_proyecto = function(project_id, proyecto) {
$http.get("conector.php?tipoDato=query10&project_id="+project_id)
.then(function(response) {
$scope.mensajeEspera = "";
$scope.datos10 = response.data;
for(var i = 0; i < $scope.datos10.length; i++){
var currentObj = $scope.datos10[i];
console.log(currentObj);
currentObj.tituloObj = currentObj.proyecto;
$scope.titulo = currentObj.tituloObj;
currentObj.titulo = currentObj.tituloObj;
}
$scope.titulo = currentObj.tituloObj;
});
$scope.estiloProyecto_detalle = "block";
}
I think you could update your function mostrar_proyecto like this:
function mostrar_proyecto(id){
//...your previous code
//update
//...retrieve project data: z.proyecto and bind it
$scope.title = z.proyecto; //or your specific data (titulo de la tarea, detalles, or any other)
}
and now in your modal just bind the h4 to that var like this:
<h4 align="center" data-ng-bind="title"></h4>
calling all JavaScript Gurus. I'm going bananas, in the following script if I remove the Alert the code does not work. But I obviously cannot leave a pop up in the middle of my ASP.NET web App
Not that it matters much but this code is in a Index.cshtml that contains a partial called IndexSearch Results.cshtml. Code at the bottom but its just the Javascript below I think is the issue ::
Something is missing I cannot figure it, many thanks for looking...
#section Scripts {
#Scripts.Render("~/bundles/tablesorter")
<script type="text/javascript">
$(document).ready(function () {
$('a').each(function () {
$(this).qtip({
content: {
text: $(this).next('.tooltiptext')
}
});
});
$('#searchButton').click(function () {
var url = '/SupplyPoint/IndexSearch';
var data = {
searchSPID: $('#SearchSPID').val().toString(),
searchPremise: $('#SearchPremise').val().toString()
};
$("#ResultsList").load(url, data, function () {
$('#LoadingGif').empty();
});
$('#LoadingGif').empty().html(' Loading...');
Init();
});
function Init() {
if ($("#myTable").find("tr").size() > 1) {
alert('Without this Alert the Tablesorter does not apply formatting, i.e. no paging, no zebra, nothing just one big list, odd');
$("#myTable").tablesorter({ dateFormat: "uk", widgets: ['zebra'], sortList: [[4, 0]] }).tablesorterPager({ container: $("#pager") });
$('tr').live('click', function (e) {
//if not clicking an anchor tag or imag then assume user wants to go to details page
if ((!$(e.target).is('a')) && (!$(e.target).is('img')) && (!$(e.target).is('th')) && !(e.target.isTextEdit)) {
if ($(this).attr('rowid') != null)
window.location = 'SupplyPoint/Details/' + $(this).attr('rowid');
}
});
} else {
$("#myTable").hide(); $("#pager").hide();
}
return false;
};
});
</script>
Here is Index.CSHTML:
#model IEnumerable<AscendancyCF.Models.SupplyPoint>
#{
ViewBag.Title = "Index";
}
<style>
.tooltiptext {
display: none;
}
</style>
<h2></h2>
<fieldset>
<legend>
<img width="50" height="50" src="~/content/images/bPremise.jpg" /> Use the Search fields provided to Locate a Premise
</legend>
<table class="NoHighlight">
<tr>
<td></td>
<td>
SSID<br />
#Html.TextBox("SearchSPID", string.Empty, new { style = "float:left;width:150px;" })
<div style="clear:both;"></div>
</td>
<td></td>
<td>
Premise Name<br />
#Html.TextBox("SearchPremise", string.Empty, new { style = "float:left;width:170px;" })
<div id="Div1" style="float:left; padding-left:5px;"></div>
<div style="clear:both;"></div>
</td>
#*<td>
Effective Start >=<br />
<div class="col-md-10">
#Html.TextBox("StartDate")
</div>
</td>
<td>
Effective End<br />
<div class="col-md-10">
#Html.TextBox("EndDate")
</div>
</td>*#
<td>
<a href="#test" class="btn btn-default" id="searchButton" >Search</a>
<div class="tooltiptext">
Key less by entering only part of a Search String <b>i.e.</b> key <i>Garage</i> to find <i>all premises containing this text</i> quickly
</div>
</td>
<td>
<div id="LoadingGif"></div>
</td>
</tr>
</table>
</fieldset>
<div id="ResultsList" style="clear:both;">
#Html.Partial("IndexSearchResults")
</div>
#section Scripts {
#Scripts.Render("~/bundles/tablesorter")
<script type="text/javascript">
$(document).ready(function () {
$('a').each(function () {
$(this).qtip({
content: {
text: $(this).next('.tooltiptext')
}
});
});
$('#searchButton').click(function () {
var url = '/SupplyPoint/IndexSearch';
var data = {
searchSPID: $('#SearchSPID').val().toString(),
searchPremise: $('#SearchPremise').val().toString()
};
$("#ResultsList").load(url, data, function () {
$('#LoadingGif').empty();
});
$('#LoadingGif').empty().html(' Loading...');
Init();
});
function Init() {
if ($("#myTable").find("tr").size() > 1) {
alert('Without this Alert the Tablesorter does not apply formatting, i.e. no paging, no zebra, nothing just one big list, odd');
$("#myTable").tablesorter({ dateFormat: "uk", widgets: ['zebra'], sortList: [[4, 0]] }).tablesorterPager({ container: $("#pager") });
$('tr').live('click', function (e) {
//if not clicking an anchor tag or imag then assume user wants to go to details page
if ((!$(e.target).is('a')) && (!$(e.target).is('img')) && (!$(e.target).is('th')) && !(e.target.isTextEdit)) {
if ($(this).attr('rowid') != null)
window.location = 'SupplyPoint/Details/' + $(this).attr('rowid');
}
});
} else {
$("#myTable").hide(); $("#pager").hide();
}
return false;
};
});
</script>
}
and here is IndexSearchResults.cshtml:
#model IEnumerable<AscendancyCF.Models.SupplyPoint>
#{
ViewBag.Title = "Index";
}
<p><h5><div id="noRecords">Your search returned #Model.Count() items</div></h5></p>
<table class="tablesorter" id="myTable">
<thead>
<tr>
<th></th>
<th>
#Html.DisplayNameFor(model => model.SPID)
</th>
<th>
#Html.DisplayNameFor(model => model.SupplyPointName)
</th>
<th>
#Html.DisplayNameFor(model => model.GazateerRef)
</th>
<th>
#Html.DisplayNameFor(model => model.SupplyPointEffectiveDateTime)
</th>
<th>
Premise Type
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr rowid="#item.SupplyPointId">
<td>
<img src="~/Content/images/edit.png" id="imgEdit" alt='Edit Details' title='Edit Details'>
</td>
<td>
#Html.DisplayFor(modelItem => item.SPID)
</td>
<td>
#Html.DisplayFor(modelItem => item.SupplyPointName)
</td>
<td>
#Html.DisplayFor(modelItem => item.GazateerRef)
</td>
<td>
#Html.DisplayFor(modelItem => item.SupplyPointEffectiveDateTime)
</td>
<td>
#Html.DisplayFor(modelItem => item.SupplyPointType.SupplyPointTypeName)
</td>
</tr>
}
</tbody>
</table>
<div class="pager" id="pager">
<form>
<img src="~/Content/Images/first.gif" id="iFirst" class="first" />
<img src="~/Content/Images/prev.gif" class="prev" />
<input type="text" class="pagedisplay" />
<img src="~/Content/Images/next.gif" class="next" />
<img src="~/Content/Images/last.gif" class="last" />
<select class="pagesize">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="100">100</option>
<option value="500">500</option>
</select>
</form>
</div>
jQuery.load is asynchronous, so it will return before the content is loaded. In the Init function, you are trying to use the content before it has been loaded. The alert() is making it succeed, since it allows the content to be loaded.
Instead of calling Init() immediately after the load() call, you should move it inside the callback.
$('#searchButton').click(function () {
var url = '/SupplyPoint/IndexSearch';
var data = {
searchSPID: $('#SearchSPID').val().toString(),
searchPremise: $('#SearchPremise').val().toString()
};
$("#ResultsList").load(url, data, function () {
$('#LoadingGif').empty();
Init(); // <--- Here
});
$('#LoadingGif').empty().html(' Loading...');
});