I am new to Knockout JS, therefore need your help to fix one small issue. I am trying to bind css style with a table row in CSHTML page, based on a condition. I have added 2 rows but displaying only one for each item using 'visible' attribute. Following is my cshtml code:
<table class="listing">
<tbody class="no-wrap" data-bind="foreach: searchResultsListing.pagedItems, select: searchResultsListing">
<tr class="selectable" data-bind="visible: !$root.isMatchedCase($data), css: { selected: $root.searchResultsListing.isSelected($data) }">
<td class="check"><span></span></td>
--
--
<tr/>
<tr class="selectablematch" data-bind="visible: $root.isMatchedCase($data), css: { selected: $root.searchResultsListing.isSelected($data) }">
<td class="check"><span></span></td>
--
--
<tr/>
Underlying Typescript: Inside app.listing.ts File:
isSelected(item: T) {
return this.selectedItems.indexOf(item) >= 0;
}
As you can see, based on the result of isMatchedCase() method (which returns a boolean), I am displaying either of the tr (selectable or selectablematch). The problem is the css on the tr is getting binded only for the first tr, i.e. with the class selectable, and not getting binded with the selectablematch tr. The method 'isSelected($data)' is not getting called when the checkbox in the first td is clicked for 'selectablematch' tr. Can you guys please let me know what I am missing here?
I am little confused as to why you need to have 2 tr to begin with. What you could do is have a computed which would return the correct class for you and have only one row which will be always visible. Not need to deal with hide/show etc.
Look at this article on the css binding and how it is done. Here is what I am suggesting:
<table class="listing">
<tbody class="no-wrap" data-bind="foreach: searchResultsListing.pagedItems, select: searchResultsListing">
<tr data-bind="css: { rowClass($data), selected: $root.searchResultsListing.isSelected($data) }">
<td class="check"><span></span></td>
<tr/>
</tbody>
</table>
And your pureComputed (wrapped in a function so we can pass the $data):
var rowClass = function(data) {
return ko.pureComputed(function(){
return isMatchedCase(data) ? 'selectablematch' : 'selectable')
)}
}
I think that should get you going in the right direction.
Related
I have a nested HTML table. I would like to show parts of the nested table depending on the header clicked using javascript
http://jsfiddle.net/TtWTR/103/
so far it shows all three parts. I want to click header A and show only optionA, click headerB and only show optionB etc etc. Not sure if ive set it up right as all three are showing. thanks
To achieve expected result, use below option oh hide() and show() methods
$('.trigger').click(function() {
console.log($(this).text())
var selectedHdr = $(this).text();
$('.nested tr').hide();
$('.nested tr#'+selectedHdr).show();
});
https://codepen.io/nagasai/pen/vdabJQ
Usually I find it convenient to use CSS class selectors on the "root" element (in your case that would be .toptable) allowing you to toggle it to show and hide child elements.
<table class="toptable">
<tr class="accordion">
<td class="A trigger">A</td>
<td class="B trigger">B</td>
<td class="C trigger">C</td>
</tr>
<tr>
<td>
<table>
<tr class="content A">
<!-- will toggle using show-A -->
</tr>
</table
</td>
</tr>
</table>
Then you can make sure to hide the .content rows using CSS unless specific classes are set on the top table:
.content {
display: none; /* content hidden by default */
}
.show-A .A.content {
display: table; /* show when the parent table has .show-A set */
}
Now you just have to add event listeners to your triggers to toggle the classes for the different content rows:
const toptable = document.querySelector('.toptable');
['A', 'B', 'C'].forEach((group) => {
const trigger = document.querySelector(`.${group}.trigger`);
trigger.addEventListener('click', () => {
toptable.classList.toggle(`show-${group}`);
});
});
This can be done using the following script
$('.nested').hide();
$('tr .trigger').click(function() {
var target_id= "#"+$(this).attr('id')+"-table";
$('.nested').not(target_id).hide();
$(target_id).show();
});
and is shown in http://jsfiddle.net/TtWTR/152/
I am using ng-repeat with track by $index option, I can not delete correct element from array or object (ng-repeat will always remove the last element).
this is add button (add button created a new table) :
$scope.current = 0;
$scope.addHocKPIs = function () {
$scope.repeatTable.push('test' + $scope.current);
$scope.current += 1;
};
this is table code:
<table id="addHocKPIsTable{{$index}}" ng-repeat="table in repeatTable track by $index">
<td>
<table>
<tbody>
<tr style="display: table-row">
<th style="height: 46px;">
<button type="button" role="button" ng-click="removeAddHocKPIs($index, table)">
<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
</button>
</th>
</tr>
</tbody>
</table>
</td>
</table>
and this is remove button js code :
$scope.removeAddHocKPIs = function (index, table) {
$scope.repeatTable.splice(index, 1);
};
when I delete second table from array, deleting last table (so "test3")
it will deleted "test1" value and new array: but deleted table test3 (like a photo )
Angular is not deleting the last element, it's deleting the element you wanted and updating the $index bindings. Say the array contains three elements; when you remove the second, the third element becomes the second and its index value becomes 1 instead of 2, since you now have two elements in the array.
Check this fiddle. Notice that when you click on the remove input, the correct person is removed and the indexes are updated.
I used ng-repeat="table in repeatTable track by $id(table)" and it works.
My source : ng-repeat with track by
Below is the tabular structure for expand & collapse, i have done using table. Now i have used the below script for collapse & expand. But sometime i succeeded in expand & sometime don't.
What i did, when i got response from the api, i call this function :
$timeout(function (){
$scope.initExpandCollapse();
},1000);
$scope.initExpandCollapse = function () {
angular.element(document).on("click", ".table_exp", function(){
var TBODY = angular.element(this).parents(3);
if(TBODY.hasClass("open")){
TBODY.children("tr.expand-table-row").hide();
TBODY.removeClass("open");
return false;
}
TBODY.addClass("open");
TBODY.children("tr.expand-table-row").show();
});
}
If you guys, can help me out for this problem . Thanks.
CSS:
tr.expand-table-row {
display: none;
}
tr.expand-table-row.open {
display: initial;
}
Angular
$scope.expandCollapse = function expandCollapse (item) {
item.open = !item.open
}
HTML
<table>
<tbody>
<tr ng-repeat="item in items track by $index"">
<td ng-click="expandCollapse(item)">++++</td>
<td>
<table>
<tr ng-class="{'open': item.open}" class="expand-table-row open">
<td>{{item.name}}</td>
<td ng-repeat="data in item.options">{{data.name}}</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
You need nested tables so the click marker does not simply vanish with the rest, apart from that the salient point is the ng-class="{'open': item.open}" espression that sets the class open if the property open on item is set.
Try to use window.onload instead of $timeout, or add you script to the end of body tag.
I have a table with a single span element in td.
<table>
<tbody>
<tr>
<td id="td">
<span id="span1">this is span1</span>
</td>
</tr>
</tbody>
</table>
I create a jQuery tooltip for span1.
$('#span1').tooltip({
content: function(){
return "tooltip_span1";
},
items: $('#span1')
});
I update the content of td adding a second span with id 'span2' by concatenating.
var tdHtml = $('#td').html();
tdHtml+="<br> <span id=\"span2\">this is span2</span>"
$('#td').html(tdHtml);
I add a tooltip for span2 which will be displayed correctly.
$('#span2').tooltip({
content: function(){
return "tooltip_span2";
},
items: $('#span2')
});
However, the tooltip of span1 is not displayed anymore after updating the td content. Why?
Please see a jsFiddle example here.
Thanks very much for your answers.
You should use append, right now you are deleting and re-adding span1 (and removing previously added behavior)
$('#td').append("<br> <span id=\"span2\">this is span2</span>");
http://jsfiddle.net/dy7pq/2/
It looks like it's because you are treating the existing code as HTML and that the DOM reference is lost. It will work if instead you append a DOM fragment.
var newSpan = $('<span id="span2">this is span2</span>');
$('#td').append(newSpan);
See this fiddle for complete code: http://jsfiddle.net/harveyramer/b3xGM/1/
So here's my problem, I'm new to jQuery. What I am trying to do here is check for user to click on a certain table cell/row and it would then display a div named popup of an index the same as the table cell votes. Without having to make separate functions of all the rows in my table.
Using some numerical value will display all the dialogs from a click of the cell of the same value the first time and from the second time only the correct one.
I bet there's some other way to do it and maybe there's just a stupid error.
Using the index value in the click and dialog function won't work.
I am open to suggestions on improvement also.
The scripts:
<script type='text/javascript'>
$(document).ready( function() {
$('.votes').each(function(index) {
$('.votes:eq(index)').click(function() {
$('.popup:eq(index)').dialog();
});
});
});
</script>
HTML for the table part, only a snippet
<td class='votes'>5</td>
<td class='votes'>15</td>
<td class='votes'>25</td>
HTML for the div part, only a snippet of the div:
<div class='popup'>
<ul>
<li>John Johnsson</li>
<li>John Doe</li>
</ul>
</div>
<div class='popup'>
<ul>
<li>Matt Theman</li>
<li>Peter Watley</li>
</ul>
</div>
jsFiddle Demo
You don't have to iterate using each for .click, that will happen internally. You can use .index() to get the index of the element clicked with reference to its parent.
$('.votes').click(function() {
$('.popup').eq($(this).index()).dialog();
});
Initially, the main problem is that you are not using string concatenation to apply the index to the selector (demo):
$('.votes:eq(index)')
// the Sizzle selector engine doesn't know what the string "index" is.
instead of
$('.votes:eq(' + index + ')')
// using concatenation calls the .toString() method of index to apply "0" (or "1", "2", etc.)
// so that the parsed string becomes '.votes:eq(0)' which the Sizzle selector engine understands
Once the Sizzle selector engine understands which elements to target (demo), the second problem is how jQueryUI changes the DOM with the .dialog method.
Inital markup:
<table>
<tbody>
<tr>
<td class="votes">5</td>
<td class="votes">15</td>
<td class="votes">25</td>
</tr>
</tbody>
</table>
<div class="popup">
<ul>
<li>John Johnsson</li>
<li>John Doe</li>
</ul>
</div>
<div class="popup">
<ul>
<li>Matt Theman</li>
<li>Peter Watley</li>
</ul>
</div>
Once the first click event is handled, one of the div.popup elements is transformed into a jQueryUI Dialog and is appended to the body, removing it from its initial position, like so:
<table>
<tbody>
<tr>
<td class="votes">5</td>
<td class="votes">15</td>
<td class="votes">25</td>
</tr>
</tbody>
</table>
<div class="popup">
<ul>
<li>Matt Theman</li>
<li>Peter Watley</li>
</ul>
</div>
<div class="ui-dialog ui-widget ..."> ... </div>
So your initial indexes no longer apply. Fortunately, there are several solutions to both problems (a few of which I've listed below).
Solutions to Problem 1:
Use string concatenation as described above.
Use the .eq method instead, which will accept the index variable as-is
Use a delegate handler instead and grab the index from within the handler:
Example of 2:
$('.votes').eq(index);
Example of 3:
$('table').on('click', '.votes', function (e) {
var vote = $(this),
index = vote.parent().index(vote);
});
Solutions to Problem 2:
Create all of the dialogs initially and open them as needed.
Create the dialogs using a deep clone of the div element. (Not recommended)
Remove the td element to match the removed and re-appended div element. (Not recommended)
Example of 1:
var popups = [];
$('.popup').each(function (i, elem) {
var popup = $(elem).data('index', i).dialog({
"autoOpen": false
});
popups.push(popup)
});
$('table').on('click', '.votes', function (e) {
var vote = $(this),
index = vote.index();
popups[index].dialog('open');
});
I'm sure there are other solutions as well, but these are the ones I thought of of the top of my head.
Functional demo: http://jsfiddle.net/2ChvX/2/
UPDATE:
With your chosen table structure, you're actually looking for the index of the parent tr element as that is what corresponds with the div.popup element. To get the index of the parent tr element, change the line that gets the index from:
index = vote.index();
to:
index = vote.parent().index();
Updated fiddle: http://jsfiddle.net/AZpUQ/1/
Updated
FWIW, here's an example using the jQueryUI dialog (which I presume you are using?) and javascript sectionRowIndex and cellIndex.
Reusable code allowing you to identify the cell the user clicked in and perform appropriate action.
http://jsfiddle.net/KbgcL/1/
HTML:
<table id="myTable">
<tr>
<th>Label:</th>
<th>Washington</th>
<th>Idaho</th>
<th>California</th>
</tr>
<tr>
<td class='label'>Votes</td>
<td class='votes'>5</td>
<td class='votes'>15</td>
<td class='votes'>25</td>
</tr>
<tr>
<td class='label'>Voters</td>
<td class='voters'>5,000</td>
<td class='voters'>15,000</td>
<td class='voters'>25,000</td>
</tr>
</table>
<div id="msg"></div>
jQuery/javascript:
var myTr;
$('#msg').dialog({
autoOpen:false,
title: 'Report:'
});
$('#myTable tr td').click(function() {
myTr = $(this).closest('td').parent()[0].sectionRowIndex;
myCell = this.cellIndex;
myState = $('#myTable').find('tr:eq(0)').find('th:eq(' +myCell+ ')').html();
myVoters = $('#myTable').find('tr:eq(' +myTr+ ')').find('td:eq(' +myCell+ ')').html();
if (myTr==2 && myCell==3){
//California
$('#msg').html('There are ' +myVoters+ ' voters in ' +myState);
$('#msg').dialog('open');
}else if(myTr==1 && myCell==1){
$('#msg').html('There were ' +myVoters+ ' votes made in ' +myState);
$('#msg').dialog('open');
}
});